【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'] (不共享引用属性)
关键点说明
extends关键字：用于声明类继承关系super关键字：- 在构造函数中：
super()调用父类构造函数，必须在访问this之前调用 - 在方法中：
super.method()可以调用父类方法
- 在构造函数中：
- 静态方法继承：子类会继承父类的静态方法
- 原型方法继承：子类实例可以调用父类原型方法
与 ES5 继承的对比
| 特性 | ES5 继承 | ES6 class 继承 |
|---|---|---|
| 语法 | 复杂，需要手动处理原型链 | 简洁，使用 class 和 extends |
| 构造函数调用 | 需要手动调用父类构造函数 | 通过 super() 自动处理 |
| 静态方法继承 | 需要额外处理 | 自动继承 |
| 原型方法 | 需要手动设置原型链 | 自动继承 |
| 内置类继承 | 难以实现 | 可以继承内置类如 Array, Error 等 |
注意事项
- 必须调用
super()：在子类构造函数中，必须先调用super()才能使用this super的不同用法：class Child extends Parent {constructor() {super(); // 调用父类构造函数}method() {super.parentMethod(); // 调用父类方法} }- 可以继承内置类型：
class MyArray extends Array {// 可以扩展内置Array的功能 } new.target：可以检测是通过哪个类被实例化的
底层实现
ES6 的 class 继承本质上是 ES5 寄生组合式继承的语法糖，Babel 转译后的代码类似于：
function _inherits(subClass, superClass) {subClass.prototype = Object.create(superClass.prototype);subClass.prototype.constructor = subClass;subClass.__proto__ = superClass;
}// 然后实现类似的继承逻辑