這篇文章給大家分享的內容是關於對JS繼承詳細介紹（ 原型鏈，構造函數，組合，原型式，寄生式，寄生組合，Class extends），有一定的參考價值，有需要的朋友可以參考一下。
說實在話，以前我只需要知道「寄生組合繼承」是最好的，有個祖傳程式碼模版用就行。最近因為一些事情，幾個星期以來一直心心念念想整理出來。本文以《JavaScript高級程式設計》上的內容為骨架，並補充了ES6 Class的相關內容，從我認為更容易理解的角度將繼承這件事敘述出來，希望大家能有所收穫。
先來個整體印象。如圖所示，JS中繼承可以依照是否使用object函數（在下文中會提到），將繼承分成兩部分（Object.create是ES5新增的方法，用來規範這個函數）。
其中，原型鏈繼承和原型式繼承有相同的優缺點，建構函數繼承與寄生式繼承也相互對應。寄生組合繼承基於Object.create, 同時優化了組合繼承，成為了完美的繼承方式。 ES6 Class Extends的結果與寄生組合繼承基本一致，但是實作方案又略有不同。
下面馬上進入正題。
上圖上半區的原型鏈繼承，建構函式繼承，組合繼承，網路內容比較多，本文不作詳細描述，只指出重點。這裡給了我認為最容易理解的一篇《JS中的繼承（上）》。如果對上半區的內容不熟悉，可以先看這篇文章，再回來繼續閱讀；如果已經比較熟悉，這部分可以快速略過。另，上半區大量借用了yq前端的一篇繼承文章[1]。
核心：將父類別的實例當作子類別的原型
SubType.prototype = new SuperType() // 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向，否则子类实例的构造函数会指向SuperType。 SubType.prototype.constructor = SubType;
優點：父類別方法可以重複使用
缺點：
父類別的引用屬性會被所有子類別實例共用
#子類別建構實例時不能傳遞參數
核心：將父類別建構子的內容複製給了子類別的建構子。這是所有繼承中唯一一個不涉及到prototype的繼承。
SuperType.call(SubType);
優點：和原型鏈繼承完全反過來。
父類別的參考屬性不會被共用
子類別建構實例時可以傳遞參數
function SuperType() {
this.name = 'parent';
this.arr = [1, 2, 3];
}
SuperType.prototype.say = function() {
console.log('this is parent')
}
function SubType() {
SuperType.call(this) // 第二次调用SuperType
}
SubType.prototype = new SuperType() // 第一次调用SuperType
子類別建構實例時可以傳遞參數給父類別
#缺點：
呼叫了兩次父類別的建構函數，第一次為子類別的原型添加了父類別的name, arr屬性，第二次又為子類別的建構子添加了父類別的name, arr屬性，從而覆蓋了子類別原型中的同名參數。這種被覆蓋的情況造成了性能上的浪費。 2.4 原型式繼承核心：原型式繼承的object方法本質上是對參數物件的一個淺複製。優點：父類別方法可以重複使用
缺點：######父類別的參考屬性會被所有子類別實例共用########### ##子類別建置實例時不能向父類別傳遞參數#########function object(o){
function F(){}
F.prototype = o;
return new F();
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);
function createAnother(original){
var clone=object(original); //通过调用函数创建一个新对象
clone.sayHi = function(){ //以某种方式来增强这个对象
alert("hi");
};
return clone; //返回这个对象
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"function inheritPrototype(subType, superType){
var 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(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
// 核心：因为是对父类原型的复制，所以不包含父类的构造函数，也就不会调用两次父类的构造函数造成浪费
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
}class A {}
class B extends A {
constructor() {
super();
}
}class A {
}
class B {
}
Object.setPrototypeOf = function (obj, proto) {
obj.__proto__ = proto;
return obj;
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);ES6继承与ES5继承的异同：
相同点：本质上ES6继承是ES5继承的语法糖
不同点：
ES6继承中子类的构造函数的原型链指向父类的构造函数，ES5中使用的是构造函数复制，没有原型链指向。
ES6子类实例的构建，基于父类实例，ES5中不是。
ES6 Class extends是ES5继承的语法糖
JS的继承除了构造函数继承之外都基于原型链构建的
可以用寄生组合继承实现ES6 Class extends，但是还是会有细微的差别
相关推荐：
AngularJs自定义指令可以如何来设置以及自定义指令的命名规范
以上是對於JS繼承詳細介紹（ 原型鏈，構造函數，組合，原型式，寄生式，寄生組合，Class extends）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
