ES6继承：this与执行顺序详解

本文深入探讨ES6父子类继承机制中`this`指向和执行顺序。通过`Parent`和`Child`两个类的示例代码，详细分析了类字段初始化、`super()`调用、构造函数执行顺序以及`this`指向问题。文章阐述了`super()`必须在使用`this`之前调用，并解释了类字段的初始化顺序，以及如何通过`bind`方法确保方法中`this`指向的正确性，最终帮助读者清晰理解ES6继承中的细节，避免常见的this指向错误和执行顺序误解。 学习ES6继承，理解`this`指向和执行顺序至关重要，本文提供清晰的代码示例和分析，助你掌握ES6继承的精髓。

深入理解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的构造函数。

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()的调用时机和类字段的初始化顺序是理解关键。

理论要掌握，实操不能落！以上关于《ES6继承：this与执行顺序详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！