【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 继承的对比

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

注意事项

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;
}// 然后实现类似的继承逻辑