JavaScript中的繼承方式詳解_javascript技巧

js繼承的概念

js裡常用的以下兩種繼承方式：

原型鏈繼承（物件間的繼承）
類別繼承（建構函式間的繼承）
由於js不像java是真正物件導向的語言，js是基於物件的，它沒有類別的概念。所以，要實作繼承，可以用js的原型prototype機製或是用apply和call方法去實作

在物件導向的語言中，我們使用類別來建立一個自訂物件。然而js中所有事物都是對象，那麼用什麼辦法來創建自訂對象呢？這就需要用到js的原型：

我們可以簡單的把prototype看做是一個模版，新創建的自定義對像都是這個模版（prototype）的一個拷貝（實際上不是拷貝而是鏈接，只不過這種鏈接是不可見，新實例化的物件內部有一個看不見的__Proto__指針，指向原型物件）。

js可以透過建構函式和原型的方式模擬實作類別的功能。 另外，js類別繼承的實作也是依靠原型鏈來實現的。

原型式繼承與類別繼承

類別式繼承是在子類型建構函式的內部呼叫超類型的建構子。
嚴格的類別繼承並不是很常見，一般都是組合著用：

複製程式碼 程式碼如下:

function Super(){
    this.colors=["red","blue"];
}

function Sub(){
    Super.call(this);
}

原型式繼承是藉助已有的對象創建新的對象，將子類的原型指向父類，就相當於加入了父類這條原型鏈

原型鏈繼承

為了讓子類別繼承父類別的屬性（也包括方法），首先需要定義一個建構子。然後，將父類別的新實例賦值給建構函式的原型。程式碼如下：

複製程式碼 程式碼如下:

<script><br />     function Parent(){<br />         this.name = 'mike';<br />     } <p>    function Child(){<br />         this.age = 12;<br />     }<br />     Child.prototype = new Parent();//Child繼承Parent，經由原型，形成鏈條 <p>    var test = new Child();<br />     alert(test.age);<br />     alert(test.name);//得到被繼承的屬性<br />     //繼續原型鏈繼承<br />     function Brother(){   //brother建構<br />         this.weight = 60;<br />     }<br />     Brother.prototype = new Child();//繼續原型鏈繼承<br />     var brother = new Brother();<br />     alert(brother.name);//繼承了Parent和Child,彈出mike<br />     alert(brother.age);//彈出12<br /> </script>

以上原型鏈繼承還缺少一環，那就是Object，所有的建構子都繼承自Object。而繼承Object是自動完成的，並不需要我們自己手動繼承，那麼他們的從屬關係是怎麼樣的呢？

決定原型與實例的關係

可以透過兩種方式來確定原型和實例之間的關係。操作符instanceof和isPrototypeof()方法：

複製程式碼 程式碼如下:

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超類別
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

只要是原型鏈中出現過的原型，都可以說是該原型鏈派生的實例的原型，因此，isPrototypeof()方法也會傳回true

在js中，被繼承的函數稱為超類型（父類，基底類別也行），繼承的函數稱為子類型（子類，衍生類別）。使用原型繼承主要由兩個問題：
一是字面量重寫原型會中斷關係，使用引用型別的原型，子型別還無法給超型別傳遞參數。

偽類解決引用共享和超類型無法傳參的問題，我們可以採用「借用建構子」技術

借用建構子（類別繼承）

複製程式碼 程式碼如下:

<script><br />     function Parent(age){<br />         this.name = ['mike','jack','smith'];<br />         this.age = age;<br />     } <p>    function Child(age){<br />         Parent.call(this,age);<br />     }<br />     var test = new Child(21);<br />     alert(test.age);//21<br />     alert(test.name);//mike,jack,smith<br />     test.name.push('bill');<br />     alert(test.name);//mike,jack,smith,bill<br /> </script>

借用建構函式雖然解決了剛才兩種問題，但沒有原型，則複用無從談起，所以我們需要原型鏈 借用建構函式的模式，這種模式稱為組合繼承

組合繼承

複製程式碼 程式碼如下:

<script><br />     function Parent(age){<br />         this.name = ['mike','jack','smith'];<br />         this.age = age;<br />     }<br />     Parent.prototype.run = function () {<br />         return this.name  ' are both' this.age;<br />     };<br />     function Child(age){<br />         Parent.call(this,age);//物件冒充，給予超類型傳參<br />     }<br />     Child.prototype = new Parent();//原型鏈繼承<br />     var test = new Child(21);//寫new Parent(21)也行<br />     alert(test.run());//mike,jack,smith are both21<br /> </script>

組合式繼承是比較常用的一種繼承方法，其背後的思路是 使用原型鏈實現對原型屬性和方法的繼承，而透過借用建構函式來實現對實例屬性的繼承。這樣，既透過在原型上定義方法實現了函數復用，又保證每個實例都有它自己的屬性。

call()的用法：呼叫一個物件的一個方法，以另一個物件取代目前物件。

複製程式碼 程式碼如下:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

原型式繼承

這種繼承借助原型並基於現有的對象創建新對象，同時還不用創建自定義類型的方式稱為原型式繼承

複製程式碼 程式碼如下:

<script><br />      function obj(o){<br />          function F(){}<br />          F.prototype = o;<br />          return new F();<br />      }<br />     var box = {<br />         name : 'trigkit4',<br />         arr : ['brother','sister','baba']<br />     };<br />     var b1 = obj(box);<br />     alert(b1.name);//trigkit4 <p>    b1.name = 'mike';<br />     alert(b1.name);//mike <p>    alert(b1.arr);//brother,sister,baba<br />     b1.arr.push('parents');<br />     alert(b1.arr);//brother,sister,baba,parents <p>    var b2 = obj(box);<br />     alert(b2.name);//trigkit4<br />     alert(b2.arr);//brother,sister,baba,parents<br /> </script>

原型式繼承首先在obj()函數內部建立一個臨時性的建構子 ，然後將傳入的物件作為這個建構函式的原型，最後傳回這個臨時型別的一個新實例。

寄生式繼承

這種繼承方式是把原型式 工廠模式結合起來，目的是為了封裝創建的過程。

複製程式碼 程式碼如下:

<script><br />     function create(o){<br />         var f= obj(o);<br />         f.run = function () {<br />             return this.arr;//相同，會分享引用<br />         };<br />         return f;<br />     }<br /> </script>

組合式繼承的小問題

組合式繼承是js最常用的繼承模式，但組合繼承的超類型在使用過程中會被呼叫兩次；一次是創建子類型的時候，另一次是在子類型構造函數的內部

複製程式碼 程式碼如下:

<script><br />     function Parent(name){<br />         this.name = name;<br />         this.arr = ['哥哥','妹妹','父母'];<br />     } <p>    Parent.prototype.run = function () {<br />         return this.name;<br />     }; <p>    function Child(name,age){<br />         Parent.call(this,age);//第二次呼叫<br />         this.age = age;<br />     } <p>    Child.prototype = new Parent();//第一次呼叫<br /> </script>

以上程式碼是之前的組合繼承，那麼寄生組合繼承，解決了兩次呼叫的問題。

寄生組合式繼承

複製程式碼 程式碼如下:

<script><br />     function obj(o){<br />         function F(){}<br />         F.prototype = o;<br />         return new F();<br />     }<br />     function create(parent,test){<br />         var f = obj(parent.prototype);//建立物件<br />         f.constructor = test;//增強物<br />     } <p>    function Parent(name){<br />         this.name = name;<br />         this.arr = ['brother','sister','parents'];<br />     } <p>    Parent.prototype.run = function () {<br />         return this.name;<br />     }; <p>    function Child(name,age){<br />         Parent.call(this,name);<br />         this.age =age;<br />     } <p>    inheritPrototype(Parent,Child);//透過這裡實現繼承 <p>    var test = new Child('trigkit4',21);<br />     test.arr.push('nephew');<br />     alert(test.arr);//<br />     alert(test.run());//隻共享了方法 <p>    var test2 = new Child('jack',22);<br />     alert(test2.arr);//引用問題解決<br /> </script>

call和apply

全域函數apply和call可以用來改變函數中this的指向，如下：

複製程式碼 程式碼如下:

// 定義一個全域函數
    function foo() {
        console.log(this.fruit);
    }

    // 定義一個全域變數
    var fruit = "apple";
    // 自訂一個物件
    var pack = {
        fruit: "orange"
    };

    // 等價於window.foo();
    foo.apply(window);  // "apple",此時this等於window
    // 此時foo中的this === pack
    foo.apply(pack);    // "orange"