JavaScript Object Oriented Programming: The constructor property
04 Feb 2016物件有內建的屬性「constructor」,意即「參考建立此物件的 function」。
範例
我們來建立一個簡單的 constructor,然後看看新的物件是否有正確的 constructor 的值。
function Rabbit() {}
var rabbit = new Rabbit();
console.log(rabbit.constructor == Rabbit); // true
The origins of constructor
當我們宣告一個函數,如下
function Rabbit() {
//...
}
interpreter 建立一個新的函數物件,而此物件的 prototype 屬性也被建立和給值。prototype 的預設值與其 constructor 相同,在此範例中為 Rabbit。意即
Rabbit.prototype = { constructor: Rabbit };
所以,當由 constructor 練立一個新的物件時(例如:使用 Rabbit 建立 rabbit),Rabbit.prototype
成為這個被建立物件的 __proto__
的值,且 constructor 成為物件可被存取的屬性。如下所示
rabbit.__proto__ == { constructor: Rabbit };
我們來做一個簡單的檢查吧!
function Rabbit() {}
var rabbit = new Rabbit();
console.log(rabbit.hasOwnProperty('constructor')); // false
console.log(rabbit.__proto__.hasOwnProperty('constructor')); // true
console.log(Rabbit.prototype.hasOwnProperty('constructor')); // true
Keeping constructor up to date
呼叫 rabbit.constructor
事實上是回傳 rabbit.__proto__.constructor
。這會有一個副作用,參考以下範例。
function Rabbit() {} // (1)
Rabbit.prototype = {}; // (2)
var rabbit = new Rabbit();
console.log(rabbit.constructor == Object); // true
原先在 (1) rabbit 的 constructor 是 Rabbit,但由於在 (2) 中將 Rabbit.prototype 的值設為空物件,因此 rabbit.__proto__
在 Rabbit.prototype
找不到 constructor
這個屬性的值,只好繼續往上找,最後在 Object.prototype 找到 constructor 的值為 Object。
Summary
- 物件有內建的屬性「constructor」,意即參考「建立此物件的 function」。
- 當 prototype 被修改,其 constructor 也會丟失。
- 如果我們希望在繼承後擁有正確的 constructor,就必須自行設定,如下:
function Rabbit() {}
Rabbit.prototype = { constructor: Rabbit };
var rabbit = new Rabbit();
console.log(rabbit.constructor == Rabbit); // true
參考資料
這篇文章的原始位置在這裡-JavaScript Object Oriented Programming - The constructor property
由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。