原型物件 Prototype Object

特性

只有函式物件才擁有公開的原型物件

其他的物件僅有私有的原型物件

代表物件實體的上層物件

所有物件實體會自動繼承原型物件

建立物件之間的鏈結關係

var build = function () {
    this.tag = 'ikea';
    this.price = 2599;
};

var category = 'clothes';

console.log(build.prototype);    // Object {}
console.log(category.prototype);    // undefined
// Can use __proto__ in Chrome Browser!
console.log(category.__proto__);    // String {}

constructor

預設是建構式函式 (可更改)

var obj = new build();

console.log(obj.tag);    // ikea
console.log(obj.price);    // 2599

typeof(obj);    // 'object'
console.log(obj.prototype);    // undefined
// Can use __proto__ in Chrome Browser!
console.log(obj.__proto__);    // Object {}
obj.__proto__.constructor    // function () { this.tag = 'ikea'; this.price = 2599; }

實作繼承

build.prototype.tag = 'original';    // 設定原型物件屬性, 不建議隨便使用

var obj = new build();
console.log(obj);    // obj { tag: 'ikea', price: 2599 }

delete obj.tag;    // 刪除 tag 屬性

console.log(obj.tag);    // original

prototype 與 constructor

prototype (函式公開屬性) 與 __proto__ (物件內部屬性)

• 設定物件繼承
• 原型鏈結觀念 (prototype chain)
• IE Browser 無法存取 __proto__

constructor

• 跟其他語言的建構子不一樣在於它並不會執行
• 僅僅是個名稱
• 物件的 constructor 屬性僅供參考

prototype chain

1. 物件本身擁有的屬性
2. 物件內部 __proto__ (繼承自 prototype) 的屬性
3. 不斷的往上層物件找下去直到最後遇到 Object 物件為止

var build = function () {
    this.url = 'tw.yahoo.com';
};

var y = new build();
console.log(y.url);    // tw.yahoo.com

delete y.url;    // 刪除 url 屬性
console.log(y.url);    // undefined

build.prototype.url = 'www.google.com';
console.log(y.url);    // www.google.com

console.log(y.url === y.__proto__.url);    // true

y.url = 'www.amazon.com';
console.log(y.url === y.__proto__.url);    // false

模擬 prototype chain 查找屬性

console.log(y.__proto__);    // Object {}
console.log(y.__proto__.__proto__);    // Object {}
console.log(y.__proto__.__proto__.__proto__);    // null

console.log(y.url.__proto__);    // String {}
console.log(y.url.__proto__.__proto__);    // Object {}
console.log(y.url.__proto__.__proto__.proto__);    // null
// 根物件 != Object