javascript的prototype與this，是剛接觸javascript的人比較難理解的。在javascript裡，假設定義一個一個Bird function時，可使用同個prototype建立不同物件，也就所有經由Bird function產生的物件，都會擁有相同的protoype的屬性。
Example：
定義一隻鳥，這種鳥的名稱叫做Sparrow。
1
2
3
4
5
6
7
| function Bird(){
//do something
}
Bird.prototype = {
name:"Sparrow"
};
|
接著建立兩個變數，分別為鳥和Tom的寵物。
1
2
| var bird = new Bird();
var petOfTom = new Bird();
|
Tom把他的寵物稱為Raven，而這種鳥的名稱，重新命名為Black Sparrow。
1
2
3
| petOfTom.name = "Raven";
Bird.prototype.name = "Black Sparrow";
|
最後你就會發現一個有趣現象，即使這種鳥的名稱重新命名了，Tom的寵物仍然會以Tom命名的方式顯示。
1
2
3
4
5
| //name of bird:Black Sparrow
console.log( "name of bird:" + bird.name );
//Tom's pet called him: Raven.
console.log( "Tom's pet called him: " + petOfTom.name + "." );
|
也就是說也就是說，當prototype的name改變時，其他經由Bird new出來的object name，都會跟著修改，但是被new出來的object，一旦屬性被修改，不管之後prototype如何更動，則object的屬性會依照你所指定的修改。
完整範例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function Bird(){
}
Bird.prototype = {
name:"Sparrow"
};
var bird = new Bird();
var petOfTom = new Bird();
console.log( "name of bird:" + bird.name );
//rename
petOfTom.name = "Raven";
//rename
Bird.prototype.name = "Black Sparrow";
console.log( "rename..." );
console.log( "name of bird:" + bird.name );
console.log( "Tom's pet called him: " + petOfTom.name + "." );
</script>
</body>
</html>
|
