JavaScript prototype屬性

koro發表於2020-09-23

一、JavaScript prototype 屬性

定義和用法

prototype 屬性使您有能力向物件新增屬性和方法。

語法

object.prototype.name=value

例項

在本例中,我們將展示如何使用 prototype 屬性來向物件新增屬性:

<script type="text/javascript">
    function employee(name,job,born){
        this.name=name;
        this.job=job;
        this.born=born;
    } 
 
    var bill=new employee("Bill Gates","Engineer",1985);
    employee.prototype.salary=null;
    bill.salary=20000;
    document.write(bill.salary);
</script>


輸出:

20000

函式:原型

每一個建構函式都有一個屬性叫做原型(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=new Fish("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來給所有物件新增共用的函式。這有一個好處:你不需要每次在構造一個物件的時候建立並初始化這個函式。為了解釋這一點,讓我們重新來看Example DT9並使用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=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}


我們可以象通常那樣建立物件:

CODE:

var boss1=new Employee("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__找到並執行這個程式碼。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69984284/viewspace-2723556/,如需轉載,請註明出處,否則將追究法律責任。

相關文章