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

ES6 实现继承的方式

基本语法

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'] (不共享引用属性)

关键点说明

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

与 ES5 继承的对比

注意事项

1. 必须调用 super()：在子类构造函数中，必须先调用 super() 才能使用 this
2. super 的不同用法：

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

3. 可以继承内置类型：

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

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

底层实现

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

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

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