JavaScript 原型與繼承說明

來源:互聯網
上載者:User

function A(x)
{
this.x = x;
}
alert(A.prototype);
alert(A.prototype.constructor);
根據彈出的結果,我們可以得到:原型對象是由函數的建構函式建立,它所擁有的屬效能被所有對象共用,初始時原型對象指向一個Object對象,並且定義了一個constructor屬性,該屬性指向定義該原型對象的建構函式本身,再看如下代碼。

Code
function A(x)
{
A.prototype.x = x;
}
var obj = new A(10);
alert(obj.x);
alert(obj.constructor);
因為原型對象的所有屬效能被建構函式建立對象共用,所以建立的對象可以訪問這裡的constructor屬性,同時obj對應的就是原型對象(prototype)所建立出來的一個執行個體,那麼重寫constructor屬性會出現什麼樣的結果呢?

Code
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();

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.