js的Prototype屬性詳解

js的prototype 屬性,w3c說:prototype 屬性使您有能力向對象添加屬性和方法。說的總是很模糊,網上找的大神的解釋很詳細。。。

avascript中的每個對象都有prototype屬性,Javascript中對象的prototype屬性的解釋是:返回對象類型原型的引用。

函數:原型

每一個構造函數都有一個屬性叫做原型(prototype,下面都不再翻譯,使用其原文)。這個屬性非常有用:爲一個特定類聲明通用的變量或者函數。

prototype的定義

你不需要顯式地聲明一個prototype屬性,因爲在每一個構造函數中都有它的存在。你可以看看下面的例子:

Example PT1

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

給prototype添加屬性

就如你在上面所看到的,prototype是一個對象,因此,你能夠給它添加屬性。你添加給prototype的屬性將會成爲使用這個構造函數創建的對象的通用屬性。

例如,我下面有一個數據類型Fish,我想讓所有的魚都有這些屬性:livesIn="water"和price=20;爲了實現這個,我可以給構造函數Fish的prototype添加那些屬性。

Example PT2

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

接下來讓我們作幾條魚:

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

再來看看魚都有哪些屬性:

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

輸出應該是:

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

你看到所有的魚都有屬性livesIn和price,我們甚至都沒有爲每一條不同的魚特別聲明這些屬性。這時因爲當一個對象被創建時,這個構造函數將會把它的屬性prototype賦給新對象的內部屬性__proto__。這個__proto__被這個對象用來查找它的屬性。

你也可以通過prototype來給所有對象添加共用的函數。這有一個好處:你不需要每次在構造一個對象的時候創建並初始化這個函數。爲了解釋這一點,讓我們重新來看ExampleDT9並使用prototype來重寫它:

用prototype給對象添加函數

Example PT3

CODE:

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

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

 

我們可以象通常那樣創建對象:

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

並驗證它:

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

這裏有一個圖示來說明prototype是如何工作的。這個對象的每一個實例(boss1, boss2,boss3)都有一個內部屬性叫做__proto__,這個屬性指向了它的構造器(Employee)的屬性prototype。當你執行getSalary或者addSalary的時候,這個對象會在它的__proto__找到並執行這個代碼。注意這點:這裏並沒有代碼的複製(和Example DT8的圖表作一下對比)。

js的Prototype屬性 <wbr>解釋及常用方法
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章