ES6父子继承中：this指向和执行顺序究竟是如何工作的？-js教程-PHP中文网

ES6父子继承中：this指向和执行顺序究竟是如何工作的？

花韻仙語

发布： 2025-02-23 16:32:43

原创

563人浏览过

es6父子继承中：this指向和执行顺序究竟是如何工作的？

深入理解ES6父子继承中的this指向和执行顺序

ES6中的继承机制有时会令人困惑，尤其涉及this指向和执行顺序。本文将通过代码示例，详细分析这两个关键问题。

<code class="javascript">class Parent {
  constructor() {
    console.log('parent constructor', this.name);
    this.init();
    this.logNum = this.logNum.bind(this);
  }

  name = (() => {
    console.log('Parent name init');
    return 'Parent';
  })();
  num = -1;

  init() {
    console.log('parent init', this.name);
  }

  logNum() {}
}

class Child extends Parent {
  constructor() {
    console.log('Child constructor');
    super();
    console.log('super exec finish', this.num);
  }

  name = 'Child';
  num = (() => {
    console.log('Child num init');
    return 99;
  })();

  init() {
    console.log('Child init', this.name);
    super.init();
    this.num = 10;
  }

  logNum() {
    console.log(this.num);
  }
}

const { logNum } = new Child();
logNum();</code>

登录后复制

问题一：Parent构造函数中this.name为何为'Parent'？

在Child实例化过程中，首先执行Parent的构造函数。虽然this在Parent构造函数内部指向Child实例，但name属性的初始化发生在构造函数执行之前。此时，this指向的是Parent的原型，因此name的值为'Parent'。

问题二：实例属性（例如x = 'a'）的初始化时机？