前言

關于JavaScript繼承相關的定義和方法網上已經有很多解釋啦，本菜鳥就不抄抄寫寫惹人嫌了，本文主要探討三種基本的繼承方式并且給出優化方案。

正文

借助構造函數實現繼承

function Parent1() {

this.name = '喵喵喵';this.arr = [1];}Parent1.prototype.say = function () {alert('我肯定沒被繼承，所以彈不出來');};function Child1() {Parent1.call(this); // 這里是借助構造函數實現繼承的關鍵}var t1 = new Child1();

好的，我們來通過控制臺看看結果：

可以發現，Child1已經成功繼承了Parent1構造函數中個屬性，那么問題來了，Parent1原型的屬性Child1繼承了嗎？

答案是并沒有！這就是借助構造函數實現繼承的缺點，被繼承對象原型上的屬性不能被繼承。

2.借助原型鏈實現繼承

Tips:所有實例對象共享的屬性和方法都放在prototype中

function Parent2() {this.arr = [1];this.a = '1'; } Parent2.prototype.say = function () {alert('終于被繼承了'); }; function Child2() {this.type = '汪汪汪'; } Child2.prototype = new Parent2(); // 這里是借助原型鏈實現繼承的關鍵 var s1 = new Child2(); var s2 = new Child2();

我們再次打開控制臺看看：

ok！到這里，我們已經成功實現讓Parent2中的屬性以及它原型鏈上的屬性都被繼承。但是這里要注意包含引用類型屬性的原型會被所有的實例共享。啥意思呢？Child2.prototype = new Parent2(); 這行代碼把Parent2的實例賦給了Child2的原型，而Parent2中存在引用類型this.arr。

s1和s2本是Child2的兩個不同實例，但修改s2.arr同樣映射到s1.arr這個問題體現出了借助原型鏈實現繼承的缺點： Parent2中的引用屬性被Child2的實例共享了。

3.組合方式實現繼承（原型鏈 + 構造函數）

function Parent3() {this.type = '喵喵喵';this.arr = [1] } function Child3() {this.type = '汪汪汪';Parent3.call(this); // 與2的唯一區別是多了這一句 } Child3.prototype = new Parent3(); var s3 = new Child3(); var s4 = new Child3();

組合方式實現了Child3對Parent3構造函數內和原型上所有屬性和方法的繼承，并且Child3的實例對象之間也不會相互干擾。當然啦，厲害的看官已經發現了組合方式的問題：Parent3.call(this)、new Parent3();
在實現組合繼承的過程中Parent3執行了兩次，這其實是沒有必要的。

• 組合方式實現繼承-優化

function Parent4() {this.type = '喵喵喵';this.arr = [1]}Parent4.prototype.cide = [1,2,3];function Child4() {this.type = '汪汪汪';Parent4.call(this);}Child4.prototype = Parent4.prototype;// 優化重點var s5 = new Child4();var s6 = new Child4();

這種組合方式的優化方案其實可以分兩步來看：
1） Parent4.call(this) 實現對構造函數中的屬性和方法的繼承
2）Child4.prototype = Parent4.prototype; 實現對構造函數的原型的屬性和方法的繼承

觀察3中的代碼我們可以發現，通過Parent3.call(this)我們規避了Parent構造函數中引用屬性對child實例的影響，但如果Parent的原型中存在引用類型（Parent4.prototype.cide），那么在child的實例中修改該屬性，同樣會映射到其它實例。

總結

以上是生活随笔為你收集整理的浅谈JavaScript继承的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。