一、閉包
由於在Javascript語言中,只有函數內部的子函數才能讀取局部變量,閉包就是能夠讀取其他函數內部變量的函數。所以,在本質上,閉包就是將函數內部和函數外部連接起來的一座橋梁。
比如下面的代碼:
function f1() { var n = 999; function f2() { console.log(n); } return f2; } var result = f1(); result();//999
函數f2就被包括在函數f1內部,這時f1內部的所有局部變量,對f2都是可見的。但是反過來就不行,f2內部的局部變量,對f1就是不可見的。
這就是Javascript語言特有的"鏈式作用域"結構(chain scope),子對象會一級一級地向上尋找所有父對象的變量。所以,父對象的所有變量,對子對象都是可見的,反之則不成立。
既然f2可以讀取f1中的局部變量,那么只要把f2作為返回值,就可以在f1外部讀取它的內部變量了。
二、閉包的使用場景
1.setTimeout
原生的setTimeout傳遞的第一個函數不能帶參數,通過閉包可以實現傳參效果。
function f1(a) { function f2() { console.log(a); } return f2; } var fun = f1(1); setTimeout(fun,1000);//一秒之后打印出1
2.回調
定義行為,然后把它關聯到某個用戶事件上(點擊或者按鍵)。代碼通常會作為一個回調(事件觸發時調用的函數)綁定到事件。
比如下面這段代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<a href="#" id="size-12">12</a>
<a href="#" id="size-20">20</a>
<a href="#" id="size-30">30</a>
<script type="text/javascript">
function changeSize(size){
return function(){
document.body.style.fontSize = size + 'px';
};
}
var size12 = changeSize(12);
var size14 = changeSize(20);
var size16 = changeSize(30);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-20').onclick = size14;
document.getElementById('size-30').onclick = size16;
</script>
</body>
</html>
當點擊數字時,字體也會變成相應的大小。
3.函數防抖
在事件被觸發n秒后再執行回調,如果在這n秒內又被觸發,則重新計時。
實現的關鍵就在於setTimeOut這個函數,由於還需要一個變量來保存計時,考慮維護全局純凈,可以借助閉包來實現。
如下代碼所示:
/* * fn [function] 需要防抖的函數 * delay [number] 毫秒,防抖期限值 */ function debounce(fn,delay){ let timer = null
//借助閉包 return function() { if(timer){ clearTimeout(timer) //進入該分支語句,說明當前正在一個計時過程中,並且又觸發了相同事件。所以要取消當前的計時,重新開始計時 timer = setTimeOut(fn,delay) }else{ timer = setTimeOut(fn,delay) // 進入該分支說明當前並沒有在計時,那么就開始一個計時 } } }
4.封裝私有變量
如下面代碼:用js創建一個計數器
方法1:
function f1() {
var sum = 0;
var obj = {
inc:function () {
sum++;
return sum;
}
};
return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3
在返回的對象中,實現了一個閉包,該閉包攜帶了局部變量x,並且,從外部代碼根本無法訪問到變量x。
方法2:
function f1() { var sum = 0; function f2() { sum++; return f2; } f2.valueOf = function () { return sum; }; f2.toString = function () { return sum+''; }; return f2; } //執行函數f1,返回的是函數f2 console.log(+f1());//0 console.log(+f1()())//1 console.log(+f1()()())//2
所有js數據類型都擁有valueOf和toString這兩個方法,null除外
valueOf()方法:返回指定對象的原始值。
toString()方法:返回對象的字符串表示。
在數值運算中,優先調用了valueOf,字符串運算中,優先調用toString
sum+' '是一個字符串類型的數據
