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;
}

//建立SubClass類別的實例
var instance = new SubClass();
alert(instance.getSuperValue());

2. 決定原型與實例的關係第一種方式用instanceof 運算符，用來測試實例和原型鏈中出現過的建構子

複製程式碼


程式碼如下:

alert(instance ，instance是Object的實例嗎?
alert(instance instanceof SuperClass); //true ，instance是SuperClass的實例嗎?

alert(instance instanceof SubClass); //true，instance是SubClass的實例嗎? 第二種方式用isPrototypeOf()方法，測試原型鏈中出現的原型

複製代碼


程式碼如下:

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); // alert(SubClass.prototype.isPrototypeOf(instance)); //true

3. 用原型鏈繼承定義方法時的注意點定義方法是的順序：

複製程式碼

程式碼如下:


View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}

function SubClass() {
this.subj. ;
}

//SubClass繼承SuperClass
SubClass.prototype = new SuperClass(); //這個要先寫，新加入的方法和重寫超類別的方法要寫在後面，否則重寫的超類別方法將永遠無法呼叫

//新增方法
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//重寫超類別的方法
SubClass.prototype.getSuperValue = function() {
return false;
}

var instance = new SubClass();
alert(instance. getSuperValue()); //fales,這裡SubClass的實例呼叫了SubClass的getSuperValue()方法，而屏蔽了SuperClass的getSuperValue()方法，
//使用SuperClass的方法會呼叫SuperClass的getSuperValue()方法


原型鏈繼承的缺點：1）共享超類別中的屬性，2）在建立子類別時不能傳遞參數給超類別的建構子。所有很少單獨使用原型鏈

4.借用建構子

//很少單獨使用 優點：可以傳遞參數參數給超類別 。缺點：函數無法重複使用，所有類別都要使用建構子模式

複製程式碼

程式碼如下:


View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); / /繼承了SuperClass,同時向SuperClass傳遞了參數
this.age = 29; //實例屬性
}

var instance = new SubClass();
alert(instance.name ); //RuiLiang
alert(instance.age); //29

6.組合繼承//最常用的繼承模式

複製程式碼 程式碼如下:

View Code
//建立SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue"," green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}

////建立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.其它繼承模式
原型式繼承、寄生式繼承、寄生組合式繼承