【重溫基礎】19.閉包
本文是 重溫基礎 系列文章的第十九篇。 今日感受:將混亂的事情找出之間的聯繫,也是種能力。
本章節複習的是JS中的關於閉包,這個小哥哥呀,看看。
前置知識:
聲明函數兩種方法:
- 函數聲明,存在函數聲明提升,因此可以在函數聲明之前調用(不會報錯)。
fun(); // ok
function fun(){};
- 函數表達式,不存在函數聲明提升,若定義前調用,會報錯(函數還不存在)。
fun(); // error
var fun = function (){};
1.概念
2.1 詞法作用域
這裡先要了解一個概念,詞法作用域:它是靜態的作用域,是書寫變數和塊作用域的作用域。
function f (){
var a = "leo";
function g(){console.log(a)};
g();
}
f(); // "leo"
由於函數g
的作用域中沒有a
這個變數,但是它可以訪問父作用域,並使用父作用域下的變數a
,最後輸出"leo"
。
詞法作用域中使用的域,是變數在代碼中聲明的位置所決定的。嵌套的函數可以訪問在其外部聲明的變數。
2.2 閉包
接下來介紹下閉包概念,閉包是指有權訪問另一個函數作用域中的變數的函數。
閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變數。
創建閉包的常見方式:在一個函數內創建另一個函數。如:
function f (){
var a = "leo";
var g = function (){
console.log(a);
};
return g;// 這裡g就是一個閉包函數,可以訪問到g作用域的變數a
}
var fun = f();
fun(); // "leo"
通過概念可以看出,閉包有以下三個特徵:
- 函數嵌套函數
- 函數內部可以引用函數外部的參數和變數
- 參數和變數不會被垃圾回收機制回收
註:關於內存回收機制,可以查看阮一峰老師的《JavaScript 內存泄漏教程》。
另外,使用閉包有以下好處:
- 將一個變數長期保存在內存中
- 避免全局變數的污染
function f (){
var a = 1;
return function(){
a++;
console.log(a);
}
}
var fun = f();
fun(); // 2
fun(); // 3
因為垃圾回收機制沒有回收,所以每次調用fun()
都會返回新的值。
- 私有化成員,使得外部不能訪問
function f (){
var a = 1;
function f1 (){
a++;
console.log(a);
};
function f2 (){
a++;
console.log(a);
};
return {g1:f1, g2:f2};
};
var fun = f();
fun.g1(); // 2
fun.g2(); // 3
2.易錯點
2.1 引用的變數發生變化
function f (){
var a = [];
for(var i = 0; i<10; i++){
a[i] = function(){
console.log(i);
}
}
return a;
}
var fun = f();
fun[0](); // 10
fun[1](); // 10
// ...
fun[10](); // 10
原本照我們的想法,fun
方法中每個元素上的方法執行的結果應該是1,2,3,...,10
,而實際上,每個返回都是10
,因為每個閉包函數引用的變數i
是f
執行環境下的變數i
,循環結束後,i
已經變成10
,所以都會返回10
。
function f (){
var a = [];
for(var i = 0; i<10; i++){
a[i] = function(index){
return function(){
console.log(index);
// 此時的index,是父函數作用域的index,
// 數組的10個函數對象,每個對象的執行環境下的index都不同
}
}(i);
};
return a;
};
var fun = f();
fun[0](); // 0
fun[1](); // 1
// ...
fun[10](); // 10
2.2 this指向問題
var obj = {
name : "leo",
f : function(){
return function(){
console.log(this.name);
}
}
}
obj.f()(); // undefined
由於裡面的閉包函數是在window
作用域下執行,因此this
指向window
。
2.3 內存泄漏
當我們在閉包內引用父作用域的變數,會使得變數無法被回收。
function f (){
var a = document.getElementById("leo");
a.onclick = function(){console.log(a.id)};
}
這樣做的話,變數a
會一直存在無法釋放,類似的變數越來越多的話,很容易引起內存泄漏。我們可以這麼解決:
function f (){
var a = document.getElementById("leo");
var id = a.id;
a.onclick = function(){};
a = null; //主動釋放變數a
}
通過把變數賦值成null
來主動釋放掉。
3.案例
3.1 經典案例——定時器和閉包
代碼如下:
for(var i = 0 ; i<10; i++){
setTimeout(function(){
console.log(i);
},100);
}
不出所料,返回的不是我們想要的0,1,2,3,...,9
,而是10個10
。
for循環
的時候定時器setTimeout
被安排到任務隊列中排隊等候執行,而在等待過程中,for循環
已經在執行,等到setTimeout
要執行的時候,for循環
已經執行完成,i
的值就是10
,所以就列印了10個10
。 解決方法 :
- 1.使用ES6新增的
let
。
把for循環
中的var
替換成let
。
- 2.使用閉包
for(var i = 0; i<10 ; i++){
(function(i){
setTimeout(function(){
console.log(i);
}, i*100);
})(i);
}
3.2 使用閉包解決遞歸調用問題
function f(num){
return num >1 ? num*f(num-1) : 1;
}
var fun = f;
f = null;
fun(4) // 報錯 ,因為最好是return num* arguments.callee(num-1),arguments.callee指向當前執行函數,但是在嚴格模式下不能使用該屬性也會報錯,所以藉助閉包來實現
這裡可以使用return num >1 ? num* arguments.callee(num-1) : 1;
,因為arguments.callee
指向當前執行函數,但是在嚴格模式下不能使用,也會報錯,所以這裡需要使用閉包來實現。
function fun = (function f(num){
return num >1 ? num*f(num-1) : 1;
})
這樣做,實際上起作用的是閉包函數f
,而不是外面的fun
。
3.3 使用閉包模仿塊級作用域
ES6之前,使用var
聲明變數會有變數提升問題:
for(var i = 0 ; i<10; i++){console.log(i)};
console.log(i); // 變數提升 返回10
為了避免這個問題,我們這樣使用閉包(匿名自執行函數):
(function(){
for(var i = 0 ; i<10; i++){console.log(i)};
})()
console.log(i); // undefined
我們創建了一個匿名的函數,並立即執行它,由於外部無法引用它內部的變數,因此在函數執行完後會立刻釋放資源,關鍵是不污染全局對象。這裡i
隨著閉包函數的結束,執行環境銷毀,變數回收。
let
和const
來聲明。
參考文章:
- MDN 閉包
- 《JavaScript高級程序設計》
本部分內容到這結束