javascript學習筆記(十) js對象 繼承
更新時間：2012年06月19日 23:21:12 作者：
javascript學習筆記之js對象 繼承介紹，需要的朋友可以參考下
1.原型鏈
//很少單獨使用
View Code
//定義 SuperClass類，有一個屬性property和一個方法getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
//定義SubClass類，有一個屬性subproperty和后來添加的一個方法getSubValue
function SubClass() {
this.subproperty = false;
}
//SubClass類繼承SuperClass類
SubClass.prototype = new SuperClass();
//SubClass類添加一個方法getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//創(chuàng)建SubClass類的實例
var instance = new SubClass();
alert(instance.getSuperValue());
2. 確定原型與實例的關系
第一種方式用 instanceof 操作符，用來測試實例和原型鏈中出現(xiàn)過的構(gòu)造函數(shù)
alert(instance instanceof Object); //true ，instance是Object的實例嗎?
alert(instance instanceof SuperClass); //true ，instance是SuperClass的實例嗎?
alert(instance instanceof SubClass); //true，instance是SubClass的實例嗎?
第二種方式用 isPrototypeOf()方法，測試原型鏈中出現(xiàn)的原型
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true
3. 用原型鏈繼承定義方法時的注意點
定義方法是的順序：
View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
function SubClass() {
this.subproperty = false;
}
//SubClass繼承SuperClass
SubClass.prototype = new SuperClass(); //這個要先寫，新添加的方法和重寫超類的方法要寫在后面，否則重寫的超類方法將永遠無法調(diào)用
//添加新方法
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//重寫超類的方法
SubClass.prototype.getSuperValue = function() {
return false;
}
var instance = new SubClass();
alert(instance.getSuperValue()); //fales,這里SubClass的實例調(diào)用了SubClass的getSuperValue()方法，而屏蔽了SuperClass的getSuperValue()方法，
//使用SuperClass的方法會調(diào)用SuperClass的getSuperValue()方法
原型鏈繼承的缺點：1）共享超類中的屬性，2）在創(chuàng)建子類時不能向超類的構(gòu)造函數(shù)傳遞參數(shù)。所有很少單獨使用原型鏈
4.借用構(gòu)造函數(shù)
//很少單獨使用
優(yōu)點：可以向超類傳遞參數(shù) 。缺點：函數(shù)無法復用，所有類都要使用構(gòu)造函數(shù)模式
View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); //繼承了SuperClass,同時向SuperClass傳遞了參數(shù)
this.age = 29; //實例屬性
}
var instance = new SubClass();
alert(instance.name); //RuiLiang
alert(instance.age); //29
6.組合繼承
//最常用的繼承模式
View Code
//創(chuàng)建SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}
////創(chuàng)建SubClass
function SubClass(name,age) {
SuperClass.call(this,name); //繼承屬性
this.age = age; //自己的屬性
}
SubClass.prototype = new SuperClass(); //繼承方法
SubClass.prototype.sayAge = function() { //SubClass添加新方法
alert(this.age);
};
//使用
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30
var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"RuiLiang"
instance2.sayAge(); //30
7.其它繼承模式
原型式繼承、寄生式繼承、寄生組合式繼承
//很少單獨使用
復制代碼 代碼如下:
View Code
//定義 SuperClass類，有一個屬性property和一個方法getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
//定義SubClass類，有一個屬性subproperty和后來添加的一個方法getSubValue
function SubClass() {
this.subproperty = false;
}
//SubClass類繼承SuperClass類
SubClass.prototype = new SuperClass();
//SubClass類添加一個方法getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//創(chuàng)建SubClass類的實例
var instance = new SubClass();
alert(instance.getSuperValue());
2. 確定原型與實例的關系
第一種方式用 instanceof 操作符，用來測試實例和原型鏈中出現(xiàn)過的構(gòu)造函數(shù)
復制代碼 代碼如下:
alert(instance instanceof Object); //true ，instance是Object的實例嗎?
alert(instance instanceof SuperClass); //true ，instance是SuperClass的實例嗎?
alert(instance instanceof SubClass); //true，instance是SubClass的實例嗎?
第二種方式用 isPrototypeOf()方法，測試原型鏈中出現(xiàn)的原型
復制代碼 代碼如下:
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true
3. 用原型鏈繼承定義方法時的注意點
定義方法是的順序：
復制代碼 代碼如下:
View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
function SubClass() {
this.subproperty = false;
}
//SubClass繼承SuperClass
SubClass.prototype = new SuperClass(); //這個要先寫，新添加的方法和重寫超類的方法要寫在后面，否則重寫的超類方法將永遠無法調(diào)用
//添加新方法
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//重寫超類的方法
SubClass.prototype.getSuperValue = function() {
return false;
}
var instance = new SubClass();
alert(instance.getSuperValue()); //fales,這里SubClass的實例調(diào)用了SubClass的getSuperValue()方法，而屏蔽了SuperClass的getSuperValue()方法，
//使用SuperClass的方法會調(diào)用SuperClass的getSuperValue()方法
原型鏈繼承的缺點：1）共享超類中的屬性，2）在創(chuàng)建子類時不能向超類的構(gòu)造函數(shù)傳遞參數(shù)。所有很少單獨使用原型鏈
4.借用構(gòu)造函數(shù)
//很少單獨使用
優(yōu)點：可以向超類傳遞參數(shù) 。缺點：函數(shù)無法復用，所有類都要使用構(gòu)造函數(shù)模式
復制代碼 代碼如下:
View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); //繼承了SuperClass,同時向SuperClass傳遞了參數(shù)
this.age = 29; //實例屬性
}
var instance = new SubClass();
alert(instance.name); //RuiLiang
alert(instance.age); //29
6.組合繼承
//最常用的繼承模式
復制代碼 代碼如下:
View Code
//創(chuàng)建SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}
////創(chuàng)建SubClass
function SubClass(name,age) {
SuperClass.call(this,name); //繼承屬性
this.age = age; //自己的屬性
}
SubClass.prototype = new SuperClass(); //繼承方法
SubClass.prototype.sayAge = function() { //SubClass添加新方法
alert(this.age);
};
//使用
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30
var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"RuiLiang"
instance2.sayAge(); //30
7.其它繼承模式
原型式繼承、寄生式繼承、寄生組合式繼承
相關文章
這篇文章主要介紹了以Python代碼實例展示kNN算法的實際運用,這里舉了一個用來預測豆瓣電影用戶的性別的例子,需要的朋友可以參考下2015-10-10
深入解析JavaScript中的數(shù)字對象與字符串對象
這篇文章主要介紹了JavaScript中的數(shù)字對象與字符串對象,是JavaScript入門學習中的基礎知識,需要的朋友可以參考下2015-10-10
javascript實現(xiàn)playfair和hill密碼算法
這篇文章主要介紹了javascript實現(xiàn)playfair和hill密碼算法,需要的朋友可以參考下2014-12-12
Ext JS 4從底層對類體系進行了重構(gòu)，這是Ext JS歷史上的第一次對類體系的巨大重構(gòu),需要的朋友可以參考下2012-12-12
這篇文章主要介紹了js的setInterval方法的用法以及示例，非常的有用，這里推薦給小伙伴們2014-12-12
JavaScript中構(gòu)造函數(shù)與原型鏈之間的關系詳解
在本篇文章里小編給大家分享了關于JavaScript中構(gòu)造函數(shù)與原型鏈之間的關系相關知識點，需要的朋友們學習下。2019-02-02
這篇文章主要介紹了JavaScript變量的作用域的基本知識,是JavaScript入門學習中的基礎知識,需要的朋友可以參考下2015-08-08
這篇文章主要是對JavaScript中的delete運算符進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript中的getTimezoneOffset()方法使用詳解
這篇文章主要介紹了JavaScript中的getTimezoneOffset()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
javascript學習筆記之Date 日期類型介紹，需要的朋友可以參考下2012-06-06