1.原型鏈
//很少單獨使用
View Code
1 //定義 SuperClass類，有一個屬性property和一個方法getSuperValue
2 function SuperClass() {
3 this.property = true;
4 }
5 SuperClass.prototype.getSuperValue = function() {
6 return this.property;
7 }
8
9 //定義SubClass類，有一個屬性subproperty和後來添加的一個方法getSubValue
10 function SubClass() {
11 this.subproperty = false;
12 }
13
14 //SubClass類繼承SuperClass類
15 SubClass.prototype = new SuperClass();
16
17 //SubClass類添加一個方法getSubValue
18 SubClass.prototype.getSubValue = function() {
19 return this.subproperty;
20 }
21
22 //創建SubClass類的實例
23 var instance = new SubClass();
24 alert(instance.getSuperValue());
2. 確定原型與實例的關系
第一種方式用 instanceof 操作符，用來測試實例和原型鏈中出現過的構造函數
1 alert(instance instanceof Object); //true ，instance是Object的實例嗎?
2 alert(instance instanceof SuperClass); //true ，instance是SuperClass的實例嗎?
3 alert(instance instanceof SubClass); //true，instance是SubClass的實例嗎?
第二種方式用 isPrototypeOf()方法，測試原型鏈中出現的原型
1 alert(Object.prototype.isPrototypeOf(instance)); //true
2 alert(SuperClass.prototype.isPrototypeOf(instance)); //true
3 alert(SubClass.prototype.isPrototypeOf(instance)); //true
3. 用原型鏈繼承定義方法時的註意點
定義方法是的順序：
View Code
1 function SuperClass() {
2 this.property = true;
3 }
4 SuperClass.prototype.getSuperValue = function() {
5 return this.property;
6 }
7
8 function SubClass() {
9 this.subproperty = false;
10 }
11
12 //SubClass繼承SuperClass
13 SubClass.prototype = new SuperClass(); //這個要先寫，新添加的方法和重寫超類的方法要寫在後面，否則重寫的超類方法將永遠無法調用
14
15 //添加新方法
16 SubClass.prototype.getSubValue = function() {
17 return this.subproperty;
18 }
19 //重寫超類的方法 www.aiwalls.com
20 SubClass.prototype.getSuperValue = function() {
21 return false;
22 }
23
24 var instance = new SubClass();
25 alert(instance.getSuperValue()); //fales,這裡SubClass的實例調用瞭SubClass的getSuperValue()方法，而屏蔽瞭SuperClass的getSuperValue()方法，
26 //使用SuperClass的方法會調用SuperClass的getSuperValue()方法
原型鏈繼承的缺點：1）共享超類中的屬性，2）在創建子類時不能向超類的構造函數傳遞參數。所有很少單獨使用原型鏈
4.借用構造函數
//很少單獨使用
優點：可以向超類傳遞參數 。缺點：函數無法復用，所有類都要使用構造函數模式
View Code
1 function SuperClass(name) {
2 this.name = name;
3 }
4 function SubClass(){
5 SuperClass.call(this,"RuiLiang"); //繼承瞭SuperClass,同時向SuperClass傳遞瞭參數
6 this.age = 29; //實例屬性
7 }
8
9 var instance = new SubClass();
10 alert(instance.name); //RuiLiang
11 alert(instance.age); //29
6.組合繼承
//最常用的繼承模式
View Code
1 //創建SuperClass
2 function SuperClass(name) {
3 this.name = name;
4 this.colors = ["red","blue","green"];
5 }
6 SuperClass.prototype.sayName = function() {
7 alert(this.name);
8 }
9
10 ////創建SubClass
11 function SubClass(name,age) {
12 SuperClass.call(this,name); //繼承屬性
13 this.age = age; //自己的屬性
14 }
15
16 SubClass.prototype = new SuperClass(); //繼承方法
17 SubClass.prototype.sayAge = function() { //SubClass添加新方法
18 alert(this.age);
19 };
20
21 //使用
22 var instance1 = new SubClass("RuiLiang",30);
23 instance1.colors.push("black");
24 alert(instance1.colors); //"red,blue,green,black"
25 instance1.sayName(); //"RuiLiang"
26 instance1.sayAge(); //30
27
28 var instance2 = new SubClass("XuZuNan",26);
29 alert(instance2.colors); //"red,blue,green"
30 instance2.sayName(); //"RuiLiang"
31 instance2.sayAge(); //30
7.其它繼承模式
原型式繼承、寄生式繼承、寄生組合式繼承
摘自 晴天漫步
