Javascript new關鍵字的用法

本身是Javascript菜鳥，以下是前幾天學習Javascript的旅程心得，希望對和我一樣的入門者有點用，也希望高手批評指正。

（接上）先看張對老手不新鮮但對菜鳥很有趣的圖：

　　　　

#What the heck is that? 簡直是luan lun。

new

拋開上面的圖，先看看上篇文章留下的第二個問題，讓我們在建構器的函數體內加點東西，看看會發生什麼事。

<p><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff">function</span><span style="COLOR: #000000"> A(){</span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">.p </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #000000">1</span><span style="COLOR: #000000">}<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> a </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> A()</span></p>

會得到如下結果：

　　　　

為什麼用new關鍵字建構出來的a，會得到p這個屬性？ new A()這行程式碼做了什麼事？根據上篇文章中Function的創建過程第4步，A這個物件會有一個Construct屬性（注意不是constructor，Consturct是ECMAScript標準裡的屬性，好像對外不可見），該屬性的值是個函數，new A()就是會呼叫A的這個Construct函數。那麼這個Construct函數會做些啥呢？

　　1， 建立一個object，假設叫x。

　　2， 如果A.prototype是個object（一般都是），則把A.prototype賦給x.proto；否則（不常見），請大老闆Object出馬，把Object.prototype賦給x.proto。

　　3， 呼叫A.call(x)，第一個參數傳入我們剛剛建立的x。這就妥了，A的函數體裡this.p = 1，這個this，就成了x。因此x就有了p這個屬性，並且x.p = 1。

　　4， 一般情況下，就回x了，這時a就是x了。但也有特殊情況，如果A的函數體裡回傳的東西，它的型別(typeof)是個object。那麼a就不是指向x了，而是指向A函數回傳的東西。

偽代碼如下：

<p><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> x </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Object(); </span><span style="COLOR: #008000">//</span><span style="COLOR: #008000">事实上不一定用new来创建，我也不清楚。</span><span style="COLOR: #008000"><br></span><span style="COLOR: #000000">x.proto </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> A.prototype <br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> result </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> A.call(x)<br></span><span style="COLOR: #0000ff">if</span><span style="COLOR: #000000"> (</span><span style="COLOR: #0000ff">typeof</span><span style="COLOR: #000000">(result) </span><span style="COLOR: #000000">==</span><span style="COLOR: #000000"> </span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">object</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">){<br></span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000"> result;<br>}<br></span><span style="COLOR: #0000ff">return</span><span style="COLOR: #000000"> x;</span></p>

在我們的例子裡，A函數回傳undefined（因為沒有return字眼），所以a就是x。但我們舉個例子，驗證下上面第4步裡的特殊情況：

　　　　

果然。

 

物件的constructor屬性

#再看看上篇文章留下的第一個問題

<p>function Base(){}<br>Base.prototype.a = 1<br>var base = new Base();<br><br>function Derived(){}<br>Derived.prototype = base;<br>var d = new Derived()</p>

執行完上面的程式碼，mybase.constructor很容易猜到是Base，那d.constructor呢？是Derived嗎？

　　　　　

不對，也是Base，怎麼回事？很簡單，複習下上篇的內容就知道：由於d本身沒有constructor屬性，所以會到d.proto上去找，d.proto就是Derived.prototype，也就是base這個對象，base也沒constructor屬性，於是再往上，到base.proto找，也就是Base.prototype。它是有constructor屬性的，就是Base本身。事實上，就我目前所知，只有構造器（function類型的object）的prototype，才真正自己擁有constructor屬性的對象，且「構造器.prototype.constructor === 構造器」。

Instanceof

那麼，instanceof怎麼樣呢？

　　　　

從圖中可以看出，d是Base、Derived和Object的實例。很合理，但這是怎麼判斷的呢？是這樣的：對於x instanceof constructor的表達式，如果constructor.prototype在x的原型(proto)鏈裡，那麼就回傳true。顯然，d的proto鏈往上依序是：Derived.prototype, Base.prototype, Object.prototype，得到圖中結果就毫無疑問了。所以，instanceof跟物件的constructor屬性無關。

 

Function and Object

#最後解答文章開頭的圖。

Function和Object本身也是function類型的對象，因此可以說都是Function()建構出來的東西（自己建構自己，我不知道具體是不是這樣，但就這麼認為，挺合理的。 )

也就是說，可以設想如下程式碼：

<p><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> Function </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Function()<br></span><span style="COLOR: #0000ff">var</span><span style="COLOR: #000000"> Object </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Function() </span></p>

根據上篇文章的規律，會有Function.proto === Function.prototype，以及Object.proto === Function .prototype，驗證一下：

　　　　

#

Function instanceof Object，這是顯然為true的，萬物歸Object管，Function的proto鏈依序指向：Function.prototype，Object.prototype。

Object instanceof Function，因為Function.prototype在Object的proto鏈中，所以也是true。

以上是Javascript new關鍵字的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！