【JS进阶】ES6 实现继承的方式

ES6 实现继承的方式

基本语法

javascript 复制代码

class Parent {
  constructor(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
  }
  
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 必须调用super()，且在使用this之前
    this.age = age;
  }
  
  sayAge() {
    console.log(this.age);
  }
}

const child1 = new Child('Tom', 10);
child1.sayName(); // "Tom"
child1.sayAge(); // 10
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']

const child2 = new Child('Jerry', 8);
console.log(child2.colors); // ['red', 'blue'] (不共享引用属性)

关键点说明

extends 关键字：用于声明类继承关系
super 关键字 ：
- 在构造函数中：super() 调用父类构造函数，必须在访问 this 之前调用
- 在方法中：super.method() 可以调用父类方法
静态方法继承：子类会继承父类的静态方法
原型方法继承：子类实例可以调用父类原型方法

与 ES5 继承的对比

特性	ES5 继承	ES6 `class` 继承
语法	复杂，需要手动处理原型链	简洁，使用 `class` 和 `extends`
构造函数调用	需要手动调用父类构造函数	通过 `super()` 自动处理
静态方法继承	需要额外处理	自动继承
原型方法	需要手动设置原型链	自动继承
内置类继承	难以实现	可以继承内置类如 Array, Error 等

注意事项

必须调用 super() ：在子类构造函数中，必须先调用 super() 才能使用 this

super 的不同用法 ：

javascript 复制代码

class Child extends Parent {
  constructor() {
    super(); // 调用父类构造函数
  }
  
  method() {
    super.parentMethod(); // 调用父类方法
  }
}

可以继承内置类型 ：

javascript 复制代码

class MyArray extends Array {
  // 可以扩展内置Array的功能
}

new.target：可以检测是通过哪个类被实例化的

底层实现

ES6 的 class 继承本质上是 ES5 寄生组合式继承的语法糖，Babel 转译后的代码类似于：

javascript 复制代码

function _inherits(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

// 然后实现类似的继承逻辑