JavaScript繼承方式詳解

標籤：拷貝   orange   類型   this   常見   box   等價   小問題   name   

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>function Parent(){　　this.name = ‘mike‘;} function Child(){　　this.age = 12;}Child.prototype = new Parent();//Child繼承Parent，通過原型，形成鏈條 var test = new Child();alert(test.age);alert(test.name);//得到被繼承的屬性//繼續原型鏈繼承function Brother(){ //brother構造　　this.weight = 60;}Brother.prototype = new Child();//繼續原型鏈繼承var brother = new Brother();alert(brother.name);//繼承了Parent和Child,彈出mikealert(brother.age);//彈出12</script>

 

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

 

確定原型和執行個體的關係

 

可以通過兩種方式來確定原型和執行個體之間的關係。操作符instanceof和isPrototypeof()方法：

 

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

 

只要是原型鏈中出現過的原型，都可以說是該原型鏈派生的執行個體的原型，因此，isPrototypeof()方法也會返回true

 

在js中，被繼承的函數稱為超類型（父類，基類也行），繼承的函數稱為子類型（子類，衍生類別）。使用原型繼承主要由兩個問題：

 

一是字面量重寫原型會中斷關係，使用參考型別的原型，並且子類型還無法給超類型傳遞參數。

 

偽類解決引用共用和超類型無法傳參的問題，我們可以採用“借用建構函式”技術

 

借用建構函式（類式繼承）

 

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

 

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

 

組合繼承

 

<script>function Parent(age){　　this.name = [‘mike‘,‘jack‘,‘smith‘];　　this.age = age;}Parent.prototype.run = function () {　　return this.name + ‘ are both‘ + this.age;};function Child(age){　　Parent.call(this,age);}Child.prototype = new Parent();var test = new Parent(21);//寫new Child(21)也行alert(test.run());//mike,jack,smith are both21</script>

 

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

 

原型式繼承

 

這種繼承藉助原型並基於已有的對象建立新對象，同時還不用建立自訂類型的方式稱為原型式繼承

 

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

 

原型式繼承首先在obj()函數內部建立一個臨時性的建構函式 ，然後將傳入的對象作為這個建構函式的原型，最後返回這個臨時類型的一個新執行個體。

 

寄生式繼承

 

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

 

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

 

組合式繼承的小問題

 

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

 

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

 

以上代碼是之前的組合繼承，那麼寄生組合繼承，解決了兩次調用的問題。

 

寄生組合式繼承

 

<script>function obj(o){　　function F(){}　　F.prototype = o;　　return new F();}function create(parent,test){　　var f = obj(parent.prototype);//建立對象　　f.constructor = test;//增強對象}function Parent(name){　　this.name = name;　　this.arr = [‘brother‘,‘sister‘,‘parents‘];}Parent.prototype.run = function () {　　return this.name;};function Child(name,age){　　Parent.call(this,name);　　this.age =age;}inheritPrototype(Parent,Child);//通過這裡實現繼承var test = new Child(‘trigkit4‘,21);test.arr.push(‘nephew‘);alert(test.arr);//alert(test.run());//只共用了方法var test2 = new Child(‘jack‘,22);alert(test2.arr);//引用問題解決</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 === packfoo.apply(pack); // "orange"

 

JavaScript繼承方式詳解