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,弹出mike alert(brother.age);//弹出12 </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> 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);//21 alert(test.name);//mike,jack,smith test.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 Child(21);//写new Parent(21)也行 alert(test.run());//mike,jack,smith are both21 </script>
組合式繼承是比較常用的一種繼承方法,其背後的想法是使用原型鏈實現對原型屬性和方法的繼承,而透過借用建構函式來實現對實例屬性的繼承。這樣,既透過在原型上定義方法實現了函數復用,又保證每個實例都有它自己的屬性。
call()
的用法:呼叫一個物件的一個方法,以另一個物件取代目前物件。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
這種繼承借助原型並基於已有的對象創建新對象,同時還不用創建自定義類型的方式稱為原型式繼承
<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);//mike alert(b1.arr);//brother,sister,baba b1.arr.push('parents'); alert(b1.arr);//brother,sister,baba,parents var b2 = obj(box); alert(b2.name);//trigkit4 alert(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>
全域函數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"
以上就是JavaScript 中繼承方式詳解的內容,更多相關內容請關注PHP中文網(www.php.cn)!
#