淺析Javascript匿名函數與自執行函數_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

淺析Javascript匿名函數與自執行函數_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:16 PM

函數是JavaScript中最靈活的一種對象，這裡只是講解其匿名函數的用途。匿名函數：就是沒有函數名的函數。

函數的定義，大致可分為三種方式：

第一種：這也是最常規的一種

function double(x){ 
return 2 * x; 
}

第二種：這種方法使用了Function建構函數，把參數列表和函數體都當作字串，很不方便，不建議使用。

var double = new Function('x', 'return 2 * x;');

第三種：

var double = function(x) { return 2* x; }

注意「=」右邊的函數就是一個匿名函數，創造完畢函數後，又將該函數賦給了變數square。

匿名函數的建立

第一種方式：就是上面所講的定義square函數，這也是最常用的方式之一。

第二種方式：

(function(x, y){ 
alert(x + y); 
})(2, 3);

這裡建立了一個匿名函數(在第一個括號內)，第二個括號用來呼叫這個匿名函數，並傳入參數。括號是表達式，是表達式就有回傳值，所以可以在後面加一對括號讓它們執行.

自執行的匿名函數

1. 什麼是自執行的匿名函數?

它是指形如這樣的函數: (function {// code})();

2. 疑問

為什麼(function {// code})();可以執行, 而function {// code}();卻會報錯?

3. 分析

(1). 首先, 要清楚兩者的差別:
(function {// code})是表達式, function {// code}是函數宣告.
(2). 其次, js"預編譯"的特點:
js在"預編譯"階段, 會解釋函數宣告, 但卻會忽略表式.
(3). 當js執行到function() {//code}();時, 由於function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){/ /code}, 試圖去執行();, 故會報錯誤;
當js執行到(function {// code})();時, 由於(function {// code})是表達式, js會去對它求解得到返回值, 由於返回值是一個函數, 故而遇到();時, 便會被執行.

另外，函數轉換為表達式的方法不一定要靠分組運算符()，我們還可以用void運算符，~運算符，!運算子…

如：

!function(){ 
alert("另类的匿名函数自执行"); 
}();

匿名函數與閉包

閉包的英文單字是closure，這是JavaScript中非常重要的一部分知識，因為使用閉包可以大幅減少我們的程式碼量，使我們的程式碼看起來更加清晰等等，總之功能十分強大。

閉包的意思：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變量，即使外層函數已經執行完畢（這點涉及JavaScript作用域鏈）。

function checkClosure(){ 
var str = 'rain-man'; 
setTimeout( 
function(){ alert(str); } //这是一个匿名函数 
, 2000); 
} 
checkClosure();

這個例子看起來十分的簡單，仔細分析下它的執行過程還是有許多知識點的：checkClosure函數的執行是瞬間的（也許用時只是0.00001毫秒），在checkClosure的函數體內創建了一個變量str ，在checkClosure執行完畢之後str並沒有被釋放，這是因為setTimeout內的匿名函數存在這對str的引用。待到2秒後函數體內的匿名函數被執行完畢,str才被釋放。

用閉包來最佳化程式碼：

function forTimeout(x, y){ 
alert(x + y); 
} 
function delay(x , y , time){ 
setTimeout('forTimeout(' + x + ',' + y + ')' , time); 
} 
/** 
* 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰 
* function delay(x , y , time){ 
* setTimeout( 
* function(){ 
* forTimeout(x , y) 
* } 
* , time); 
* } 
*/

匿名函數最大的用途是建立閉包（這是JavaScript語言的特性之一），也可以建構命名空間，以減少全域變數的使用。

var oEvent = {}; 
(function(){ 
var addEvent = function(){ /*代码的实现省略了*/ }; 
function removeEvent(){} 

oEvent.addEvent = addEvent; 
oEvent.removeEvent = removeEvent; 
})();

在這段程式碼中函數addEvent和removeEvent都是局部變量，但我們可以透過全域變數oEvent使用它，這大大減少了全域變數的使用，增強了網頁的安全性。

我們要想使用此段程式碼：

oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
var rainman = (function(x , y){ 
return x + y; 
})(2 , 3); 
/** 
* 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。 
* var rainman = function(x , y){ 
* return x + y; 
* }(2 , 3);

在這裡我們建立了一個變數rainman，並透過直接呼叫匿名函數初始化為5，這個小技巧有時十分實用。

var outer = null; 
(function(){ 
var one = 1; 
function inner (){ 
one += 1; 
alert(one); 
} 
outer = inner; 
})(); 
outer(); //2 
outer(); //3 
outer(); //4

這段程式碼中的變數one是一個局部變數（因為它被定義在一個函數之內），因此外部是不可以存取的。但這裡我們建立了inner函數，inner函數是可以存取變數one的；又將全域變數outer引用了inner，所以三次呼叫outer會彈出遞增的結果。

注意

1 閉包允許內層函數引用父函數中的變量，但是該變數是最終值

/** 
* <body> 
* <ul> 
* <li>one</li> 
* <li>two</li> 
* <li>three</li> 
* <li>one</li> 
* </ul> 
*/ 
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
lists[ i ].onmouseover = function(){ 
alert(i); 
}; 
}

你会发现当鼠标移过每一个

元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

解决方法一：

var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
(function(index){ 
lists[ index ].onmouseover = function(){ 
alert(index); 
}; 
})(i); 
}

解决方法二：

var lists = document.getElementsByTagName('li'); 
for(var i = 0, len = lists.length; i < len; i++){ 
lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标 
lists[ i ].onmouseover = function(){ 
alert(this.$$index); 
}; 
}

解决方法三：

function eventListener(list, index){ 
list.onmouseover = function(){ 
alert(index); 
}; 
} 
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
eventListener(lists[ i ] , i); 
}

2 内存泄露

使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。