Sean's Note: Using Prototype in JavaScript

2013年12月6日 星期五

Using Prototype in JavaScript

用 JavaScript 所建立的物件都繼承了 Object 這個最頂層的物件,

而 Object 物件含有 prototype 這個屬性(Property) 。
 
var myObject = {} // 等同於 var myObject = new Object()
 
沒用到 prototype 時,每個實體(killerRabbit 和 cuteRabbit) 都擁有各自的 name 屬性,

卻沒有共同的屬性:

    
function Rabbit(name) {
  this.name = name
}

var killerRabbit = new Rabbit("killer");
var cuteRabbit = new Rabbit("cute");

所以如果這兩隻兔子想要共用屬性時,prototype 就可以派上用場:

function Rabbit(name) {
  this.name = name
}
Rabbit.prototype.printName = function(){
    print('My name is: ', this.name)
};

由於 Rabbit 有 prototype,Object 又有 prototype,那尋訪的順序是? 看看下面的例子:
Object.prototype.teeth = "normal";
function Rabbit() {
  this.teeth = 'big'
}
Rabbit.prototype.teeth = "small";
var killerRabbit = new Rabbit("killer");
print(Rabbit.prototype.teeth)        // small
print(Rabbit.teeth)                  // normal
print(killerRabbit.teeth)            // big
print(killerRabbit.prototype.teeth)  // Exception: TypeError: Cannot read property 'teeth' of undefined

當查看一個物件的屬性時,JavaScript 會:
  1. 先看該物件實體(this) 有無該屬性。
  2. 在看該物件的 prototype 物件有無該屬性。
  3. 最後看 Object 物件的 prototype 物件有無該屬性,沒有的話則給予 undefined。

參考資料:http://eloquentjavascript.net/chapter8.html

沒有留言:

張貼留言