JAVA經典面試題(二)--如何體現JavaScript的繼承關係?
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>
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); //
foo.apply(pack); // "orange"