JavaScript 10

js繼承的概念

1.通過原型鏈方式實現繼承(對象間的繼承)

2.類式繼承(構造函數間的繼承)

由於js不像Java那樣是真正面向對象的語言,js是基於對象的,它沒有類的概念。所以,要想實現繼承,可以用js的原型prototype機制或者用apply和call方法去實現。

原型鏈

構造函數、原型、實例的關係:

每個構造函數都有一個原型對象(prototype),原型對象都包含一個指向構造函數的指針(constructor),而實例都包含一個指向原型對象的內部指針(__proto__)。

假如我們讓原型對象等於另一個類型的實例,結果會怎麼樣呢?顯然,此時的原型對象將包含一個指向另一個原型的指針,相應地,另一個原型中也包含一個指向一個構造函數的指針。假如另一個原型又是另一個類型的實例,那麼上述關係依然成立,如此層層遞進,就構成了實例與原型的鏈條。這就是所謂原型鏈的基本概念。

(每個對象都有一個內部屬性__proto__屬性,屬性的值可以是一個對象,也可以是null.如果它的值是一個對象,則這個對象也一定有自己的原型.這樣就形成了一條線性的鏈,我們稱之為原型鏈)

通過原型鏈方式實現繼承

function Parent() {

this.hobby="play";

}

Parent.prototype.showHobby=function () {

return this.hobby;

}

function Son() {

this.sonhobby="eat";

} //實現繼承 ,繼承Parent

Son.prototype=new Parent();

Son.prototype.showSonhobby=function () {

return this.sonhobby;

}

var obj=new Son();

alert(obj.showHobby())

for(var i in obj){

document.write(i+"---"+obj[i]+"
");

}

實現的本質是重寫原型對象,代之以一個新類型的實例。

換句話說,原來存在於Parent的實例中的所有屬性和方法,現在也存在於Son.prototype中了。在確定了繼承關係之後,我們給Son.prototype添加了一個新的方法。

要注意,obj.constructor現在指向的是Parent,這是因為原來Son.prototype中的constructro被重寫了的緣故。

原型鏈實現繼承

確定原型和實例的關係

可以通過兩種方式來確定原型和實例之間的關係。

操作符instanceof和isPrototypeof()方法:

1.instanceof 只要用這個操作符來測試實例與原型鏈中出現過的構造函數,結果就會返回true.

alert(obj instanceof Object) //true

alert(obj instanceof Son); //true

alert(obj instanceof Parent); //true

2.isPrototypeOf() 只要原型鏈中出現過的原型,都可以說是該原型鏈所派生的實例的原型,因此也會返回true;

.alert(Object.prototype.isPrototypeOf(obj)) //true

alert(Son.prototype.isPrototypeOf(obj)); //true

alert(Parent.prototype.isPrototypeOf(obj)); //true

借用構造函數(類式繼承)

function Parent(age){

this.name = ['mike','jack','smith'];

this.age = age;

}

function Child(age){

Parent.call(this,age); //Parent.apply(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

組合式繼承

組合式繼承是比較常用的一種繼承方法,其背後的思路是:

使用原型鏈實現對原型屬性和方法的繼承,而通過借用構造函數來實現對實例屬性的繼承。這樣,既通過在原型上定義方法實現了函數複用,又保證每個實例都有它自己的屬性。

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)4也行

alert(test.run());//mike,jack,smith are both21

喜歡的話,點個關注,點個贊,謝謝啦,

JavaScript 10


分享到:


相關文章: