做网站联系客服按钮代码百度贴吧入口
JavaScript 实现继承及 Class 本质详解
一、实现继承的 6 种方式
JavaScript 的继承基于原型链，以下是常见的继承实现方法及其优缺点：
1. 原型链继承
核心：子类的原型指向父类的实例。
示例：
function Parent() {this.name = 'Parent';
}
Parent.prototype.say = function() {console.log(this.name);
};function Child() {}
Child.prototype = new Parent(); // 原型链继承const child = new Child();
child.say(); // 输出: "Parent"
缺点：
- 所有子类实例共享父类引用类型属性（如数组、对象）。
- 无法向父类构造函数传参。
2. 构造函数继承
核心：在子类构造函数中调用父类构造函数。
示例：
function Parent(name) {this.name = name;this.colors = ['red', 'blue'];
}function Child(name) {Parent.call(this, name); // 构造函数继承
}const child1 = new Child('Child1');
child1.colors.push('green');
console.log(child1.colors); // ["red", "blue", "green"]const child2 = new Child('Child2');
console.log(child2.colors); // ["red", "blue"]
优点：
- 解决引用类型共享问题。
- 支持向父类传参。
缺点： - 无法继承父类原型上的方法（如
Parent.prototype.say）。
3. 组合继承（原型链 + 构造函数）
核心：结合原型链继承和构造函数继承。
示例：
function Parent(name) {this.name = name;this.colors = ['red'];
}
Parent.prototype.say = function() {console.log(this.name);
};function Child(name) {Parent.call(this, name); // 构造函数继承（第二次调用 Parent）
}
Child.prototype = new Parent(); // 原型链继承（第一次调用 Parent）
Child.prototype.constructor = Child;const child = new Child('Child');
child.say(); // 输出: "Child"
缺点：
- 父类构造函数被调用两次（性能问题）。
4. 原型式继承
核心：基于现有对象创建新对象（类似 Object.create）。
示例：
function createObject(obj) {function F() {}F.prototype = obj;return new F();
}const parent = { name: 'Parent' };
const child = createObject(parent);
console.log(child.name); // 输出: "Parent"
应用场景：
- 适合不需要构造函数的简单对象继承。
5. 寄生式继承
核心：在原型式继承基础上增强对象。
示例：
function createEnhancedObject(obj) {const clone = Object.create(obj);clone.say = function() {console.log(this.name);};return clone;
}const parent = { name: 'Parent' };
const child = createEnhancedObject(parent);
child.say(); // 输出: "Parent"
缺点：
- 方法无法复用（每个实例都创建新方法）。
6. 寄生组合继承（最优方案）
核心：避免组合继承中重复调用父类构造函数。
示例：
function inheritPrototype(Child, Parent) {const prototype = Object.create(Parent.prototype); // 创建父类原型的副本prototype.constructor = Child; // 修复 constructorChild.prototype = prototype; // 赋值给子类原型
}function Parent(name) {this.name = name;
}
Parent.prototype.say = function() {console.log(this.name);
};function Child(name) {Parent.call(this, name); // 构造函数继承
}inheritPrototype(Child, Parent); // 寄生组合继承const child = new Child('Child');
child.say(); // 输出: "Child"
优点：
- 只调用一次父类构造函数。
- 原型链保持干净，无多余属性。
二、ES6 Class 的本质
ES6 的 class 是语法糖，底层仍基于原型链和构造函数。
1. Class 转换为 ES5 代码
示例：
// ES6 Class
class Parent {constructor(name) {this.name = name;}say() {console.log(this.name);}static staticMethod() {console.log('Static');}
}// 转换为 ES5
function Parent(name) {this.name = name;
}
Parent.prototype.say = function() {console.log(this.name);
};
Parent.staticMethod = function() {console.log('Static');
};
核心规则：
constructor对应构造函数。- 类方法绑定到原型（
Parent.prototype）。 - 静态方法绑定到构造函数本身（
Parent.staticMethod）。
2. 继承的实现
示例：
class Child extends Parent {constructor(name, age) {super(name); // 调用父类构造函数this.age = age;}run() {console.log(`${this.name} is running`);}
}// 转换为 ES5
function Child(name, age) {Parent.call(this, name); // 构造函数继承this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 原型链继承
Child.prototype.constructor = Child;
Child.prototype.run = function() {console.log(this.name + ' is running');
};
关键点：
super在构造函数中调用父类构造函数（等价于Parent.call(this)）。extends自动设置原型链（Child.prototype.__proto__ = Parent.prototype）。
3. 静态方法与继承
示例：
class Parent {static staticMethod() {console.log('Parent static');}
}class Child extends Parent {static childStaticMethod() {super.staticMethod(); // 调用父类静态方法console.log('Child static');}
}Child.childStaticMethod(); // 输出: "Parent static" → "Child static"
底层原理：
- 静态方法继承通过
Child.__proto__ = Parent实现。
三、核心知识点总结
| 特性 | 说明 |
|---|---|
| 原型链 | 对象通过 __proto__ 向上查找属性和方法，形成链式结构。 |
| 构造函数 | 用于初始化实例属性，通过 new 调用。 |
| Class 本质 | 语法糖，基于原型链和构造函数，提供更清晰的面向对象语法。 |
| super | 在子类构造函数中调用父类构造函数，或在方法中调用父类方法。 |
| 静态方法 | 通过 static 定义，绑定到类本身而非实例。 |
| 最优继承方案 | 寄生组合继承（ES5）或直接使用 class + extends（ES6）。 |
四、总结
- ES5 继承：需手动处理原型链（如寄生组合继承）。
- ES6 Class：简化继承语法，但需理解其背后的原型机制。
- 最佳实践：现代项目优先使用
class和extends，必要时结合原型操作优化。