一個基本的面試問題：可以解釋一下什么是閉包嗎？
面對面試問題，我們總是如臨大敵。
令人憎惡的面試問題
之前，我參加了一個面試，其中工程團隊要求我解釋閉包的含義。當然，這不是我第一次被問到這個術語，但老實說，我還是有些慌張。
眾所周知，閉包這個術語因難以定義而臭名昭著。
面試后，我對自己仍恐懼這個問題感到沮喪。我下定決心，要徹底弄明白閉包的含義。本篇博客將帶領大家來看看我的經歷。
匿名函數和IIFE不是閉包
文章開始前，我先闡明不會涉及的內容。在ES6之前的時代，閉包的常見用例是用于模仿私有方法的匿名函數/ IIFE(立即調用函數表達式)，這些方法不是JavaScript所特有的。
通過在ES6中引入let 、const的引入和以及模塊，很大程度上解決了var 的局限性所導致的這種情況和其他類似的用例。IIFE包括閉包，但不是閉包。
匿名函數也不是閉包。
- anonymousFunc !== closure&& IIFE !== closure // true
學習這些用例很重要。如果你理解過去使用閉包的方式，就能理解現在如何使用閉包。
更別說還有許多ES5遺留代碼。但是這不是今天要講述的內容。既然已經說明，那一起來深入了解吧。
閉包的概念
來源：Pexels
在計算機科學中，閉包是一個有自己環境的函數，并且在該環境中至少有一個變量。MDN指出：
“在JavaScript中，每當創建一個函數，閉包便產生。”
因此，函數和閉包是緊密聯系的。每創建一個函數，都在構建一個閉包，這意味著你可能一直在創建它們，只是自己沒有意識到而已。MDN繼續指出：
“閉包是將函數與其引用的周邊狀態綁定在一起形成(封裝)的組合”，這將我們帶到了作用域。
它與作用域有什么關系?
從前面的引用中更加深入地去探究周圍狀態這個術語。在JavaScript函數中，周圍狀態稱為作用域。
創建JS文件時，環境就是程序的全局作用域。創建函數時，它有自己的作用域。
可以把全局作用域視為國家。一個國家有許多城市，每個城市都封閉在自己的邊界線內。同樣地，在程序的特定部分中，我們會發現包含在局部作用域內的對象。
Javascript有兩個局部作用域：函數作用域和塊級作用域。
- functionencourage() {
- const positivity ='You got this!';
- }
- // positivity has function scope
- {
- const negativity ='I don't got this.';
- }
- // negativity has block scope
函數存在于并能訪問全局作用域，但是在函數內聲明的任何內容僅存在于并只能訪問函數作用域，而非全局作用域。
同樣地，如果在代碼的任何位置用大括號括起一個變量，那么該變量也將被封閉，屬于塊級作用域。
閉包和作用域
將閉包視為封閉函數的傳感門可能更容易理解。例如，創建新函數時，該函數的閉包到處查看并記下它的環境，即作用域。
- function highestBoxOffice() {
- const context = “The highest grossingmovie of all time is “;
- return context + “Avengers:Endgame”;
- }
即使函數沒有子函數，它仍然有閉包。閉包并不僅存在于嵌套函數中。在變量context的案例中，該函數的閉包到處察看并發現其中存在變量。
嵌套函數中的閉包
來源：Pexels
如果創建一個嵌套函數，該函數的閉包發現它所在的父函數的墻壁。父函數的作用域是嵌套函數的外部作用域，包括父函數中的變量。
- functionhighestBoxOffice(movies) {
- returnfunctiongenreTopGross(genre) {
- returnMath.Max(…movies.genre.boxOffice)
- }
- }
這是閉包真正發揮作用的地方。函數 genreTopGross()含有閉包。其閉包向內看，發現其內部作用域，包含returnMath.Max(…movies.genre.boxOffice)。
它也向外看，發現其外部作用域，標志著它在函數highestBoxOffice()中。它還可以查看并訪問傳遞到其父函數的所有參數。現在來傳遞一個參數。
- functionhighestBoxOffice(movies) {
- returnfunctiongenreTopGross(genre) {
- returnMath.Max(…movies[genre].boxOffice)
- }
- }
- const topGrossing =highestBoxOffice(domesticMoviesObj)
如你所見，已經聲明了一個新變量topGrossing()并且賦予它highestBoxOffice(domesticMoviesObj)的值。
目前，topGrossing是未定義的，但是現在采取下一步：
- functionhighestBoxOffice(movies) {
- returnfunctiongenreTopGross(genre) {
- returnMath.Max(…movies[genre].boxOffice)
- }
- }
- const topGrossing =highestBoxOffice(domesticMoviesObj)
- topGrossing("Romantic Comedy")// "Pretty Woman"
引用topGrossing()，并將“Romantic Comedy”作為參數進行傳遞。現在閉包的用處展現出來了!
. genreTopGross()函數的內部作用域需要movies參數，該參數位于domesticMoviesObj參數的外部作用域，需要通過閉包來進入。
這使代碼成功執行并返回正在尋找的值。
閉包和作用域鏈
在JavaScript中，每個變量在首次創建時，都屬于一個特定的詞法作用域。
在書面程序內，每個變量的作用域都通過作用域鏈連接起來，全局作用域總是位于該鏈的頂端。
JavaScript編譯器遍歷這條鏈。然而，該編譯器就像汽車，僅逆向運行，從不正向運行。
使用變量時，編譯器返回到作用域鏈，直到找出該變量的入口。
因此，genreTopGross()函數使用movies變量時，JavaScript沒有在genreTopGross()作用域中發現 movies。所以，JavaScript沿著在作用域鏈中向上移動，直到找到傳遞到highestBoxOffice()的movies。
這與閉包有什么關系呢?
閉包只提供從內部到外部作用域的訪問，而不能提供從外部到內部作用域的訪問。
因此，如果在幾個嵌套函數中聲明并定義一個變量，卻在父函數的外部作用域中使用，編譯器將返回一個未定義的錯誤。記住，汽車只會逆向行駛。
結論
來源：Pexels
如你所見，理解閉包需要對函數、作用域以及作用域鏈有著扎實深入的理解，這正是面試者提問時所期待的。
本文只解釋了閉包的定義，但并未涉及它們的大量用例。如果您理解了這一點，應該能更深入地研究這些用例，而不會感到完全迷失。
若沒有其他問題，希望本文能夠提供簡單的基礎或簡明的概述，使大家不再對閉包感到驚慌。
現在，去拿下面試吧!哦耶~
