DIV CSS 佈局教程網

constructor是什麼

簡單的理解,constructor指的就是對象的構造函數。請看如下示例：
復制代碼 代碼如下:
function Foo(){};
var foo = new Foo();
alert(foo.constructor);//Foo
alert(Foo.constructor);//Function
alert(Object.constructor);//Function
alert(Function.constructor);//Function

對於foo.constructor為Foo,我想應該很好理解，因為foo的構造函數為Foo。對於Foo、Object、Function的構造函數為Function,我想也沒什麼好爭議的。（因為Foo,Object,Function都是函數對象，又因為所有的函數對象都是Function這個函數對象構造出來,所以它們的constructor為Function,詳細請參考《js_函數對象》)

Prototype與Constructor的關系

復制代碼 代碼如下:
function Dog(){}
alert(Dog === Dog.prototype.constructor);//true

在 JavaScript 中，每個函數都有名為“prototype”的屬性，用於引用原型對象。此原型對象又有名為“constructor”的屬性，它反過來引用函數本身。這是一種循環引用，如圖：

constructor屬性來自何方
我們來看一下Function構造String的構造過程：

注：Function構造任何函數對象的過程都是一樣的，所以說不管是String,Boolean,Number等內置對象，還是用戶自定義對象,其構造過程都和上圖一樣。這裡String只是一個代表而矣！
圖中可以看出constructor是Function在創建函數對象時產生的，也正如'prototype與constructor的關系'中講的那樣，constructor是函數對象prototype鏈中的一個屬性。即String=== String.prototype.constructor。

我還想用一段代碼來證明一下,理論是正確的：
復制代碼 代碼如下:
function Person(){}
var p = new Person();
alert(p.constructor);//Person
alert(Person.prototype.constructor);//Person
alert(Person.prototype.hasOwnProperty('constructor'));//true
alert(Person.prototype.isPrototypeOf(p));//true
alert(Object.prototype.isPrototypeOf(p));//true
alert(Person.prototype == Object.prototype);//false

到現在，你會發現這和前面《原型鏈的實現原理》中的默認prototype指向Object.prototype有沖突，顯然當時的理論不是很全面。

特別的Object
用心的讀者可能會提出這樣一問題,你這一套理論並不能適用於Object。因為以下的代碼和你上面的理論是沖突的：
復制代碼 代碼如下:
alert(Object.prototype.hasOwnProperty('constructor'));//true
alert(Object.prototype.hasOwnProperty('isPrototypeOf'));//true,如果按上面的理論，這裡應該返回false

真的是這樣嗎？不是！那我們來看一下特殊的Object是如何處理的：

你會發現，這圖的原理和上面一張圖的原理是一樣的。這就能正確解釋Object.prototype.hasOwnProperty('isPrototypeOf')為true!

constructor探究
復制代碼 代碼如下:
function Animal(){}
function Person(){}
var person = new Person();
alert(person.constructor); //Person

根據上一節的內容，你能正確的理解這段代碼的結果嗎？思考後，看一下其內存表示：

這張圖明確有表明了Function構造Animal和Person的過程。同時也顯示了實例person與Person的關系。

再深入一點，代碼如下：
復制代碼 代碼如下:
function Animal(){}
function Person(){}
Person.prototype = new Animal();
var person = new Person();
alert(person.constructor); //Animal

這個時候，person的構造函數成了Animal，怎麼解釋？

注：圖中的虛線表示Person默認的prototype指向(只作參考的作用)。但是我們將Person.prototype指向了new Animal。
此時，Person的prototype指向的是Animal的實例，所以person的constructor為Animal這個構造函數。

結論：constructor的原理非常簡單，就是在對象的原型鏈上尋找constructor屬性。

注:如果你無法正確理解本文內容，請回顧前面章節的內容。