JavaScript 继承方案实现与原型链解析
一、基础继承实现方案
1. 组合继承(最常用)
function Parent(name) {
this.name = name;
this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
console.log(this.name);
};
function Child(name, age) {
Parent.call(this, name); // 1. 调用父类构造函数继承实例属性
this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 2. 继承父类原型方法
Child.prototype.constructor = Child; // 3. 修复构造函数指向
// 测试
const child1 = new Child('小明', 10);
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']
child1.sayName(); // "小明"
const child2 = new Child('小红', 8);
console.log(child2.colors); // ['red', 'blue'] (互不影响)
优点:
- 实例属性独立,引用类型不会共享
- 方法定义在原型上,可复用
- 能正常使用
instanceof
和isPrototypeOf
2. ES6 Class 继承(语法糖)
class Parent {
constructor(name) {
this.name = name;
}
sayName() {
console.log