编程语言
首页 > 编程语言> > javascript-ES6调用super()不能正确初始化父类

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