JavaScript Object Oriented Programming: The constructor property

物件有內建的屬性「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

function Rabbit(){};
Rabbit.prototype = { constructor: Rabbit }
var rabbit = new Rabbit();
console.log(rabbit.constructor == Rabbit); // true

參考資料


這篇文章的原始位置在這裡-JavaScript Object Oriented Programming - The constructor property

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: javascript
comments powered by Disqus