DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS Pro-深入面向對象的程序設計之繼承的詳解
JS Pro-深入面向對象的程序設計之繼承的詳解
編輯:關於JavaScript     

原型鏈(prototype chaining):

利用原型來繼承屬性和方法。回顧一下構造函數(constructor),原型對象(prototype)和實例(instance)的關系。每一個構造函數都有一個prototype屬性,該屬性指向一個prototype對象;prototype對象也有constructor屬性,指向該函數;而實例也有一個內部指針(__proto__)指向這個prototype對象。如果這個prototype對象是另外一個對象的實例會是怎樣的呢?這樣該prototype對象就包含一個指向另一個類型的指針,相應地,另一個原型中也包含著一個指向另一個構造函數的指針。

JS的繼承很簡單,就是把子類的prototype設為父類的一個(實例化)對象
復制代碼 代碼如下:
function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());   //true

最終的結果:instance的__proto__指向SubType.prototype對象,而SubType.prototype對象的__proto__屬性又指向SuperType.prototype對象。getSuperValue()是一個方法,所以仍然存在於原型中,而property是一個實例屬性,所以現在存在於SubType.prototype這個實例中。  instance.constructor現在指向的是SuperType,這是由於SubType.prototype指向SuperType.prototype,而SuperType.prototype的constructor屬性指向SuperType函數,所以instance.constructor指向SuperType。

默認情況下,所有引用類型都繼承Object。這是因為所有函數的原型對象,默認都是Object的一個實例,所以內部prototype(__proto__)指向Object.Prototype。

原型和實例的關系:可以使用2種方法來確定原型與實例之間的關系。
- instancef操作符:使用該操作符來測試實例與原型鏈中出現過的構造函數,都會返回true
復制代碼 代碼如下:
alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

- isPrototypeOf()方法:只要是原型鏈中出現過的原型,都可以說是該原型鏈所派生的實例的原型。
復制代碼 代碼如下:
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true

給子類添加方法的注意點:我們有的時候會給子類添加方法,或者是重寫父類的某些方法。這個時候就要注意,這些方法必須在繼承後再定義。以下的例子裡,SubType在繼承SuperType後,我們給它添加了新的方法getSubValue(),而且重寫了getSuperValue()方法。對於後者,只有SubType的實例才會使用重寫的方法,SuperType的實例還是會使用原有的getSuperValue()方法。
復制代碼 代碼如下:
function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};
function SubType(){
  t his.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
//new method
SubType.prototype.getSubValue = function (){
  return this.subproperty;
};
//override existing method
SubType.prototype.getSuperValue = function (){
  return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false

另外一個需要注意的是,通過原型鏈實現繼承時,不能使用對象字面量創建原型方法,因為這樣會重寫原型鏈。如下面的代碼,在SubType繼承SuperType以後,使用對象字面量給原型添加方法,但這樣做,會重寫SubType原型,重寫後的SubType.prototype包含的是一個Object的實例,從而也切斷了與SuperType的關系。
復制代碼 代碼如下:
function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};
function SubType(){
  this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
//try to add new methods - this nullifies the previous line
SubType.prototype = {
  getSubValue : function (){
    return this.subproperty;
  },
  someOtherMethod : function (){
    return false;
  }
};
var instance = new SubType();
alert(instance.getSuperValue()); //error!

原型鏈的問題:和原型一樣,當使用引用類型值的時候,原型鏈就會出問題了。回顧一下之前的內容,包含一個引用類型值的原型屬性會被所有實例共享,這就是為什麼我們要把引用類型值在構造函數中定義,而不是在原型中定義。在通過原型鏈實現繼承時,原型實際上會變成另一個類型的實例,於是,原先的實例屬性也順利成章的變成現在的原型屬性了。
復制代碼 代碼如下:
function SuperType(){
  this.colors = [“red”, “blue”, “green”];
}
function SubType(){
}
//inherit from SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors); //”red,blue,green,black”
var instance2 = new SubType();
alert(instance2.colors); //”red,blue,green,black”

在SuperType構造函數中,我們定義了一個colors數組,每一個SuperType實例都會擁有它自己的這個colors數組。但是當SubType使用原型鏈繼承SuperType以後,SubType.prototype變成SuperType的一個實例,因此它擁有自己的colors屬性,也就是說SubType.prototype.colors屬性。所以,當創建SubType實例的時候,所有實例都共享這一屬性了。如上面的代碼所示。

第二個問題就是:在創建子類的實例時,不能向超類的構造函數中傳遞參數。實際上,應該說是沒有辦法在不影響所有對象實例的情況下,給超類的構造函數傳遞參數。由於這些問題,我們不會單獨使用原型鏈。

--------------------------------------------------------------------------------

借用構造函數(Contructor stealing):
為了解決上述問題,開發人員發明了一種叫做借用構造函數的技術。這種技術的思路就是:在子類型構造函數的內部調用超類型構造函數。(函數,只不過是在特定環境中執行代碼的對象?)我們可以通過使用apply()或call()方法在新創建的對象上執行構造函數。
復制代碼 代碼如下:
function SuperType(){
  this.colors = [“red”, “blue”, “green”];
}
function SubType(){
  //inherit from SuperType
  SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors); //”red,blue,green,black”
var instance2 = new SubType();
alert(instance2.colors); //”red,blue,green”

我們在SubType裡使用call()方法調用SuperType的構造函數,實際上就是在新的SubType對象上執行SuperType()函數中定義的所有對象初始化代碼。結果就是每個SubType實例都具有自己的colors屬性的副本。

傳遞參數:使用借用構造函數方法的一個很大的好處在於就是,我們可以從子類的構造函數傳遞參數到父類的構造函數中。
復制代碼 代碼如下:
function SuperType(name){
  this.name = name;
}
function SubType(){
  //inherit from SuperType passing in an argument
  SuperType.call(this, “Nicholas”);
  //instance property
  this.age = 29;
}
var instance = new SubType();
alert(instance.name); //”Nicholas”;
alert(instance.age); //29

新的SuperType構造函數新增了一個參數name,我們在call SuperType的同時,往SuperType傳遞參數"Nicholas"。為了不讓超類型的構造函數重寫子類型的屬性,可以在調用超類型構造函數後再定義子類的屬性。

借用構造函數的問題:方法都在構造函數中定義,無法復用。而且在超類型的原型中定義的方法,對子類型而言是不可見的。結果所有類型都只能使用構造函數模式。

--------------------------------------------------------------------------------

組合繼承:
結合原型鏈及借用構造函數各自的優點的一種繼承模式。使用原型鏈繼承原型屬性及方法,使用借用構造函數來繼承實例屬性。如下面例子,我們使用call()方法調用SuperType的構造函數(每個SubType實例都擁有自己的name和colors屬性,以及SubType的age屬性);然後再把SuperType實例賦值給SubType的原型,使其繼承SuperType的sayName()方法(每個實例都共用這個方法)。
復制代碼 代碼如下:
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    //inherit properties
    SuperType.call(this, name);
    this.age = age;
}
//inherit methods
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

原型式繼承(Prototypal Inheritance):
復制代碼 代碼如下:
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
--------------------------------------------------------------------------------


寄生式繼承(Parasitic Inheritance):

缺點同構造函數

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved