|
|
我們在JavaScript中編寫代碼，對于定義函數的語句：
function foo(){ // TODO: . . . return x;}可以說是在熟悉不過了。當然除了這種定義函數的方法，我們還有另外幾種方法也能定義函數：
var foo = function(){ // TODO: . . . return x;}var foo = new Function('{/*todo*/return x;}'); 后兩種方法定義的JavaScript函數，在調用起來和第一種沒有任何效果上的區別。
不過由于JavaScript是解釋性語言，當我們定義一個函數的時候，解析引擎生成一個Function對象實例，然后把函數內容保存下來。所以每執行一次函數定義語句，就會生成一個函數。而不像編譯語言，一個函數編譯一次后就被任何語句調用。啊？難道JavaScript不能調用定義好的函數？不是這個意思了，當我們在制作JavaScript控件時，如果動態輸出DHTML來作為控件的內容，就容易出現這樣的問題。比如我們在一個HTML對象生成過程中，使用了inline方式定義的函數，那么這個元素生成幾次，那個函數也就要同時生成幾次。
function TestObject.prototype.Render(doc, id) { var span = doc.createElement('SPAN'); span.Object = this; this.m_Element = span; if ( id == "NamedMethod" ) { span.onclick = asdf; } else { span.onclick = function() { var asdf01 = ['a', 's', 'd', 'f']; var asdf02 = ['a', 's', 'd', 'f']; var asdf03 = ['a', 's', 'd', 'f']; var asdf04 = ['a', 's', 'd', 'f']; var asdf05 = ['a', 's', 'd', 'f']; var asdf06 = ['a', 's', 'd', 'f']; var asdf07 = ['a', 's', 'd', 'f']; var asdf08 = ['a', 's', 'd', 'f']; var asdf09 = ['a', 's', 'd', 'f']; var asdf10 = ['a', 's', 'd', 'f']; var asdf11 = ['a', 's', 'd', 'f']; var asdf12 = ['a', 's', 'd', 'f']; }; } span.Name = this.m_Description; span.innerText = this.m_Name; span.style.display = 'block'; return span; }函數span.onclick = function()中的內容是用來占位置的，這樣inline方式定義函數，每次Render()都就會生成一個新的函數對象。使用inline方式有什么不好呢？當對象實例多了的時候，會很明顯的浪費內存空間呀，試驗數據如下：
| Normal Method | Inline Method | |
|---|---|---|
| Initialized | 27.4 M | 27.4 M |
| Rendered | 33.4 M | 35.2 M |
// IE消耗的內存數量（PM+VM）
單看絕對內存消耗差別不大，可是如果看相對內存消耗：(35.2-33.4)/(33.4-27.4) = 30% !!!，還是很可觀的了，而且如果方法本省越大，inline時冗余數據就越多。
附測試代碼：
<html><head> <title>JScript Function Spending</title> <meta name="author" content="birdshome@博客園" /> </head><body onunload="ReleaseElements()"> <button id="NamedMethod" onclick="GenerateObjects(this)"> Append Normal Elements</button> <button id="AnonymousMethod" onclick="GenerateObjects(this)"> Append Inline Elements</button> <div id="container"> </div>
<script language="Javascript">
function GenerateObjects(elmt)
{ var room = document.getElementById('container'); for ( var i=0 ; i < 1000 ; ++i ) { var obj = new TestObject('__Object__' + i); room.appendChild(obj.Render(document, elmt.id));
} }function TestObject(name){ this.m_Name = name; this.m_Description = ''; this.m_Element = null; this.toString = function() { return '[class TestObject]'; }}function TestObject.prototype.Render(doc, id){ var span = doc.createElement('SPAN'); span.Object = this; this.m_Element = span; if ( id == "NamedMethod" ) { span.onclick = asdf; } else { span.onclick = function() { var asdf01 = ['a', 's', 'd', 'f']; var asdf02 = ['a', 's', 'd', 'f']; var asdf03 = ['a', 's', 'd', 'f']; var asdf04 = ['a', 's', 'd', 'f']; var asdf05 = ['a', 's', 'd', 'f']; var asdf06 = ['a', 's', 'd', 'f']; var asdf07 = ['a', 's', 'd', 'f']; var asdf08 = ['a', 's', 'd', 'f']; var asdf09 = ['a', 's', 'd', 'f']; var asdf10 = ['a', 's', 'd', 'f']; var asdf11 = ['a', 's', 'd', 'f']; var asdf12 = ['a', 's', 'd', 'f']; }; } span.Name = this.m_Description; span.innerText = this.m_Name; span.style.display = 'block'; return span;}function asdf(){ var asdf01 = ['a', 's', 'd', 'f']; var asdf02 = ['a', 's', 'd', 'f']; var asdf03 = ['a', 's', 'd', 'f']; var asdf04 = ['a', 's', 'd', 'f']; var asdf05 = ['a', 's', 'd', 'f']; var asdf06 = ['a', 's', 'd', 'f']; var asdf07 = ['a', 's', 'd', 'f']; var asdf08 = ['a', 's', 'd', 'f']; var asdf09 = ['a', 's', 'd', 'f']; var asdf10 = ['a', 's', 'd', 'f']; var asdf11 = ['a', 's', 'd', 'f']; var asdf12 = ['a', 's', 'd', 'f'];
}</script> <script language="Javascript">function ReleaseElements(){ var room = document.getElementById('container'); var spans = room.all.tags('SPAN'); for ( var i=0 ; i < spans.length ; ++i ) { spans[i].Object = ''; }} </script></body></html>JavaScript技術：在JavaScript中使用inline函數的問題，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
