ES6 父子继承中一些执行顺序以及this指向的问题？

Question

有如下代码：

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()

打印结果：

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

1、在实例化Child时，Parent.constructor中的name为什么是'Parent'？
Child.constructor中调用super，内部this指向为Child，所以不应该是'Child'吗？

2、诸如x = 'a'的实例属性是什么时候完成初始化的？
Child.constructor中调用super时，可以看到打印了'Parent name init'，说明实例属性是在构造器方法之前就初始化了吧，那为什么Child.num是在super调用结束后才初始化？

Answer 1

第一问

当实例化Child时，会首先执行父类Parent的构造函数，然后再执行子类Child的构造函数。
在Parent.constructor方法中打断点如下图所示：

从上图Scope栏中的Local作用域可知，虽然this值指向Child,但是其内部的name属性值是“Parent”

• 原因是类字段初始化发生在构造函数执行之前。当 Parent 的构造函数被调用时，类字段的初始化，也就是表达式赋值

  name = (() => {
    console.log('Parent name init')
    return 'Parent'
  })()

  已经发生了。

• 虽然this 引用的是 Child 的实例，但是因为表达式赋值是Parent 的构造函数被调用之前执行的，所以 this.name 实际上是在 Child 的实例上设置了一个名为 name 的属性，并赋值为 'Parent'。

• 不妨在Parent中增加如下代码：

  parentName = "parentName"
  init() {
    console.log('parent init', this.name)  //结果输出parent init Parent
    console.log("test: ", this.parentName) //结果输出test: parentName
  }

  实际上还是先对类字段进行初始化，然后再调用构造函数实例化

第二问

当执行 super() 方法时，父类 Parent 的构造函数会执行并初始化父类的实例属性，然后才会继续执行子类 Child 的构造函数。在子类的构造函数中，才会对子类的实例属性比如child.num进行初始化

Answer 2

导致你产生这个疑问的原因是你对类成员的初始化时机理解不准确，你可以把这段代码用babel做一个语法降级就能看出

• 类成员初始化的时机是在 constructor 中，super() 执行完成之后进行的，也就是说，虽然 super() 中 this 指向是 Child 的实例，但其成员都还没有初始化，所以访问到的值还是 Parent 赋的默认值
  

Answer 3

1、创建子类实例对象，会在子类构造函数中 super 执行完之后才会把父类的实例属性和方法放到子类的实例对象上，所以在 super 中执行 this.name 时，子类的属性和方法还没有绑定到 this 上面去，此时会去父类查找同名的属性。

2、需要注意的是 super 代表的是父类的构造函数，但 super 内部的 this 代表子类的实例，而不是父类的实例。

这篇文章可能对你的问题能有更好的理解 Class的继承

Answer 4

代码可以转化为下列的形式

function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class Parent {
  constructor() {
    _defineProperty(this, "name", (() => {
      console.log('Parent name init');
      return 'Parent';
    })());
    _defineProperty(this, "num", -1);
    console.log('parent constructor', this.name);
    this.init();
    this.logNum = this.logNum.bind(this);
  }
  init() {
    console.log('parent init', this.name);
  }
  logNum() {}
}
class Child extends Parent {
  constructor() {
    console.log('Child constructor');
    super();
    _defineProperty(this, "name", 'Child');
    _defineProperty(this, "num", (() => {
      console.log('Child num init');
      return 99;
    })());
    console.log('super exec finish', this.num);
  }
  init() {
    console.log('Child init', this.name);
    super.init();
    this.num = 10;
  }
  logNum() {
    console.log(this.num);
  }
}
const {
  logNum
} = new Child();