ES6 Class继承中super在不同场景中的用法
2017-12-11 11:12
645 查看
super这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
第一种情况,super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。
上面代码中,子类B的构造函数之中的super(),代表调用父类的构造函数。这是必须的,否则 JavaScript 引擎会报错。
注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.constructor.call(this)。
第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
例1:普通方法
上面代码中,子类B当中的super.p(),就是将super当作一个对象使用。这时,super在普通方法之中,指向A.prototype,所以super.p()就相当于A.prototype.p()。
这里需要注意,由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。
如果super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。
例2:静态方法
–参考自阮一峰《ES6》
第一种情况,super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。
class A {} class B extends A { constructor() { super(); } }
上面代码中,子类B的构造函数之中的super(),代表调用父类的构造函数。这是必须的,否则 JavaScript 引擎会报错。
注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.constructor.call(this)。
第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
例1:普通方法
class A { p() { return 2; } } class B extends A { constructor() { super(); console.log(super.p()); // 2 } } let b = new B();
上面代码中,子类B当中的super.p(),就是将super当作一个对象使用。这时,super在普通方法之中,指向A.prototype,所以super.p()就相当于A.prototype.p()。
这里需要注意,由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。
如果super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。
例2:静态方法
class Parent { static myMethod(msg) { console.log('static', msg); } myMethod(msg) { console.log('instance', msg); } } class Child extends Parent { static myMethod(msg) { super.myMethod(msg); } myMethod(msg) { super.myMethod(msg); } } Child.myMethod(1); // static 1 var child = new Child(); child.myMethod(2); // instance 2
–参考自阮一峰《ES6》
相关文章推荐
- ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
- es6 Class的继承extends & super
- ES6 javascript中class静态方法、属性与实例属性用法示例
- log4j的用法,控制不同场景的日志输出
- 熟练掌握js中this的用法,解析this在不同应用场景的作用
- java继承中super关键字的用法
- Python中多继承与super()用法
- ES6 之 class 继承
- Java学习笔记---继承和super的用法
- ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解
- ES6 类(Class)基本用法和静态属性方法详解
- ES6 Class 中的 super 关键字
- ES6 Class的继承
- Java基础_super()用法和继承的关系
- ES6中的import与export对class操作相关用法举例
- 黑马程序员-Object-C继承.super.多态的用法总结
- ECMAScript 6 学习系列课程 (ES6 class的相关用法)
- JAVA学习第3天(5)继承相关:super用法,复写override
- Java之继承与多态5.3.1--super的用法
- JavaScript中this的用法及this在不同应用场景的作用解析