ES6父子继承中this指向和执行顺序究竟是怎样的？

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

以下代码演示了ES6中父子类的继承，以及this指向和执行顺序的细节：

class Parent {
  constructor() {
    console.log('Parent constructor', this.name); // 1
    this.init();                              // 2
    this.logNum = this.logNum.bind(this);     // 3
  }

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

  init() {
    console.log('Parent init', this.name);    // 7
  }

  logNum() {}
}

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

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

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

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

const { logNum } = new Child();
logNum();                                      // 18

输出结果：

Child constructor
Parent name init
Parent constructor Parent
Child init Child
Parent init Parent
Child num init
super exec finish 99
99

关键点分析：

1. 类字段初始化： 在实例化Child之前，Parent类的静态字段name就已经通过立即执行函数表达式（IIFE）初始化为'Parent'。这发生在任何构造函数执行之前。

2. super()调用： Child的构造函数中，super()调用必须在this被使用之前。super()调用会执行Parent的构造函数。

   

   ProcessOn

   免费在线流程图思维导图，专业强大的作图工具，支持多人实时在线协作

   下载

3. this指向： 在Parent和Child的构造函数以及init方法中，this始终正确地指向当前实例（Child实例）。

4. 执行顺序： 代码的执行顺序按照数字标号所示，清晰地展现了类字段初始化、super()调用、父类构造函数执行、子类构造函数执行的顺序。

5. 实例属性初始化： Parent类的实例属性在Parent构造函数中初始化；Child类的实例属性在Child构造函数中，super()调用之后初始化。Child的num属性在super()之后初始化，因为super()调用会先执行父类的构造函数。

6. 方法绑定： this.logNum = this.logNum.bind(this); 这行代码确保了logNum方法中的this始终指向正确的实例，即使在不同的上下文中调用。

通过以上分析，可以明确理解ES6父子类继承中this指向和执行顺序的机制，避免常见的误解。 super()的调用时机和类字段的初始化顺序是理解关键。