閉包的概念
函數(shù)和其周圍的狀態(tài)的引用捆綁在一起形成閉包;
可以在另一個作用域中調(diào)用一個函數(shù)的內(nèi)部函數(shù)并訪問到該函數(shù)的作用域中的成員。
更詳細的介紹參見MDN
閉包案例分析
題目
某員工工資由基礎(chǔ)工資加績效工資構(gòu)成,但不同等級員工的基礎(chǔ)工資不一樣,一級員工基礎(chǔ)工資12000,二級員工工資15000,績效工資不定。
那么按照面向過程編程思路大部分人會得到函數(shù)如下:
function getSalary(base, performance) {
return base + performance;
}
//不同級別員工的工資獲取調(diào)用方法
getSalary(12000, 2000)
getSalary(15000, 3000)
getSalary(12000, 4000)
getSalary(15000, 5000)
那么上面在計算同一級別員工工資時,他們基數(shù)都一樣,所以為什么不把基數(shù)工資也做為一個固定參數(shù)保留下來使用呢,將上面代碼進行改造
function makeSalary(base) {
return function (performance) {
return base + performance;
}
}
//這里使用高階函數(shù),使代碼更簡潔;同時函數(shù)功能更靈活
let getSalary1 = makeSalary(12000);
let getSalary2 = makeSalary(15000);
console.log('一級員工甲的薪資', getSalary1(3000));
console.log('二級員工乙的薪資', getSalary2(5000));
接下來看看閉包在函數(shù)運行時的體現(xiàn)

result.jpg

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg
PS: 圖5中,如是var定義的變量,那么是保存在global對象中的。
上面截圖是通過斷點一步一步跟蹤,可以看到函數(shù)運行過程中調(diào)用棧和作用域的變化,也體現(xiàn)了閉包機制
注意:
如果一個閉包的函數(shù)定義了一個和外部函數(shù)的某個變量名稱相同的變量,那么這個閉包將無法引用外部函數(shù)的這個變量