JavaScript之閉包問題以及立即執行函式
今天我將會來淺談一下關於JavaScript的立即執行函式以及閉包問題。
首先我們先要了解一下關於立即執行函式:
( function(){…} )()和( function (){…} () )是兩種javascript立即執行函式的常見寫法,最初我以為是一個括號包裹匿名函式,再在後面加個括號呼叫函式,最後達到函式定義後立即執行的目的,後來發現加括號的原因並非如此。要理解立即執行函式,需要先理解一些函式的基本概念。
函式宣告、函式表示式、匿名函式
函式宣告:function fnName () {…};
使用function關鍵字宣告一個函式,再指定一個函式名,叫函式宣告。
函式表示式 var fnName = function (){…};
使用function關鍵字宣告一個函式,但未給函式命名,最後將匿名函式賦予一個變數,叫函式表示式,這是最常見的函式表示式語法形式。
匿名函式:function () {};
使用function關鍵字宣告一個函式,但未給函式命名,所以叫匿名函式,匿名函式屬於函式表示式,匿名函式有很多作用,賦予一個變數則建立函式,賦予一個事件則成為事件處理程式或建立閉包等等。
函式宣告和函式表示式不同之處在於:
一、Javascript引擎在解析javascript程式碼時會‘函式宣告升’(Function declaration Hoisting)當前執行環境(作用域)上的函式宣告,而函式表示式必須等到Javascirtp引擎執行到它所在行時,才會從上而下一行一行地解析函式表示式;
二、函式表示式後面可以加括號立即呼叫該函式,函式宣告不可以,只能以fnName()形式呼叫 。以下是兩者差別的兩個例子。
fnName();
function fnName(){
...
}
//正常,因為‘提升'了函式宣告,函式呼叫可在函式宣告之前
fnName();
var fnName=function(){
...
}
//報錯,變數fnName還未儲存對函式的引用,函式呼叫必須在函式表示式之後
在理解了一些函式基本概念後,回頭看看( function(){…} )()和( function (){…} () )這兩種立即執行函式的寫法,最初我以為是一個括號包裹匿名函式,並後面加個括號立即呼叫函式,當時不知道為什麼要加括號,後來明白,要在函式體後面加括號就能立即呼叫,則這個函式必須是函式表示式,不能是函式宣告。
(function(a){
console.log(a); //firebug輸出123,使用()運算子
})(123);
閉包:
閉包,簡單來說就是函式巢狀函式,或者說定義在一個函式內部的函式,它是將函式內部和函式外部連線起來的一座橋樑。
閉包可以用在許多地方。它的最大用處有兩個,一個是可以讀取函式內部的變數,另一個就是讓這些變數的值始終保持在記憶體中。
例1:請看下面程式碼:
//閉包概念:函式巢狀函式
function t2() {
var b=100;
function t3() {
console.log(b);
}
return t3();
}
t2();
執行結果為:
在這段程式碼中,在函式t2內部宣告的變數b本來是一個區域性變數,為什麼在呼叫時t3函式能打印出b變數的值呢?原因如下:
在上面的程式碼中,函式t3就被包括在函式t2內部,這時t2內部的所有區域性變數,對t3都是可見的。但是反過來就不行,t3內部的區域性變數,對t2就是不可見的。這就是Javascript語言特有的”鏈式作用域”結構(chain scope),子物件會一級一級地向上尋找所有父物件的變數。所以,父物件的所有變數,對子物件都是可見的,反之則不成立。
這就是閉包的其中一個作用,可以讀取函式內部的一個變數。
例2:請看下面程式碼:
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在這段程式碼中,result實際上就是閉包f2函式。它一共運行了兩次,第一次的值是999,第二次的值是1000。這證明了,函式f1中的區域性變數n一直儲存在記憶體中,並沒有在f1呼叫後被自動清除。
為什麼會這樣呢?原因就在於f1是f2的父函式,而f2被賦給了一個全域性變數,這導致f2始終在記憶體中,而f2的存在依賴於f1,因此f1也始終在記憶體中,不會在呼叫結束後,被垃圾回收機制(garbage collection)回收。
這段程式碼中另一個值得注意的地方,就是”nAdd=function(){n+=1}”這一行,首先在nAdd前面沒有使用var關鍵字,因此nAdd是一個全域性變數,而不是區域性變數。其次,nAdd的值是一個匿名函式(anonymous function),而這個匿名函式本身也是一個閉包,所以nAdd相當於是一個setter,可以在函式外部對函式內部的區域性變數進行操作。
為了深入理解以上所講內容,請看以下程式碼段:
// 這個程式碼是錯誤的,因為變數i從來就沒被locked住
// 相反,當迴圈執行以後,我們在點選的時候i 才獲得數值
// 因為這個時候i操真正獲得值
// 所以說無論點選那個連線,最終顯示的都是I am link #10(如果有10個a元素的話)
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
}, 'false');
}
// 這個是可以用的,因為他在自執行函式表示式閉包內部
// i的值作為locked的索引存在,在迴圈執行結束以後,儘管最後i的值變成了a元素總數(例如10)
// 但閉包內部的lockedInIndex值是沒有改變,因為他已經執行完畢了
// 所以當點選連線的時候,結果是正確的
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
(function (lockedInIndex) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + lockedInIndex);
}, 'false');
})(i);
}
var elem = document.getElementsByTagName('div'); // 如果頁面上有5個div
for(var i = 0; i < elem.length; i++) {
elem[i].onclick = function () {
alert(i); // 總是5
};
}
上方是一個很常見閉包問題,點選任何div彈出的值總是5,因為當你觸發點選事件的時候i的值早已是5,可以用下面方式解決:
var elem = document.getElementsByTagName('div'); // 如果頁面上有5個div
for(var i = 0; i < elem.length; i++) {
(function (w) {
elem[w].onclick = function () {
alert(w); // 依次為0,1,2,3,4
};
})(i);
}