JavaScript 原型 繼承

在上一遍我們簡單的介紹了怎麼樣使用JavaScript進行建構函式的書寫，現在來認識下JavaScript的建構函式其原理，主要是關注與原型的概念，首先看如下代碼。

function A(x) 
{ 
this.x = x; 
} 
alert(A.prototype);
alert(A.prototype.constructor);

根據彈出的結果，我們可以得到：原型對象是由函數的建構函式建立，它所擁有的屬效能被所有對象共用，初始時原型對象指向一個Object對象，並且定義了一個constructor屬性，該屬性指向定義該原型對象的建構函式本身，再看如下代碼。

function A(x) 
{ 
    A.prototype.x = x; 
} 
var obj = new A(10);
alert(obj.x);
alert(obj.constructor);

因為原型對象的所有屬效能被建構函式建立對象共用，所以建立的對象可以訪問這裡的constructor屬性，同時obj對應的就是原型對象（prototype）所建立出來的一個執行個體，那麼重寫constructor屬性會出現什麼樣的結果呢？

function A(x) 
{ 
    A.prototype.x = x; 
} 
var objA = new A(10);
objA.constructor = function(x){ alert("重寫obj的constructor屬性");this.x = 20 };
objA.constructor();
alert(objA.x);
var objB = new A(10);
alert(objB.x);

根據結果我們可以看到，首先彈出的是“重寫obj的constructor屬性”，然後彈出20，在彈出10，可見，我們在書寫重寫objA這個對象的constructor之後，objB並沒有被改變，因此無論在一個對象加入或修改多少屬性這都不影響其原型對象中屬性的本來面目，其實很容易理解js為什麼這樣做，因為一個對象的行為不能影響到其他對象，否則將會造成混亂。

在這裡，我們可以總結一下，上面代碼的規則：

　　1.當我們調用某個對象的時候，首先檢查該對象本身的自己定義的屬性，如果存在則調用。

　　2.當自己本身的屬性不存在的時候，則調用其建構函式所定義的原型對象的引用。

那麼根據這個規則，就形成了JavaScript中的一個原型鏈，我們就可以根據這個規則來定義繼承關係。

function A(x) 
{ 
    A.prototype.x = x;
} 

function B(x,y)
{
    B.prototype.y = y;
    A.call(this,x);
}

這段代碼顯示了兩個函數，B函數繼承與A函數，A.call(this.x)表示，將B的對象this傳遞到A函數中進行執行。然後，我們同樣需要由B函數構造出來的對象需要包含A函數的所有特性，因此需要加上這麼一句話。

B.prototype = new A();
alert(B.prototype.constructor);

先我們指定B的原型為A，因此，B函數繼承了A函數的特性，根據彈出的結果，我們可以看到，其constructor指向的是A函數，那麼我們的B函數的特性是不是丟失了呢？因此，我們需要在加上一句話，最後給出繼承的整合代碼。

function A(x) 
{ 
    A.prototype.x = x; 
    A.prototype.ShowA = function(){ alert("A的Show方法!"); };
} 

function B(x,y)
{
    B.prototype.y = y;
    A.call(this,x);
    B.prototype.ShowB = function(){ alert("B的Show方法!"); };
}

B.prototype = new A();
B.prototype.constructor = B;

var obj = new B(10,5);
alert(obj.x);
alert(obj.y);
obj.ShowA();
obj.ShowB();

若有疑問或不正之處，歡迎提出指正和討論。