原因:派生出的构造函数不会创造新的this对象,即子类没有自己的this;只有通过super()把基类(父类)创建好的this对象接下来,派生类才能像基类一样使用this来生成对象的属性。
本教程操作环境:windows7系统、ecmascript 6版、dell g3电脑。
在学习es6 class继承时往往提到一个关键点
一个子类 subclass 继承父类 superclass 的构造器constructor时有两个要求:
1)必须在构造器调用 super( )。
2) this必须写在super( )之后。
第一点是为了解决父类子类的歧义,确定了“子类没有自己的 this”这一概念
子类和父类是个相对的概念,因为一个类可以既是子类也是父类,所以es6里用的是绝对的概念:基类和派生类。而且这个概念是针对所有构造函数说的,js 里的构造函数要么是基的,要么就是派生的。
es6中,我们随手写的构造函数(function)都是基类,基类可以直接用this来指向调用它所在方法的对象。
咱自己给this总结了一句话:谁调用了this,this就指向谁。
function super(name) { this.name = name; superfactory.prototype.sayhi = function () { console.log("hi"); } } let super = new super("peter");//通过new创建了新的对象,super()中的this即指向这个对象
es6中的派生类,就是extend的class。派生出的构造函数不会创造新的this对象(或者说this指向的对象(这里可以回顾一下new关键字做的事情),就是所说的"子类没有自己的this"。只有通过super()把基类创建好的this对象接下来,派生类才能像基类一样使用this来生成对象的属性。
class superclass { //基类 not父类 constructor(name) { this.name = name; } sayhi() { console.log("hi"); } }; class subclass extends superclass {//派生类 not子类 constructor(name,age) { surpe(name); this.age = age; } sayno() { console.log("no"); } }; let subinst = new subclass('tom',18);subinst.sayhi();//hisubinst.sayno();//no
那this为什么必须写在super( )之后是为了避免一个代码陷阱。
class person { constructor(name) { this.name = name; }} class politeperson extends person { constructor(name) { this.greetcolleagues(); // 这里不允许我们使用this,下面解释 super(name); } greetcolleagues() { alert('good morning folks!'); }}
上面的例子假设调用 super( )之前允许使用 this, 一段时间后为了满足一些需求,我们在 greetcolleagues( ) 中添加:
greetcolleagues() { alert('good morning folks!'); alert('my name is ' + this.name + ', nice to meet you!'); }
但是我们忘了,this.greetcolleagues( ) 在 super( )调用之前,this.name根本都没有定义,代码会抛错,像这样的代码可能很难想到什么时候发生。
因此,为了避免这个陷阱,javascript 强制要求在 constructor 中使用 this 之前,必须先调用 super。
【相关推荐:javascript视频教程、编程视频】
以上就是es6的class继承为什么要调用super的详细内容。