对象方法中的super

原型对于javascript来说非常重要,甚至可以说是javascript中最为重要的知识点。然而,很多人一看到原型就懵逼。ES5我们可以使用Object.getPrototypeOf()来返回原型对象,使用Object.setPrototypeOf()来设置原型对象。
看下面的例子:

let person = {getSay() {return 'hello'}
}let tom = {getSay() {return Object.getPrototypeOf(this).getSay.call(this) + ',jack'}
}Object.setPrototypeOf(tom, person);
console.log(tom.getSay())       // hello,jack

以上代码通过 Object.setPrototypeOf(tom, person) 设置tom的原型对象为person,通过Object.getPrototypeOf(this)返回tom的原型对象person,所以Object.getPrototypeOf(this).getSay 实际上就是person.getSay,在通过call()方法将peoson中的this指向tom作用域,实现tom继承peoson。

相信很多人在看到Object.getPrototypeOf()和call()来调用原型时已经由懵逼遍傻逼的了。好在ES6中引入了super关键字来解除我们的痛苦。super引用相当于指向原型对象的指针,实际上也就是Object.getPrototypeOf(this)的值。废话少说,我们将上面的例子改变以下:

let person = {getSay() {return 'hello'}
}let tom = {getSay() {// 相当于Object.getPrototypeOf(this).getSay.call(this)return super.getSay() + ',jack';}
}Object.setPrototypeOf(tom, person);
console.log(tom.getSay());          //  hello,jack

怎么样,是不是感觉爽了很多。不过得注意,super只能在简写的对象方法中使用。可是还有同学说我看到Object.setPrototypeOf(tom, person)我也恶心,别急,ES6都为你准备好了,请继续往下看。

class中的super

在ES6之前,javascript都不支持类的概念,开发者都是通过原型实现类似类的结构。

ES5中,我们通过在继承的函数中调用call()或者apply()方法实现继承。

function SuperType(name) {this.name = name;this.color = ["red", "blue"];
}
SuperType.prototype.sayName = function() {alert(this.name);
}
function SubType(name, age) {SuperType.call(this, name);this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;var s1 = new SubType('ren');
s1.sayName();
console.log(s1.color);           //  ["red", "blue"]

ES6中我们可以通过类,我们使用extends实现基类(SuperType)与派生类(SubType)之间的继承。在派生类的constructor中调用super()即可访问基类的构造函数。super()负责初始化this,相当于ES5中的call和apply方法。

class SuperType {constructor(name) {this.name = name;this.color = ["red", "blue"];}sayName() {alert(this.name);}
}
class SubType extends SuperType {constructor(name, age) {// 相当于SuperType.call(this, name);super(name);this.age = age;}
}
var s1 = new SubType('ren', 19);
s1.sayName();
console.log(s1.color);       //  ["red", "blue"]

Tips:

- 只可在派生类的构造函数中使用super()
- 在构造函数中访问this之前一定要调用super(),它负责初始化this。

转载于:https://www.cnblogs.com/renzhiwei2017/p/9329568.html

ES6中的super相关推荐

  1. 三,ES6中需要注意的特性(重要)

    -----书接上文,前文中我们总结了关于JS的组成部分以及如何快速开展学习JS,相信已经有很多朋友掌握到这些方法.接下来就从更深的ECMAScript开始说起. 1.什么是ES6? ECMAScrip ...

  2. 33 ES6中的类和对象

    技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.面向对象 面向对象的思维特点: a.抽取(抽象)对象共有的属性和行为组织(封装)成一个 ...

  3. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  4. es6中的类及es5类的实现

    目录 类的特点 类的特点 1.类只能通过new得到 在es6中类的使用只能是通过new,如果你将它作为一个函数执行,将会报错. //es6的写法 class Child {constructor() ...

  5. [react] 在构造函数中调用super(props)的目的是什么?

    [react] 在构造函数中调用super(props)的目的是什么? 这是ES6的语法.class组件继承自React.Component,super(props)之后,有以下几个作用: 初始化pr ...

  6. JavaScript从入门到放弃 - ES6中的对象和类

    重点讲解Tab栏切换.增.删.改 1. 面向过程与面向对象 2.ES6 中的对象与类 2.1 对象 2.2 类 2.2.1 创建类 2.2.1.1 语法 2.2.1.2 实例 2.2.2 类创建添加属 ...

  7. ES6中的常用知识点总结

    1.let 和 const ES5 只有全局作用域和函数作用域,没有块级作用域,ES6中新增了let命令和const命令用于声明变量,且类似于C+.Java等语言是块级作用域.const声明一个只读的 ...

  8. ES6 中 class 和 extends 的es5实现

    ES6 中 class 和 extends 实现原理 在学习中,我们通常会遇到这种场景,在阅读某段实现源码时我们往往能看懂大部分代码,但是却卡在其中的一两个点,导致无法继续阅读. 所以在这里我会先列出 ...

  9. ES6中setTimeout函数的this

    ES6中setTimeout函数的this 在编程的过程中有同学遇到不太清楚ES6中this指向的问题,代码抽象如下: function myFunction(){var mthis = this;s ...

最新文章

  1. Java 之String、StringBuffer 和 StringBuilder 三者区别介绍
  2. python面向对象编程 Object-Oriented
  3. python 装饰器 参数-python装饰器的详细解析
  4. JAVA设计模式详解(六)----------状态模式
  5. js实现购物车数量的增加与减少,js实现购物车数量的自增与自减
  6. P2607 [ZJOI2008]骑士
  7. 变形监测期末复习_寒假即将来临,中小学期末考试时间是什么时候?
  8. 关于websocket 在生产环境中遇到的问题 及 解决办法
  9. 『资源』机器学习实践中文资源合集
  10. php字符是否在字符串中出现,php 判断一个字符串中的字符是否都在另一个中出现(算法)...
  11. python 安装了不能用_解决Python安装后pip不能用的问题
  12. 芒果 mysql插件,NoSQL代表:MongoDB(芒果数据库)
  13. 微信小程序开发工具使用方法
  14. vue创建项目卡住不动,vue create project卡住不动 解决办法
  15. C语言中向量的加法,向量的加减法运算法则
  16. LabView学习之旅(2)labview基础编程
  17. 初中数学可以用计算机吗,中学生利用手机电脑学习数学可行吗?
  18. 解决 oracle 错误ORA-01033
  19. java 判断字符串是否包含字母_Java中判断某一字符串是否包含数字、字母和中文...
  20. Zabbix4配置微信报警及消息群发

热门文章

  1. geojson在线生成工具_logofree详解:LOGO设计在线生成
  2. 计算机网络 闯关,2009计算机网络考研试题过关必练.docx
  3. 阻止JavaScript事件冒泡到父元素
  4. Spring的EL表达式
  5. 【git】【eclipse】记住密码/密码保存在哪里?
  6. python array操作,Python中数组的基本操作
  7. cocos2d 屏幕適配_cocos2d-x 2.x屏幕适配基础
  8. 基于python3写的源码剖析_Python 极简插件系统 pluggy 源码剖析
  9. HTML边框为零,html – 保证金,填充,边框全部为零后仍有空格?
  10. PyTorch教程(十一):多输出的感知机以及梯度