js实现继承的方式

前言

最近在学习原型的相关内容时回顾到实现继承的方式，再次回温依旧很是陌生，在此记录以便深刻理解，以方便日后巩固。

继承的概念

原型链继承

function SuperType() { 
 this.property = true; 
} 
SuperType.prototype.getSuperValue = function() { 
 return this.property; 
}; 
function SubType() { 
 this.subproperty = false; 
} 
// 继承 SuperType 
SubType.prototype = new SuperType(); 
SubType.prototype.getSubValue = function () { 
 return this.subproperty; 
}; 
let instance = new SubType(); 
console.log(instance.getSuperValue()); // true

首先是原型链继承，上方是一个简单的原型链继承的案例，

1. 首先定义了SuperType构造函数（构造函数首字母大写）
2. 然后在他的原型上添加了getSuperValue方法
3. 之后定义了SubType构造函数，然后将SubType的原型重写为 SuperType的实例，以此来继承SuperType，这里通过对象字面量的形式重写SubType的原型，会导致构造函数变为SuperType,即 instance.constructor 为 SuberType
4. 之后为SubType的原型上添加了一个getSubValue的方法
5. 然后生成一个SubType的实例，这时打印instance的getSuperValue的方法，在SubType的原型上没有找到，继续向上查找，找到SuperType的原型上，找到之后方法内部返回了this.property，先在instance上查找，没有找到，向上从SubType的原型上查找，没有找到，继续向上从SuperType的实例上查找(SubType的原型，因为有重写SubType的原型，所以将后续重新和第一次通过new SuperType重写分开)，之后从SuperType的原型上找到了（若找不到还会从Object的原型上查找，所有原型都继承自Object的原型，都以它为原型链的尽头）。

这张图描述了案例的原型链

问题：引用类型的值会在实例间共享

盗用构造函数

为了解决原型链继承引用类型实例间共享的问题，出现了盗用构造函数。

基本思路

示例

function SuperType() { 
 this.colors = ["red", "blue", "green"]; 
} 
function SubType() { 
 // 继承 SuperType 
 SuperType.call(this); 
} 
let instance1 = new SubType(); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
let instance2 = new SubType(); 
console.log(instance2.colors); // "red,blue,green"

function SuperType(name){ 
 this.name = name; 
} 
function SubType() { 
 // 继承 SuperType 并传参
 SuperType.call(this, "Nicholas"); 
 // 实例属性
 this.age = 29; 
} 
let instance = new SubType(); 
console.log(instance.name); // "Nicholas"; 
console.log(instance.age); // 29 
在这个例子中，SuperType 构造函数接收

function SuperType(name){ 
 this.name = name; 
 this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function() { 
 console.log(this.name); 
}; 
function SubType(name, age){ 
 // 继承属性
 SuperType.call(this, name); 
 this.age = age; 
} 
// 继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.sayAge = function() { 
 console.log(this.age); 
}; 
let instance1 = new SubType("Nicholas", 29); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
instance1.sayName(); // "Nicholas"; 
instance1.sayAge(); // 29 
let instance2 = new SubType("Greg", 27); 
console.log(instance2.colors); // "red,blue,green" 
instance2.sayName(); // "Greg"; 
instance2.sayAge(); // 27 

 简单总结就是先盗用构造函数获得构造函数的内部属性，以此解决引用类型共享的问题，然后重写原型，继承父类原型上的发放，实现方法的共用。

原型式继承

function object(o) { 
 function F() {} 
 F.prototype = o; 
 return new F(); 
}

let person = { 
 name: "Nicholas", 
 friends: ["Shelby", "Court", "Van"] 
}; 
let anotherPerson = object(person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push("Rob"); 
let yetAnotherPerson = object(person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie"); 
console.log(person.friends); // "Shelby,Court,Van,Rob,Barbie"

寄生式继承

function createAnother(original){ 
 let clone = object(original); // 通过调用函数创建一个新对象
 clone.sayHi = function() { // 以某种方式增强这个对象
 console.log("hi"); 
 }; 
 return clone; // 返回这个对象
}
let person = { 
 name: "Nicholas", 
 friends: ["Shelby", "Court", "Van"] 
}; 
let anotherPerson = createAnother(person); 
anotherPerson.sayHi(); // "hi"

寄生式组合继承

function inheritPrototype(subType, superType) { 
 let prototype = object(superType.prototype); // 创建对象
 prototype.constructor = subType; // 增强对象 
 subType.prototype = prototype; // 赋值对象
}
function SuperType(name) { 
 this.name = name; 
 this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function() { 
 console.log(this.name); 
}; 
function SubType(name, age) { 
 SuperType.call(this, name); 
 this.age = age; 
} 
inheritPrototype(SubType, SuperType); 
SubType.prototype.sayAge = function() { 
 console.log(this.age);