寫在前面

本文講解JavaScript各種繼承方式和優缺點。

但是注意：這篇文章更像是筆記，哎，再讓我感嘆一句：《JavaScript高階程式設計》寫得真是太好了！

1、原型鏈繼承

functionParent(){
this.name='kevin';
}
Parent.prototype.getName=function(){
console.log(this.name);
}
functionChild(){
}
Child.prototype=newParent();
varchild1=newChild();
console.log(child1.getName())//kevin

問題：

1、引用型別的屬性被所有例項共享，舉個例子：

functionParent(){
this.names=['kevin','daisy'];
}
functionChild(){
}
Child.prototype=newParent();
varchild1=newChild();
child1.names.push('yayu');
console.log(child1.names);//["kevin","daisy","yayu"]
varchild2=newChild();
console.log(child2.names);//["kevin","daisy","yayu"]

2、在建立 Child 的例項時，不能向Parent傳參

2、借用建構函式(經典繼承)

functionParent(){
this.names=['kevin','daisy'];
}
functionChild(){
Parent.call(this);
}
varchild1=newChild();
child1.names.push('yayu');
console.log(child1.names);//["kevin","daisy","yayu"]
varchild2=newChild();
console.log(child2.names);//["kevin","daisy"]

優點：

1、避免了引用型別的屬性被所有例項共享

2、可以在 Child 中向 Parent 傳參

舉個例子：

functionParent(name){
this.name=name;
}
functionChild(name){
Parent.call(this,name);
}
varchild1=newChild('kevin');
console.log(child1.name);//kevin
varchild2=newChild('daisy');
console.log(child2.name);//daisy

缺點：

方法都在建構函式中定義，每次建立例項都會建立一遍方法。

3、組合繼承

原型鏈繼承和經典繼承雙劍合璧。

functionParent(name){
this.name=name;
this.colors=['red','blue','green'];
}
Parent.prototype.getName=function(){
console.log(this.name)
}
functionChild(name,age){
Parent.call(this,name);
this.age=age;
}
Child.prototype=newParent();
ChildChild.prototype.constructor=Child;
varchild1=newChild('kevin','18');
child1.colors.push('black');
console.log(child1.name);//kevin
console.log(child1.age);//18
console.log(child1.colors);//["red","blue","green","black"]
varchild2=newChild('daisy','20');
console.log(child2.name);//daisy
console.log(child2.age);//20
console.log(child2.colors);//["red","blue","green"]

優點：融合原型鏈繼承和建構函式的優點，是 JavaScript 中最常用的繼承模式。

4、原型式繼承

functioncreateObj(o){
functionF(){}
F.prototype=o;
returnnewF();
}

就是 ES5 Object.create 的模擬實現，將傳入的物件作為建立的物件的原型。

缺點：

包含引用型別的屬性值始終都會共享相應的值，這點跟原型鏈繼承一樣。

varperson={
name:'kevin',
friends:['daisy','kelly']
}
varperson1=createObj(person);
varperson2=createObj(person);
person1.name='person1';
console.log(person2.name);//kevin
person1.firends.push('taylor');
console.log(person2.friends);//["daisy","kelly","taylor"]

注意：修改person1.name的值，person2.name的值並未發生改變，並不是因為person1和person2有獨立的 name 值，而是因為person1.name = 'person1'，給person1添加了 name 值，並非修改了原型上的 name 值。

5、寄生式繼承

建立一個僅用於封裝繼承過程的函式，該函式在內部以某種形式來做增強物件，最後返回物件。

functioncreateObj(o){
varclone=Object.create(o);
clone.sayName=function(){
console.log('hi');
}
returnclone;
}

缺點：跟借用建構函式模式一樣，每次建立物件都會建立一遍方法。

品牌vi設計公司http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

6、寄生組合式繼承

為了方便大家閱讀，在這裡重複一下組合繼承的程式碼：

functionParent(name){
this.name=name;
this.colors=['red','blue','green'];
}
Parent.prototype.getName=function(){
console.log(this.name)
}
functionChild(name,age){
Parent.call(this,name);
this.age=age;
}
Child.prototype=newParent();
varchild1=newChild('kevin','18');
console.log(child1)

組合繼承最大的缺點是會呼叫兩次父建構函式。

一次是設定子型別例項的原型的時候：

Child.prototype=newParent();

一次在建立子型別例項的時候：

varchild1=newChild('kevin','18');

回想下 new 的模擬實現，其實在這句中，我們會執行：

Parent.call(this,name);

在這裡，我們又會呼叫了一次 Parent 建構函式。

所以，在這個例子中，如果我們列印 child1 物件，我們會發現 Child.prototype 和 child1 都有一個屬性為colors，屬性值為['red', 'blue', 'green']。

那麼我們該如何精益求精，避免這一次重複呼叫呢？

如果我們不使用 Child.prototype = new Parent() ，而是間接的讓 Child.prototype 訪問到 Parent.prototype 呢？

看看如何實現：

functionParent(name){
this.name=name;
this.colors=['red','blue','green'];
}
Parent.prototype.getName=function(){
console.log(this.name)
}
functionChild(name,age){
Parent.call(this,name);
this.age=age;
}
//關鍵的三步
varF=function(){};
F.prototype=Parent.prototype;
Child.prototype=newF();
varchild1=newChild('kevin','18');
console.log(child1);

最後我們封裝一下這個繼承方法：

functionobject(o){
functionF(){}
F.prototype=o;
returnnewF();
}
functionprototype(child,parent){
varprototype=object(parent.prototype);
prototype.constructor=child;
child.prototype=prototype;
}
//當我們使用的時候：
prototype(Child,Parent);

引用《JavaScript高階程式設計》中對寄生組合式繼承的誇讚就是：

這種方式的高效率體現它只調用了一次 Parent 建構函式，並且因此避免了在 Parent.prototype 上面建立不必要的、多餘的屬性。與此同時，原型鏈還能保持不變；因此，還能夠正常使用 instanceof 和 isPrototypeOf。開發人員普遍認為寄生組合式繼承是引用型別最理想的繼承正規化。