淺談JavaScript繼承

raoyi 發布于2019-08-22 17:24 / 2454人閱讀

摘要：注意這里跟原型鏈繼承有個比較明顯的區別是并沒有使用繼承而是在子類里面執行父類的構造函數相當于把父類的代碼復制到子類里面執行一遍這樣做的另一個好處就是可以給父類傳參。

Javascript繼承

學過后端語言的同學對繼承并不陌生，但是對JS繼承少許還是有些困惑，不要試圖問我是如果知道的，其實javascript繼承主要是基于原型prototype實現的。

其實當你真正了解了原型鏈時候，再看js繼承，其實比OOP語言更靈活、更簡單一些。接下來我們來看看原型鏈繼承吧：

    //父類
    function Animal(){}
    //子類
    function Dog(){}
    //繼承
    Dog.prototype = new Animal();

其實，就是把子類的prototype指向父類的實例，繼承就完成了，很簡單吧。這就是原型鏈繼承
上面只是一個簡單的繼承結果，并無實際意義，繼承的目的就是要共享父類的屬性和方法，接下來我們一步一步來揭開這神秘的面紗

    /**
     *
     * 父類，帶屬性
     * @constructor
     * @param name 名字
     * @param type  動物分類
     * @constructor
     */
    function Animal(name,type) {
      this.name = name || "your name";
      this.type= type || 0;
      this.coatColor= ["white","block","yellow","brown"]; //引用類型
      //函數也是引用類型
      this.speak = function () {
          console.log(this.name+" speaking .");
      }
}
    }
    
    /**
     * 為父類新增一個方法
     * @returns {boolean}
     */
    Animal.prototype.say= function () {
         console.log("my name  is "+this.name);
    };
    
    /**
     * 子類
     * @constructor
     */
    function Dog(name) {
         this.name = name;
         this.foot= 4;
    }
    
    //實現繼承-原型鏈繼承 => (子類 -> 子類原型->父類) ;繼承 注意,繼承必須要寫在子類方法定義的前面
    Dog.prototype = new Animal();
    
    /**
     * 子類方法
     *  為子類新增一個方法(在繼承之后,否則會被覆蓋/異常)  dog.run is not a function
     */
    Dog.prototype.run = function () {
        console.log("The "+ this.name +" was runing.");
    };
    var dog = new Dog("taiSen");
    console.log(dog.name); //dog    --子類覆蓋父類的屬性
    console.log(dog.type); // 0     --父類的屬性
    console.log(dog.foot); //4      --子類自己的屬性
    dog.say(); //my name  is taiSen    --繼承自父類的方法
    dog.run(); //The taiSen was runing. --子類自己的方法

以上,看起來我們好像已經完成了一個完整的繼承了。但是，原型鏈繼承有一個缺點，就是屬性如果是引用類型的話，會共享引用類型，接下來我個Animal增加引用類型屬性this.coatColor,測試下

    //測試下
    var dog1= new Dog();
    var dog2 = new Dog();
    dog1.coatColor.push("blue");
    console.log(dog1.coatColor); // [ "white", "block", "yellow", "brown", "blue" ]
    console.log(dog2.coatColor); // [ "white", "block", "yellow", "brown", "blue" ]

dog1,dog2 輸出的coatColor一樣，說明引用類型屬性會被所有實例共享--- 這就是原型鏈繼承的缺點,那么我們如果解決這個問題呢？ 接下來我們就要借用————構造函數繼承

    //子類
    function Cat() {
        Animal.call(this)  // 構造函數繼承(繼承屬性)
    }
    
    //測試下
    var cat1= new Cat();
    var cat2 = new Cat();
    cat1.coatColor.push("red");
    console.log(cat1.coatColor); // [ "white", "block", "yellow", "brown", "red" ]
    console.log(cat2.coatColor); // [ "white", "block", "yellow", "brown"]

從結果看，我們就解決了引用類型被所有實例共享的問題了。

注意：這里跟原型鏈繼承有個比較明顯的區別是并沒有使用prototype繼承,而是在子類里面執行父類的構造函數, 相當于把父類的代碼復制到子類里面執行一遍,這樣做的另一個好處就是可以給父類傳參。

測試代碼：

    /比如:
    function Pig(name) {
        Animal.call(this,name);
    }
    var pig1= new Animal("big Pig");
    var pig2 = new Animal("small Pig");
    console.log(pig1.name); // big Pig
    console.log(pig2.name); //small Pig

看起來是不是很像java,C#語言啊,以上構造函數解決了引用類型被所有實例共享的問題。

注意： 正因為構造函數解決了解決了引用類型被所有實例共享的問題,導致了一個相對很矛盾的問題出現了,——————函數也是引用類型,函數也沒辦法共享了.也就是說,每個實例里面的函數,雖然功能一樣,但是卻不是同一個函數,就相當于我們每實例化一個子類,就復制了一遍的函數代碼。

//父類新增this.speak函數
function Animal(name,type) {
  this.name = name || "your name";
  this.type= type || 0;
  this.coatColor= ["white","block","yellow","brown"]; //引用類型
    //函數也是引用類型
  this.speak = function () {
      console.log(this.name+" speaking .");
  }
}

//測試
console.log(pig1.speak===pig2.speak); // false

以上證明,父類的函數,在子類的實例下是不共享的。

怎么辦呢？，以上可以看出原型鏈繼承 和 構造函數繼承 這兩種繼承方式的優缺點剛好是互相矛盾的,那么我們有沒有辦法魚和熊掌兼得呢? 答案是肯定的————組合繼承

    // 父類
    function Animal() {
        this.name = name || "your name";
        this.type= type || 0;
        this.coatColor= ["white","block","yellow","brown"]; //引用類型
    }
    
    // 父類函數
    Animal.prototype.speak =function () {
          console.log(this.name+" speaking .");
      }
    
    // 子類
    function Chicken(){
        Animal.call(this)             // 構造函數繼承(繼承屬性)
    }
    // 繼承
    Chicken.prototype = new Animal()  // 原型鏈繼承(繼承方法)

總結

繼承方式	核心代碼	優缺點	用法
原型鏈繼承	Dog.prototype = new Animal()	實例的引用類型共享	繼承屬性
構造函數繼承	在子類Cat)里執行 Animal.call(this)	會獨享所有屬性,包括引用屬性(重點是函數)	繼承方法
組合繼承	利用原型鏈繼承要共享的屬性,利用構造函數繼承要獨享的屬性	實現相對完美的繼承	結合上兩位

本文中的代碼見demo coding ，如果覺得對您有用，幫加個star,萬分感謝！

今天就寫到這，講述了3種繼承方式，其實J繼承還有很多繼承方式。其他留在下期再見咯。
感覺各位的收看，歡迎提問。

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

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

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

淺談JavaScript繼承

摘要：組合方式實現繼承原型鏈構造函數喵喵喵汪汪汪與的唯一區別是多了這一句組合方式實現了對構造函數內和原型上所有屬性和方法的繼承，并且的實例對象之間也不會相互干擾。前言關于JavaScript繼承相關的定義和方法網上已經有很多解釋啦，本菜鳥就不抄抄寫寫惹人嫌了，本文主要探討三種基本的繼承方式并且給出優化方案。正文借助構造函數實現繼承 function Parent1() { ...

Jingbin_ 2019-08-21 16:55 評論0 收藏0
淺談 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原型鏈

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

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

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

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