JavaScript prototype屬性
一、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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript:prototype屬性使用方法JavaScript
- javascript中各類的prototype屬性JavaScript
- js prototype屬性使用程式碼例項JS
- JavaScript prototypeJavaScript
- JavaScript files 屬性JavaScript
- JavaScript childElementCount 屬性JavaScript
- JavaScript offsetX 屬性JavaScript
- JavaScript firstChild屬性JavaScript
- JavaScript classList 屬性JavaScript
- JavaScript cells 屬性JavaScript
- JavaScript rows 屬性JavaScript
- JavaScript nodeName 屬性JavaScript
- JavaScript rowIndex 屬性JavaScriptIndex
- JavaScript tagName 屬性JavaScript
- JavaScript parentNode 屬性JavaScript
- JavaScript NaN 屬性JavaScriptNaN
- JavaScript Infinity 屬性JavaScript
- JavaScript className 屬性JavaScript
- JavaScript style 屬性JavaScript
- JavaScript firstElementChild 屬性JavaScript
- JavaScript私有屬性和靜態屬性JavaScript
- JavaScript validity 屬性JavaScript
- JavaScript 字串 length屬性JavaScript字串
- JavaScript 例項屬性JavaScript
- JavaScript:Object屬性方法JavaScriptObject
- JavaScript設定屬性JavaScript
- JavaScript prototype 原型JavaScript原型
- JavaScript:原型(prototype)JavaScript原型
- JavaScript 函式 name 屬性JavaScript函式
- 理解 JavaScript 物件的屬性JavaScript物件
- JavaScript 刪除class屬性JavaScript
- JavaScript select text 屬性JavaScript
- JavaScript select size 屬性JavaScript
- JavaScript select length 屬性JavaScript
- JavaScript 陣列 length 屬性JavaScript陣列
- JavaScript naturalHeight 屬性JavaScript
- JavaScript naturalWidth 屬性JavaScript
- JavaScript 函式 length 屬性JavaScript函式