JavaScript Object Oriented Programming - The "constructor" property

constructor 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

  • 物件有內建的屬性「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
張貼留言