js
里常用的如下兩種繼承方式:
原型鏈繼承(對象間的繼承)
類式繼承(構造函數間的繼承)
由於js
不像java
那樣是真正面向對象的語言,js
是基於對象的,它沒有類的概念。所以,要想實現繼承,可以用js
的原型prototype機制或者用apply
和call
方法去實現
在面向對象的語言中,我們使用類
來創建一個自定義對象。然而js
中所有事物都是對象,那么用什么辦法來創建自定義對象呢?這就需要用到js
的原型:
我們可以簡單的把prototype
看做是一個模版,新創建的自定義對象都是這個模版(prototype
)的一個拷貝 (實際上不是拷貝而是鏈接,只不過這種鏈接是不可見,新實例化的對象內部有一個看不見的__Proto__
指針,指向原型對象)。
js
可以通過構造函數和原型的方式模擬實現類的功能。 另外,js
類式繼承的實現也是依靠原型鏈來實現的。
原型式繼承與類式繼承
類式繼承
是在子類型構造函數的內部調用超類型的構造函數。
嚴格的類式繼承並不是很常見,一般都是組合着用:
1 function Super(){ 2 this.colors=["red","blue"]; 3 } 4 5 function Sub(){ 6 Super.call(this); 7 }
原型式繼承
是借助已有的對象創建新的對象,將子類的原型指向父類,就相當於加入了父類這條原型鏈
原型鏈繼承
為了讓子類繼承父類的屬性(也包括方法),首先需要定義一個構造函數。然后,將父類的新實例賦值給構造函數的原型。代碼如下:
1 <script> 2 function Parent(){ 3 this.name = 'mike'; 4 } 5 6 function Child(){ 7 this.age = 12; 8 } 9 Child.prototype = new Parent();//Child繼承Parent,通過原型,形成鏈條 10 11 var test = new Child(); 12 alert(test.age); 13 alert(test.name);//得到被繼承的屬性 14 //繼續原型鏈繼承 15 function Brother(){ //brother構造 16 this.weight = 60; 17 } 18 Brother.prototype = new Child();//繼續原型鏈繼承 19 var brother = new Brother(); 20 alert(brother.name);//繼承了Parent和Child,彈出mike 21 alert(brother.age);//彈出12 22 </script>
以上原型鏈繼承還缺少一環,那就是Object
,所有的構造函數都繼承自Object
。而繼承Object
是自動完成的,並不需要我們自己手動繼承,那么他們的從屬關系是怎樣的呢?
確定原型和實例的關系
可以通過兩種方式來確定原型和實例之間的關系。操作符instanceof
和isPrototypeof()
方法:
1 alert(brother instanceof Object)//true 2 alert(test instanceof Brother);//false,test 是brother的超類 3 alert(brother instanceof Child);//true 4 alert(brother instanceof Parent);//true
只要是原型鏈中出現過的原型,都可以說是該原型鏈派生的實例的原型,因此,isPrototypeof()
方法也會返回true
在js
中,被繼承的函數稱為超類型(父類,基類也行),繼承的函數稱為子類型(子類,派生類)。使用原型繼承主要由兩個問題:
一是字面量重寫原型會中斷關系,使用引用類型的原型,並且子類型還無法給超類型傳遞參數。
偽類解決引用共享和超類型無法傳參的問題,我們可以采用“借用構造函數”技術
借用構造函數(類式繼承)
1 <script> 2 function Parent(age){ 3 this.name = ['mike','jack','smith']; 4 this.age = age; 5 } 6 7 function Child(age){ 8 Parent.call(this,age); 9 } 10 var test = new Child(21); 11 alert(test.age);//21 12 alert(test.name);//mike,jack,smith 13 test.name.push('bill'); 14 alert(test.name);//mike,jack,smith,bill 15 </script>
借用構造函數雖然解決了剛才兩種問題,但沒有原型,則復用無從談起,所以我們需要原型鏈+借用構造函數
的模式,這種模式稱為組合繼承
組合繼承
1 <script> 2 function Parent(age){ 3 this.name = ['mike','jack','smith']; 4 this.age = age; 5 } 6 Parent.prototype.run = function () { 7 return this.name + ' are both' + this.age; 8 }; 9 function Child(age){ 10 Parent.call(this,age);//對象冒充,給超類型傳參 11 } 12 Child.prototype = new Parent();//原型鏈繼承 13 var test = new Child(21);//寫new Parent(21)也行 14 alert(test.run());//mike,jack,smith are both21 15 </script>
組合式繼承是比較常用的一種繼承方法,其背后的思路是 使用原型鏈實現對原型屬性和方法的繼承,而通過借用構造函數來實現對實例屬性的繼承。這樣,既通過在原型上定義方法實現了函數復用,又保證每個實例都有它自己的屬性。
call()
的用法:調用一個對象的一個方法,以另一個對象替換當前對象。
1 call([thisObj[,arg1[, arg2[, [,.argN]]]]])
原型式繼承
這種繼承借助原型並基於已有的對象創建新對象,同時還不用創建自定義類型的方式稱為原型式繼承
1 <script> 2 function obj(o){ 3 function F(){} 4 F.prototype = o; 5 return new F(); 6 } 7 var box = { 8 name : 'trigkit4', 9 arr : ['brother','sister','baba'] 10 }; 11 var b1 = obj(box); 12 alert(b1.name);//trigkit4 13 14 b1.name = 'mike'; 15 alert(b1.name);//mike 16 17 alert(b1.arr);//brother,sister,baba 18 b1.arr.push('parents'); 19 alert(b1.arr);//brother,sister,baba,parents 20 21 var b2 = obj(box); 22 alert(b2.name);//trigkit4 23 alert(b2.arr);//brother,sister,baba,parents 24 </script>
原型式繼承首先在obj()
函數內部創建一個臨時性的構造函數 ,然后將傳入的對象作為這個構造函數的原型,最后返回這個臨時類型的一個新實例。
寄生式繼承
這種繼承方式是把原型式+工廠模式結合起來,目的是為了封裝創建的過程。
1 <script> 2 function create(o){ 3 var f= obj(o); 4 f.run = function () { 5 return this.arr;//同樣,會共享引用 6 }; 7 return f; 8 } 9 </script>
組合式繼承的小問題
組合式繼承是js
最常用的繼承模式,但組合繼承的超類型在使用過程中會被調用兩次;一次是創建子類型的時候,另一次是在子類型構造函數的內部
1 <script> 2 function Parent(name){ 3 this.name = name; 4 this.arr = ['哥哥','妹妹','父母']; 5 } 6 7 Parent.prototype.run = function () { 8 return this.name; 9 }; 10 11 function Child(name,age){ 12 Parent.call(this,age);//第二次調用 13 this.age = age; 14 } 15 16 Child.prototype = new Parent();//第一次調用 17 </script>
以上代碼是之前的組合繼承,那么寄生組合繼承,解決了兩次調用的問題。
寄生組合式繼承
1 <script> 2 function obj(o){ 3 function F(){} 4 F.prototype = o; 5 return new F(); 6 } 7 function create(parent,test){ 8 var f = obj(parent.prototype);//創建對象 9 f.constructor = test;//增強對象 10 } 11 12 function Parent(name){ 13 this.name = name; 14 this.arr = ['brother','sister','parents']; 15 } 16 17 Parent.prototype.run = function () { 18 return this.name; 19 }; 20 21 function Child(name,age){ 22 Parent.call(this,name); 23 this.age =age; 24 } 25 26 inheritPrototype(Parent,Child);//通過這里實現繼承 27 28 var test = new Child('trigkit4',21); 29 test.arr.push('nephew'); 30 alert(test.arr);// 31 alert(test.run());//只共享了方法 32 33 var test2 = new Child('jack',22); 34 alert(test2.arr);//引用問題解決 35 </script>
call和apply
全局函數apply
和call
可以用來改變函數中this
的指向,如下: