引用變量優化

引用變量優化

即然我們已經了解了Javascript中變量的通路規則，那我們就來具體分析一下上面代碼中alert(document.body.tagName);這一句的具體執行流程：

由此可見，要在Fn2中通路window對象下的document對象的body屬性的tagName屬性是一個比較漫長的過程(這個問題在IE浏覽器中尤為嚴重）。

<code>1</code>

<code>function</code> <code>Fn1(){</code>

<code>2</code>

<code>    </code><code>function</code> <code>Fn2(document){</code>

<code>3</code>

<code>        </code><code>alert(document.body.tagName);</code><code>//BODY</code>

<code>4</code>

<code>        </code><code>//other code...</code>

<code>5</code>

<code>    </code><code>}</code>

<code>6</code>

<code>    </code><code>Fn2(window.document);</code>

<code>7</code>

<code>}</code>

<code>8</code>

<code>Fn1();</code>

<code>9</code>

<code>//code here</code>

我們直接将document作為參數傳遞給Fn2,來看一下現在的執行流程:

現在友善了，從Fn2 Variable Object可以直接定位到document，引用減少了，效率提高了。

Jquery的政策

Jquery對引用變量的優化也下足了功夫，下面來看一下Jquery的相關代碼：

<code>01</code>

<code>(</code><code>function</code><code>(win, undefined) {</code>

<code>02</code>

<code>    </code><code>var</code> <code>jQuery = </code><code>function</code><code>(selector, context) {</code>

<code>03</code>

<code>        </code><code>return</code> <code>new</code> <code>jQuery.fn.init(selector, context);</code>

<code>04</code>

<code>    </code><code>},</code>

<code>05</code>

<code>    </code><code>document = window.document,</code>

<code>06</code>

<code>    </code><code>push = Array.prototype.push,</code>

<code>07</code>

<code>    </code><code>slice = Array.prototype.slice;</code>

<code>08</code>

<code>09</code>

<code>    </code><code>win.$ = win.jQuery = jQuery;</code>

<code>10</code>

<code>})(window);</code>

首先，Jquery定義了一個全局的匿名函數，這個函數有兩個參數，一個為win,另一個為undefined.這裡說明一點,undefined即不是一個關鍵字，也不是一個保留字，是以它作了參數的變量名是沒有問題的。在調用這個匿名函數時，隻傳遞了一個參數window對象，此時，win指向window對象，undefined變量指象window.undefined(深層次的原理，将在以後的文章中探讨)。然後在匿名函數中，Jquery對常用的全局對象都進行了引用，以後在匿名函數中就可以随意的通路這些變量了。

本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/archive/2011/09/05/2167555.html，如需轉載請自行聯系原作者