【JS进阶】ES5 实现继承的几种方式

2025/6/6 11:17:28 来源：https://blog.csdn.net/Bl_a_ck/article/details/148461062 浏览: 次关键词：【JS进阶】ES5 实现继承的几种方式

ES5 实现继承的几种方式

1. 原型链继承（Prototype Chaining）

function Parent(name) {this.name = name || 'Parent';this.colors = ['red', 'blue'];
}Parent.prototype.sayName = function() {console.log(this.name);
};function Child() {}// 关键：将子类的原型指向父类的实例
Child.prototype = new Parent();const child1 = new Child();
child1.sayName(); // "Parent"

问题：

父类实例属性成为子类原型属性，会被所有子类实例共享
无法向父类构造函数传参

2. 构造函数继承（借用构造函数）

function Parent(name) {this.name = name || 'Parent';this.colors = ['red', 'blue'];
}function Child(name) {// 关键：在子类构造函数中调用父类构造函数Parent.call(this, name);
}const child1 = new Child('Child1');
console.log(child1.name); // "Child1"

优点：

可以向父类传参
避免了引用属性共享问题

缺点：

无法继承父类原型上的方法
方法都在构造函数中定义，无法复用

3. 组合继承（最常用方式）

结合原型链继承和构造函数继承：

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); // 第二次调用Parentthis.age = age;
}// 继承原型方法
Child.prototype = new Parent(); // 第一次调用Parent
Child.prototype.constructor = Child; // 修正constructor
Child.prototype.sayAge = function() {console.log(this.age);
};const child1 = new Child('Tom', 10);
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']
child1.sayName(); // "Tom"
child1.sayAge(); // 10const child2 = new Child('Jerry', 8);
console.log(child2.colors); // ['red', 'blue'] (不共享)

优点：

实例属性独立
可以继承原型方法
可以向父类传参

缺点：

调用了两次父类构造函数

4. 原型式继承

function object(o) {function F() {}F.prototype = o;return new F();
}const parent = {name: 'Parent',colors: ['red', 'blue']
};const child1 = object(parent);
child1.name = 'Child1';
child1.colors.push('green');const child2 = object(parent);
console.log(child2.colors); // ['red', 'blue', 'green'] (共享引用属性)

类似于 Object.create()，ES5 中新增了 Object.create() 方法实现相同功能。

5. 寄生式继承

function createAnother(original) {const clone = Object.create(original); // 创建新对象clone.sayHi = function() { // 增强对象console.log('Hi');};return clone;
}const parent = {name: 'Parent'
};const child = createAnother(parent);
child.sayHi(); // "Hi"

6. 寄生组合式继承（最佳方式）

解决组合继承调用两次父类构造函数的问题：

function inheritPrototype(child, parent) {const prototype = Object.create(parent.prototype); // 创建父类原型的副本prototype.constructor = child; // 修正constructorchild.prototype = prototype; // 赋值给子类原型
}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); // 只调用一次Parent构造函数this.age = age;
}inheritPrototype(Child, Parent); // 实现原型继承Child.prototype.sayAge = function() {console.log(this.age);
};const child1 = new Child('Tom', 10);
child1.sayName(); // "Tom"
child1.sayAge(); // 10