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 Mike