javascript-ES6调用super()不能正确初始化父类
作者:互联网
我有以下代码结构,我尝试通过调用super()来初始化父类,但是当我调用this._init()时,它将调用子项之一.任何帮助我该如何解决?
class Parent {
constructor() {
console.log('P constructor()');
this._init();
}
_init() {
console.log('P _init()');
this.parentProp = 'parent';
}
}
class Child extends Parent {
constructor() {
console.log('C constructor');
super();
this._init();
}
_init() {
console.log('C _init()');
this.childProp = 'child';
}
test() {
console.log(this.childProp + ' ' + this.parentProp);
}
}
let child = new Child();
child.test();
这是上面代码的输出:
C constructor()
P constructor()
C _init()
C _init()
child undefined
解决方法:
之所以调用Child#_init,是因为调用this._init()(在Parent中)时,对象的_init属性就是该对象.发生了什么(省略了一些细节)是:
> new创建一个新对象,该对象的[[Prototype]]是Child.prototype. Child.prototype的[[Prototype]]是Parent.prototype.
>新来电子.
>孩子叫父母.
> this._init()在对象上查找_init属性.由于对象没有自己的_init属性,因此JavaScript引擎将查找其[[Prototype]]. Child.prototype确实具有_init属性,因此引擎使用该属性.
至于解决方法:JavaScript类只有一个构造函数,因此拥有一个单独的_init函数并没有真正的目的.1这就是构造函数的用途.尽管有它们的名称,但它们不构造对象,而是对其进行初始化.因此,只需将_init的代码放入构造函数中即可:
class Parent {
constructor() {
console.log('P constructor');
this.parentProp = 'parent';
}
}
class Child extends Parent {
constructor() {
console.log('C constructor');
super();
this.childProp = 'child';
}
test() {
console.log(this.childProp + ' ' + this.parentProp);
}
}
let child = new Child();
child.test();
或者,只需从Child完全删除this._init()调用,并让Child#_init调用super._init().我知道您在评论中已经说过,您认为这是一种不好的做法(这不是标准做法),但是如果您想使用_init来分隔函数,那么您可以这样做.但是,这样做违反了公认的原则,即跨语言,即从构造函数中调用可重写方法(父级调用this._init())是一个Bad Idea™.
标签:ecmascript-6,babeljs,inheritance,javascript 来源: https://codeday.me/bug/20191026/1938391.html