JS 有哪些继承方式？class 继承有什么不同？

详细解析#

ES5 的几种方式#

寄生组合式继承与 class 对照#

// ES5：寄生组合式继承
function Animal(name) {
  this.name = name
}
Animal.prototype.say = function () {
  return 'I am ' + this.name
}

function Dog(name, breed) {
  Animal.call(this, name) // 继承实例属性
  this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype) // 继承原型方法
Dog.prototype.constructor = Dog // 修正 constructor

// ES6：class 继承
class Animal {
  constructor(name) {
    this.name = name
  }
  say() {
    return `I am ${this.name}`
  }
  static create(name) {
    return new this(name)
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name) // 必须先调用 super()，之后才能使用 this
    this.breed = breed
  }
}

console.log(Dog.create('旺财') instanceof Dog) // true：静态方法被继承，this 指向 Dog
console.log(Object.getPrototypeOf(Dog) === Animal) // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype) // true

class extends 建立了两条原型链：Dog.prototype 的原型指向 Animal.prototype，实例因此能调用父类的方法；Dog 本身的原型指向 Animal，所以静态方法也能继承。

class 继承的特点#

• 本质仍是原型：类就是函数（typeof Dog 是 'function'），方法定义在 prototype 上，见原型和原型链
• 私有字段子类也访问不到：#x 只能在声明它的类内部访问。子类实例上其实有这个字段（父类构造函数执行时加上的），但在子类的方法里写 this.#x 会直接报 SyntaxError，只能通过父类提供的方法间接访问
• 和构造函数相比，类必须用 new 调用，类的方法不可枚举，类内部默认是严格模式；类声明也不会像函数声明那样整体提升，在声明之前使用会因为暂时性死区抛 ReferenceError

为什么必须先调用 super()#

两种写法创建实例的顺序正好相反：

• ES5：new Dog() 先创建一个原型为 Dog.prototype 的空对象作为 this（过程见 new 操作符），再通过 Animal.call(this) 把父类的属性加上去
• ES6：子类构造函数自己不创建 this。调用 super() 时，由父类构造函数创建实例（多层继承时由最顶层的基类创建，原型仍然指向 Dog.prototype），返回给子类后，子类再在上面添加自己的属性

所以在 super() 之前 this 还不存在，访问它会抛出 ReferenceError；子类不写 constructor 时，会自动生成一个调用 super(...args) 的构造函数。也正因为实例由父类构造函数创建，class MyArray extends Array 得到的是真正的数组，Error 等内置类型也能正确继承。

面试官可能追问#

function MyArray() {
  Array.call(this) // 返回的新数组被丢弃，this 没有任何变化
}
MyArray.prototype = Object.create(Array.prototype)

const arr = new MyArray()
arr[0] = 1
console.log(arr.length, Array.isArray(arr)) // 0 false

class MyArray2 extends Array {}
const arr2 = new MyArray2()
arr2[0] = 1
console.log(arr2.length, Array.isArray(arr2)) // 1 true

易错点#

• 子类构造函数中，在 super() 之前使用 this 会抛出 ReferenceError
• 用 Object.create 替换 prototype 后要修正 constructor，而且要在替换之后再往原型上添加方法
• class 只是写法更简洁，背后仍然是原型链