JavaScript 中的閉包（Closures） – JavaScript 完全手冊（2018版）

摘要： 小編推薦： 掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。 注：本文為 《 JavaScript 完全手冊（2018版） 》第19節，你可以檢視該手冊的完整目錄。 ...

小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。

注：本文為 《 JavaScript 完全手冊（2018版） 》第19節，你可以檢視該手冊的完整目錄。

這是對閉包主題的一個簡單介紹，閉包是理解 JavaScript 函式如何工作的關鍵。

如果你曾經用 JavaScript 編寫過函式，那麼你已經使用了閉包。

這是一個需要理解的關鍵主題，它會影響你所做的事情。

當一個函式執行時，它執行在定義它時的作用域中，而不是在執行它時所處的狀態。

作用域基本上可以理解為可見的變數集合。

函式會記住其詞法作用域，並且能夠訪問在父作用域中定義的變數。

簡而言之，函式有一整套可以訪問的變數。

讓我立即舉一個例子來驗證這一點。

const bark = dog => {
const say = `${dog} barked!`
;(() => console.log(say))()
}

bark(`Roger`)

按照預期在控制檯中列印 Roger barked!

如果您想要返回操作，該怎麼辦呢：

const prepareBark = dog => {
const say = `${dog} barked!`
return () => console.log(say)
}

const bark = prepareBark(`Roger`)

bark()

這段程式碼還是在控制檯中列印 Roger barked!

讓我們做最後一個例子，它將 prepareBark 重用於兩隻不同的 dog：

const prepareBark = dog => {
const say = `${dog} barked!`
return () => {
console.log(say)
}
}

const rogerBark = prepareBark(`Roger`)
const sydBark = prepareBark(`Syd`)

rogerBark()
sydBark()

列印結果：

Roger barked!
Syd barked!

如您所見，變數 say 的狀態與從 prepareBark() 返回的函式相關聯。

還要注意我們第二次呼叫 prepareBark() 時重新定義一個新的 say 變數，但這不會影響第一個 prepareBark() 作用域的狀態。

這就是閉包的工作原理：返回的函式將保持作用域裡的初始狀態。

瞭解閉包更多知識請閱讀： JavaScript 核心概念之作用域和閉包