學習前端的童鞋,通常會聽到閉包這個名詞,不了解的童鞋會覺得這貨真高大上。實際上 閉包并沒有這么高深莫測,小白也可以理解,這篇blog就以我一個前端小白的視角來解讀一下什么是閉包?閉包的用處是什么?
在MDN上,閉包的釋義是【閉包是一個函數和聲明該函數的詞法環境的組合】。小白說我看不懂啊 ,沒錯,所以上代碼:
function init() {
let name = "Mozilla";
// name 是一個被init創建的局部變量
function displayName() {
// displayName() 是一個內部函數,
console.log(`name = ${name}`);
// 一個閉包使用在父函數中聲明的變量
}
displayName();
}
init();
在代碼中,displayName這個函數調用了init函數中的局部變量name,displayName本身并沒有聲明過name這個變量,而是直接調用了自己外部的變量。
總結來說,閉包可以理解為函數與函數可以訪問的到變量的組合。
那么閉包到底有什么用呢?
閉包常常用來間接訪問一個變量。還是回到剛才那段代碼;
displayName直接調用了外部變量name,這是由js作用域造成的,并不是我們故意使用閉包,而是我們在日常寫代碼中經常書寫了滿足閉包定義的代碼,并且這樣方便使用。
閉包還可以用來模擬類似java中的私有函數
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */
這段代碼里Counter創建了一個私有變量privateCounter,一個私有函數changeBy,調用這兩個私有項只能通過調用Counter.increment,Counter.decrement 和 Counter.value三個函數來實現,外部的其他函數不能使用。
以上是我對閉包的理解,如果有錯誤 歡迎指出~