怎么理解es6的继承在前实例在后？

Question

ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。

ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。

---

上面这两句话，有没有代码讲解啊，看不太懂

Answer 1

当你用 extends 关键字拓展一个超类的时候，如果子类有构造函数，就必须先super(/*...args*/)，然后才能访问 this：

constructor(){
  super();
  // 把下面这句放到 super 前，是会报错的
  this.xxx = xxxx
}

这个 super 虽然是一个特殊的关键字，但这里其实可以把它理解为超类的构造函数，也就是说子类的构造函数自己的逻辑必须晚于超类的构造函数。

👆 “自己的”在这里的意思是有this的语句，如果是无关this的语句，是可以放在super前面的。

这大概就是所谓“继承在前，实例在后”了。

而在 ES5 中，由于你不可能修改一个不存在的实例的原型链，所以你必须先获得实例，然后通过修改它的原型链来模拟继承，这个顺序也是无法干预的。

当然我觉得你只需要记住constructor中对this的访问必在super后这个规则就行了，甚至都不用刻意去记，因为在编辑器的辅佐之下，你不太可能会违反这一规则。

Answer 2

ES5其实没有真正的继承，完全是通过代码来模拟，
但这个解释起来很绕，三言两语，说不明白，看下面代码的注释，也许不太严谨，但是你可以自己试试，也许就明白了

function person(age,name){
  this.age=age
  this.name=name
}

function student(age,name,id){
  this.id=id //可以在调用父类前赋值，证明这时子类已经实例化了。
  person.call(this,age,name)
}

const f= new person(12,'hleo')

console.log(f)
const t=new student(13,'ddd',520)
console.log(t)

class person6{
  constructor(age,name){
    this.age=age
    this.name=name
  }
}

class student6 extends person6{
  constructor(age,name,id){
    //this.id=id 这里不行，父类还没有实例化，也同是证明子类自己的this必须等父类构造函数构造，
    super(age,name)
    this.id=id
    
  }
}

const g=new person6(14,'dfsfds')
console.log(g)
const y=new student6(18,'xiao',147)
console.log(y)

Answer 3

首先，你要先看这段文字的来源，讲编程的内容，很多都是一般开发者写的，未必准确。所以也不需要追求理解。

ES5 及之前，还没有 class 关键字，也不存在官方 extends，面向对象需要基于原型链实现。这里推荐《JS 高级编程》，里面详细列举了 5 种还是 6 种继承做法。

ES6 之后，引入关键字和官方继承机制。但是，它只是语法糖，底层仍然是基于原型链的继承，只不过是确定的一种。

所以，问题中的“实例前后”，我认为是写文的人没写好。另外，无论前后，实际使用时几乎毫无区别，所以直接跳过去就行了。