淺析Javascript匿名函數與自執行函數（閉包）

時間 2019-12-21

標籤淺析 javascript 匿名函數執行閉包欄目 JavaScript 简体版

原文原文鏈接

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

函數的定義，大體可分爲三種方式：安全

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

?函數

1優化

2this

3spa

function double(x){.net

return 2 * x;code

}htm

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

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

第三種：

1	`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);

};

}

你會發現當鼠標移過每個<li>元素時，老是彈出4，而不是咱們期待的元素下標。這是爲何呢？注意事項裏已經講了（最終值）。顯然這種解釋過於簡單，當mouseover事件調用監聽函數時，首先在匿名函數（ function(){ alert(i); }）內部查找是否認義了 i，結果是沒有定義；所以它會向上查找，查找結果是已經定義了，而且i的值是4（循環後的i值）；因此，最終每次彈出的都是4。

解決方法一：