博主在阅读大量面经文章时发现无论是大厂面试还是小厂面试，无论是社招还是校招，只要考查JS基础，继承、原型、原型链都是绕不开的话题，所以本次希望和大家一起学习必须掌握的七种继承方式，博主将细致的分析每一种继承方式的原理、优缺点并给出在线的实现方式，这不仅仅对面试有帮助，还对我们理解JS的运行机制有帮助，让我们一起加油吧~顺便给个赞哦！
1：原型链继承
原理
原型链继承的原理是利用原型对象和实例之间的关系实现继承，
实现这种继承的关键在于让子类的原型对象指向新创建的父类实例。
实现代码
// 1：原型链继承
function Father() {
this.name = 'justin';
}
Father.prototype.getName = function () {
return this.name
}
function Child() { }
Child.prototype = new Father();
const child = new Child();
console.log(child.getName());
优缺点
- 优点：实例可以继承的属性包括：实例的构造函数的属性，父类构造函数的属性，父类原型对象上的属性。
- 缺点：一个实例修改了原型对象上的属性，另一个实例的原型属性也会被修改。新实例无法向父类构造函数传参。
下面这个例子展示了，原型链继承的缺点
在线实现
codeSandBox
2. 构造函数继承
原理
构造函数继承的核心在于：在子类构造函数中通过父类构造函数.call(this)来实现继承。
实现代码
// 2：构造函数继承
function Father() {
this.name = 'justin';
this.say = {haha: 111}
}
function Child(age) {
Father.call(this);
this.age = age;
}
const child1 = new Child(10);
const child2 = new Child(20);
child1.say.haha = 222;
console.log(child1);
console.log(child2);
优缺点
- 可以继承多个构造函数属性（通过多次call的调用）
- 解决了原型链继承中实例共享引用类型的问题
- 在子实例中可以向父实例中传参
- 只继承了父类构造函数的属性，没有继承父类原型对象上的属性。
- 无法实现父类构造函数的复用，每次都要重新调用
在线实现
codeSandBox
3. 组合继承（组合指的是组合了原型链和构造函数的继承方式）
原理
结合了原型链和构造函数的继承方式，一是通过在子类构造函数中让父类构造函数调用call修改this指向，二是让子类构造函数的原型对象指向父类构造函数的实例。
实现代码
// 3：组合继承（组合指的是组合了原型链继承和构造函数继承）
function Father(age) {
this.colors = ['red','pink'];
this.age = age;
}
Father.prototype.say = () => '你好';
function Child(name,age) {
// 构造函数的方式
Father.call(this,age);
this.name = name;
}
// 原型链
Child.prototype = new Father();
Child.prototype.constructor = Child;
const child1 = new Child('张三',20);
const child2 = new Child('李四',25);
Child.prototype
child1
child1.colors.push('black');
console.log(child1.colors);
console.log(child2.colors);
console.log(child1.say());
优缺点
- 可以继承父类构造函数上的属性和原型对象上的属性。
- 可以传参。
- 每个新实例引入的构造函数属性是私有的。
- 调用了两次父类构造函数。
- 子类实例上的属性，同时存在于原型链上和子例身上，造成原型链污染。
在线实现
codeSandBox
4: 原型式继承
原理
利用一个空函数作为中介，让这个中介的原型对象指向需要继承的父类对象，然后返回这个函数的实例，即可完成原型式继承。
实现代码
// 4：原型式继承
function createObj(o) {
function F() { };
F.prototype = o;
return new F();
}
const obj = {
name: 'justin',
friends: [1, 2, 3, 4]
}
// 方式1
const m1 = createObj(obj);
const m2 = createObj(obj);
// 方式2
const m3 = Object.create(obj);
console.log(m1.name); //justin
console.log(m2.name); //justin
m1.friends.push(666);
console.log(m1.friends); // [1,2,3,4,666]
console.log(m2.friends); // [1,2,3,4,666]
优缺点
- 类似于复制一个对象，用函数来包装。
- 无法向父类传参。
- 父类的引用类型被子类共享。
在线实现
codeSandBox在线实现
5：寄生式继承
原理
寄生式继承是在原型式继承的基础上进行了一次增强，也就是通过增加一个函数，然后添加属性实现继承。
实现代码
// 5：寄生式继承
function objCopy(o) {
function F() {};
F.prototype = o;
return new F();
}
function enhanceObj(o) {
const clone = objCopy(o);
clone.say = function() {
return 'hi';
}
return clone;
}
const obj = {
name: 'justin',
colors: [1,2,3]
}
const m1 = enhanceObj(obj);
const m2 = enhanceObj(obj);
console.log(m1.name); //justin
console.log(m1.colors); //[1,2,3]
console.log(m1.say()); //hi
m1.colors.push(777)
console.log(m2.colors); // [1,2,3,777]
优缺点
- 增强了原型式继承的能力。
- 无法向父类传参。
- 父类构造函数的引用类型对象被子类实例共享。
在线实现
codeSandBox在线实现
6：寄生组合式继承
原理
寄生组合式继承结合了构造函数继承、寄生式继承，让子类的构造函数的原型对象指向原型式继承传过来的实例，同时这个实例的构造函数也指向子类构造函数，别忘了子类构造函数中还需要父类构造函数通过call改变this指向。
实现代码
// 6：寄生组合式继承
function Father(name) {
this.name = name;
this.colors = [1,2,3];
}
Father.prototype.say = function() {
return 'hi';
}
function Child(name,age) {
Father.call(this,name);
this.age = age;
}
function createObj(o) {
function F() {}
F.prototype = o;
return new F();
}
function inheritPrototype(Child,Father) {
// 先构造一个指向父类构造函数原型对象的对象
const prototype = createObj(Father.prototype);
// 让这个对象的构造函数指向Child
prototype.constructor = Child;
Child.prototype = prototype;
}
inheritPrototype(Child,Father);
const child1 = new Child('justin',666);
const child2 = new Child('心飞扬',777);
console.log(child1.colors); //[1,2,3]
console.log(child2.colors); //[1,2,3]
child1.colors.push(666);
console.log(child1.colors); // [1,2,3,666]
console.log(child2.colors); // [1,2,3]
优缺点
- 子类构造函数可以向父类传参。
- 只调用一次父类构造函数。
- 父类的引用类型属性不会被子类共享。
在线实现
codeSandBox在线实现
参考链接
