js的Prototype屬性解釋及常用方法

更新時(shí)間：2014年05月08日 17:55:17 作者：

你不需要顯式地聲明一個(gè)prototype屬性，因?yàn)樵诿恳粋€(gè)構(gòu)造函數(shù)中都有它的存在

函數(shù)：原型

每一個(gè)構(gòu)造函數(shù)都有一個(gè)屬性叫做原型(prototype,下面都不再翻譯，使用其原文)。這個(gè)屬性非常有用：為一個(gè)特定類(lèi)聲明通用的變量或者函數(shù)。

prototype的定義

你不需要顯式地聲明一個(gè)prototype屬性，因?yàn)樵诿恳粋€(gè)構(gòu)造函數(shù)中都有它的存在。你可以看看下面的例子：

Example PT1

復(fù)制代碼代碼如下:

function Test()
{
}
alert(Test.prototype); // 輸出 "Object"

給prototype添加屬性

就如你在上面所看到的，prototype是一個(gè)對(duì)象，因此，你能夠給它添加屬性。你添加給prototype的屬性將會(huì)成為使用這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象的通用屬性。

例如，我下面有一個(gè)數(shù)據(jù)類(lèi)型Fish，我想讓所有的魚(yú)都有這些屬性：livesIn="water"和price=20；為了實(shí)現(xiàn)這個(gè)，我可以給構(gòu)造函數(shù)Fish的prototype添加那些屬性。

Example PT2

復(fù)制代碼代碼如下:

function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;

接下來(lái)讓我們作幾條魚(yú)：

復(fù)制代碼代碼如下:

var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");

再來(lái)看看魚(yú)都有哪些屬性：

復(fù)制代碼代碼如下:

for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i);   // 我只是取得指向這條魚(yú)的指針
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}

輸出應(yīng)該是：

復(fù)制代碼代碼如下:

"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"

你看到所有的魚(yú)都有屬性livesIn和price,我們甚至都沒(méi)有為每一條不同的魚(yú)特別聲明這些屬性。這時(shí)因?yàn)楫?dāng)一個(gè)對(duì)象被創(chuàng)建時(shí)，這個(gè)構(gòu)造函數(shù)將會(huì)把它的屬性prototype賦給新對(duì)象的內(nèi)部屬性__proto__。這個(gè)__proto__被這個(gè)對(duì)象用來(lái)查找它的屬性。

你也可以通過(guò)prototype來(lái)給所有對(duì)象添加共用的函數(shù)。這有一個(gè)好處：你不需要每次在構(gòu)造一個(gè)對(duì)象的時(shí)候創(chuàng)建并初始化這個(gè)函數(shù)。為了解釋這一點(diǎn)，讓我們重新來(lái)看Example DT9并使用prototype來(lái)重寫(xiě)它：

用prototype給對(duì)象添加函數(shù)

Example PT3

復(fù)制代碼代碼如下:

function Employee(name, salary)
{
this.name=name;
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}

Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

我們可以象通常那樣創(chuàng)建對(duì)象：

復(fù)制代碼代碼如下:

var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);

并驗(yàn)證它：

復(fù)制代碼代碼如下:

alert(boss1.getSalary());   // 輸出 200000
alert(boss2.getSalary());   // 輸出 100000
alert(boss3.getSalary());   // 輸出 150000

這里有一個(gè)圖示來(lái)說(shuō)明prototype是如何工作的。這個(gè)對(duì)象的每一個(gè)實(shí)例(boss1, boss2, boss3)都有一個(gè)內(nèi)部屬性叫做__proto__，這個(gè)屬性指向了它的構(gòu)造器(Employee)的屬性prototype。當(dāng)你執(zhí)行 getSalary或者addSalary的時(shí)候，這個(gè)對(duì)象會(huì)在它的__proto__找到并執(zhí)行這個(gè)代碼。注意這點(diǎn)：這里并沒(méi)有代碼的復(fù)制(和 Example DT8的圖表作一下對(duì)比)。