動畫：什麼是閉包？

寫在前邊

正在學習初學前端小夥伴，會感受 HTML 和 CSS 太簡單了，沒什麼挑戰性。那是你沒有學過 JS ，JS 中太多的概念初期學習的時候也是很懵逼的，好比 this、原型鏈、閉包等，便是重點，又是難點。可是你懂了以後會發現很簡單，很好理解。

由於小鹿暑假去面試，每場面試基本都是必問的，不只要知道理論，還要問你在實際項目中的實踐，這部份內容不少人經常在實戰中忽略掉。

今天的內容，就是 JS 中的一個重點，也是面試的必考點，項目中也常用到，那就是有請咱們神聖的"閉包"出場。

你可能沒據說過這個名詞，也可能據說了可是不理解它，不知道怎麼使用它，那我們從零和小鹿用動畫把「閉包」的概念弄的明明白白。

思惟導圖

一、什麼是閉包？

學習一個陌生的概念，咱們首先要去明白是什麼？也就是閉包是什麼？要想徹底掌握閉包，必定要清楚函數做用域、內存回收機制、做用域繼承。咱們就簡單講一下這幾個概念。

1.1 函數做用域

做用域的概念，形象描述的話，能夠認爲它是一個封閉的空間，只容許在這個封閉的空間內進行一些操做，也將這個封閉空間稱爲私有做用域。在 JS 中，一個函數的執行就會在內存中建立一個私有做用域——封閉的空間。

好比在函數中定義一個變量，只能在函數這個私有做用域中使用（也就是封閉空間）。只要超出了這個做用域，就找不到該變量了。

並且函數執行完成後，這個私有做用域（封閉的空間）就會銷燬。有一種狀況它是不會銷燬的，那就是「閉包」，後邊會講到。

1.2 內存回收機制

內存回收機制就是不在用到的內存，咱們系統就自動進行回收從而清理出空間供其餘程序使用。那回收的規則是什麼？

內部函數引用着外部的函數的變量，外部的函數儘管執行完畢，做用域也不會銷燬。從而造成了一種不銷燬的私有做用域。

某一變量或者對象被引用着，所以在回收的時候不會釋放它，由於被引用表明着被使用，回收器不會對正在引用的變量或對象回收的。

1.3 做用域繼承

所謂的做用域繼承，就像是兒子能夠繼承父親的財產同樣。好比小鹿這裏有一個大的盒子做爲一個父級的做用域，而後在這個大的盒子裏邊放一個小的盒子，做爲子做用域。咱們規定能夠在小盒子中獲取到大盒子中的東西，大盒子不能獲取小盒子裏的東西就稱爲做用域繼承。

在 JS 中，道理是同樣的，在一個函數裏邊咱們再聲明一個函數，內部函數能夠訪問外部函數做用域的變量，而外部的函數不能獲取到內部函數的做用域變量。

那好，上邊的這幾個概念理解了以後，什麼是閉包對你來講已經不是什麼問題。

大白話說什麼是閉包，那就是在一個函數裏邊再定義一個函數。這個內部函數一直保持有對外部函數中做用域的訪問權限(小盒子一直能夠有大盒子的訪問權限)。

函數執行，造成一個私有的做用域，保護裏邊的私有變量不受外界的干擾，除了保護私有變量外，還能夠存儲一些內容，這樣的模式叫作閉包。

動畫實現：

二、閉包的做用是什麼？

想必你對閉包仍是有點懵懵懂懂，不要緊，咱們再繼續深刻了解。閉包主要的做用是什麼呢？爲何要使用閉包呢？

經過上邊對閉包的解釋，外部函數 return 內部函數，可是仍然仍是能夠有訪問外部函數的做用域，由於外部一直保持着引用。這就讓咱們發現它的可用之處。

不是有塊做用域不銷燬嗎？咱們能夠用來保存一些內容，還能夠用來保護一些私有的變量。咱們總結出閉包有兩個做用，分別爲保護和保存。

三、閉包的應用場景

既然咱們知道閉包的做用是保存和保護，那在實際項目中哪裏用到了呢？

3.1 保護做用

團隊開發時，每一個開發者把本身的代碼放在一個私有的做用域中，防止相互之間的變量命名衝突；把須要提供給別人的方法，經過 return 或 window.xxx 的方式暴露在全局下。

jQuery 的源碼中也是利用了這種保護機制。

3.2 保存做用

選項卡閉包的解決方案。咱們常常在網頁中使用選項卡，可是它存在一個問題，那就是索引引起的問題，其實和下邊的經典面試題問題相同。

四、經典的閉包面試題

循環綁定事件引起的索引什麼問題？怎麼解決這種問題？

此時運行程序，你會得出的結果都是 len 的數值。

爲何會出現這種問題，咱們如何解決呢？

緣由很簡單，全部的事件綁定都是異步的，當觸發點擊事件，執行方法的時候，循環早就結束了。

咱們在多說一點，什麼是同步什麼是異步？

同步：JS 中當前這個任務沒有完成，下面的任務都不會執行，只有等當前完全完成，纔會執行下面的任務。

異步：JS 中的當前任務沒有完成，須要等一會在完成，此時咱們能夠繼續執行下面的任務。

解決方案：

當點擊事件執行的時候，就會在私有做用域查找 i 的值，此時私有做用域沒有 i ，就回去全局做用域查找，此時全局做用域的 i 已經被改變。因此說，要建立一個私有做用域的 i 。

方法一，閉包的方式。閉包終於排上用場了，用來保存私有的變量。

可是閉包解決又優勢，也有缺點。優勢就是經過建立私有做用域（閉包）方式解決，循環幾回，就建立幾個私有做用域（閉包），而後，每一個私有做用域都有一個私有變量 i ，存的值分別是循環的值。

缺點是生成多個不銷燬的私有做用域（堆內存），對性能有必定的影響。

方法二，使用自定義屬性。咱們給每一個對象添加一個索引屬性就 OK 了。

終極解決方案，這是 ES6 中的知識，由於以前在 JS 中是沒有塊級做用域的概念的，到了 ES6 中就有了，Let 聲明的變量就能夠更好的解決上述問題。

---

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

文章+動畫寫了好幾個小時，不妨點贊支持一下。嘻嘻，你不點贊說明你很自私，你怕那麼好的文章讓別人也看到。開個小小玩笑。

能夠關注小鹿公衆號：「小鹿動畫學編程」，後臺回覆：「資源」。送你一份小鹿以前自學的資料和拉你進免費學習羣哦！

做者Info：

【做者】：小鹿

【原創公衆號】：小鹿動畫學編程。

【簡介】：和小鹿同窗一塊兒用動畫的方式從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈獻給小夥伴。先定個小目標，原創 1000 篇的動畫技術文章，和各位小夥伴共同努力一塊兒學習！公衆號回覆 「資料」 送一從零自學資料大禮包！

【轉載說明】：轉載請說明出處，謝謝合做！~