淺談JavaScript繼承

Jingbin_ 發布于2019-08-21 16:55 / 1979人閱讀

摘要：組合方式實現繼承原型鏈構造函數喵喵喵汪汪汪與的唯一區別是多了這一句組合方式實現了對構造函數內和原型上所有屬性和方法的繼承，并且的實例對象之間也不會相互干擾。

前言

關于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的實例中修改該屬性，同樣會映射到其它實例。

云服務器 GPU云服務器淺談javascript javascript繼承 javascript繼承方法 Javascript實現繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88903.html

淺談 OOP JavaScript [完結章] -- 繼承

摘要：構造函數通過原型繼承了構造函數和原型，這就形成了一個鏈條，通俗的講就是原型鏈繼承。而且方法只能冒充構造函數里面的屬性和方法而無法冒充原型對象里面的屬性和方法還有最大的問題就是重復使用。前言：寫到這里，差不多就把OOP完結了，寫了幾篇OOP的文章，但是只是略懂皮毛，可能深入的OOP還有很多，但是我感覺寫到這里也算是差不多完結了。繼承繼承是面向對象比較核心的概念，其他語言可能實現...

張利勇 2019-08-22 10:49 評論0 收藏0
淺談JavaScript中的面向對象

摘要：面向對象面向對象編程的全稱是，簡稱，面向對象編程是用抽象方式創建基于現實世界模型的一種編程模式。面向對象編程的三個主要特征是封裝繼承多態。面向對象面向對象編程的全稱是Object Oriented Programming，簡稱OOP，面向對象編程是用抽象方式創建基于現實世界模型的一種編程模式。面向對象編程可以看做是使用一系列對象相互協作的軟件設計，面向對象程序設計的目的是在編程中促...

Magicer 2019-08-26 12:10 評論0 收藏0
淺談JavaScript繼承

摘要：注意這里跟原型鏈繼承有個比較明顯的區別是并沒有使用繼承而是在子類里面執行父類的構造函數相當于把父類的代碼復制到子類里面執行一遍這樣做的另一個好處就是可以給父類傳參。 Javascript繼承學過后端語言的同學對繼承并不陌生，但是對JS繼承少許還是有些困惑，不要試圖問我是如果知道的，其實javascript繼承主要是基于原型prototype實現的。其實當你真正了解了原型鏈時候，再看...

raoyi 2019-08-22 17:24 評論0 收藏0
淺談JavaScript原型鏈

摘要：在這其中我們就逃不開要討論繼承原型對象構造函數實例了。想要獲得某一類型的構造函數可以用來獲得，也可以對該屬性進行賦值操作。三上面就提到一點是指構造函數的原型對象，它是一個對象，它是構造函數的屬性。原型鏈這一個話題，需要和很多概念一起講，才能串成一個比較系統的知識點。在這其中我們就逃不開要討論繼承、原型對象、構造函數、實例了。一、構造函數構造函數是一類特殊的函數，它的作用是用來生成...

xumenger 2019-08-23 14:31 評論0 收藏0
淺談面向對象的javascript幾個特性

摘要：中的和是一門很靈活的語言，尤其是。即然是面向對象的編程語言，那也是不可或缺的。在中，永遠指向的是他的調用者。定義是存在于實例化后對象的一個屬性，并且指向原對象的屬性。我們在擴展的時候，同時父類也會有對應的方法，這很顯然是一個很嚴重的問題。 javascript中的this和new javascript是一門很靈活的語言，尤其是function。他即可以以面向過程的方式來用，比如： f...

JayChen 2019-08-20 18:23 評論0 收藏0