JS中的的"閉包"？深入Javascript之this

標籤：question   code   手動   函數   閉包   wan   str   包含   .com   

 

看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’？，受到一些啟發，因此結合執行個體將回答中幾個精要的答案做一個簡單的分析以便加深理解。

 

1. "閉包就是跨範圍訪問變數。" 

 

【樣本一】

 

var name = ‘wangxi‘function user () {  // var name = ‘wangxi‘  function getName () {    console.log(name)  }  getName()}user() // wangxi

 

在 getName 函數中擷取 name，首先在 getName 函數的範圍中尋找 name，未找到，進而在 user 函數的範圍中尋找，同樣未找到，繼續向上回溯，發現在全域範圍中存在 name，因此擷取 name 值並列印。這裡很好理解，即變數都存在在指定的範圍中，如果在當前作用中找不到想要的變數，則通過範圍鏈向在父範圍中繼續尋找，直到找到第一個同名的變數為止（或找不到，拋出 ReferenceError 錯誤）。這是 js 中範圍鏈的概念，即子範圍可以根據範圍鏈訪問父範圍中的變數，那如果相反呢，在父範圍想訪問子範圍中的變數呢？——這就需要通過閉包來實現。

 

【樣本二】

 

function user () {  var name = ‘wangxi‘  return function getName () {    return name  }}var userName = user()()console.log(userName) // wangxi

 

分析代碼我們知道，name 是存在於 user 函數範圍內的局部變數，正常情況下，在外部範圍（這裡是全域）中是無法訪問到 name 變數的，但是通過閉包（返回一個包含變數的函數，這裡是 getName 函數），可以實現跨範圍訪問變數了（外部存取內部）。因此上面的這種說法完整的應該理解為：

 

閉包就是跨範圍訪問變數 —— 內部範圍可以保持對外部範圍中變數的引用從而使得（更）外部範圍可以訪問內部範圍中的變數。（還是不理解的話看下一條分析）

 

 

 

2. "閉包：在爺爺的環境中執行了爸爸，爸爸中返回了孫子，本來爸爸被執行完了，爸爸的環境應該被清除掉，但是孫子引用了爸爸的環境，導致爸爸釋放不了。這一坨就是閉包。簡單來講，閉包就是一個引用了父環境的對象，並且從父環境中返回到更高層的環境中的一個對象。"

 

這個怎麼理解呢？首先看下方代碼：

 

【樣本三】

 

function user () {  var name = ‘wangxi‘  return name}var userName = user()console.log(userName) // wangxi

 

問：這是閉包嗎？

 

答：當然不是。首先要明白閉包是什麼。雖然這裡形式上看好像也是在全域範圍下訪問了 user 函數內的局部變數 name，但是問題是，user 執行完，name 也隨之被銷毀了，即函數內的局部變數的生命週期僅存在於函數的聲明周期內，函數被銷毀，函數內的變數也自動被銷毀。

 

但是使用閉包就相反，函數執行完，生命週期結束，但是通過閉包引用的外層範圍內的變數依然存在，並且將一直存在，直到執行閉包的的範圍被銷毀，這裡的局部變數才會被銷毀（如果在全域環境下引用了閉包，則只有在全域環境被銷毀，比如程式結束、瀏覽器關閉等行為時才會銷毀閉包引用的範圍）。因此為了避免閉包造成的記憶體損耗，建議在使用閉包後手動銷毀。還是上面樣本二的例子，稍作修改：

 

【樣本四】

 

function user () {  var name = ‘wangxi‘  return function getName () {    return name  }}var userName = user()() // userName 變數中始終保持著對 name 的引用console.log(userName) // wangxiuserName = null // 銷毀閉包，釋放記憶體

 

【為什麼 user()() 是兩個括弧：執行 user()  返回的是 getName 函數，要想獲得 name 變數，需要對返回的 getName 函數執行一次，所以是 user()()】

 

根據觀點2，分析一下代碼：在全域範圍下建立了 userName 變數（爺爺），儲存了對 user 函數最終返回結果的引用（即局部變數 name 的值），執行 user()()（爸爸），返回了 name（孫子）,正常情況下，在執行了 user()() 之後，user 的環境（爸爸）應該被清除掉，但是因為返回的結果 name（孫子）引用了爸爸的環境（因為 name 本來就是存在於 user 的範圍內的），導致 user 的環境無法被釋放（會造成記憶體損耗）。

 

那麼【"閉包就是一個引用了父環境的對象，並且從父環境中返回到更高層的環境中的一個對象。"】如何理解？

 

我們換個說法：如果一個函數引用了父環境中的對象，並且在這個函數中把這個對象返回到了更高層的環境中，那麼，這個函數就是閉包。

 

還是看上面的例子：

 

getName 函數中引用了 user（父）環境中的對象（變數 name），並且在函數中把 name 變數返回到了全域環境（更高層的環境）中，因此，getName 就是閉包。

 

 

 

3. "JavaScript中的函數運行在它們被定義的範圍裡，而不是它們被執行的範圍裡。" ——《JavaScript權威指南》

 

這句話對閉包中對變數的引用的理解很有協助。我們看下面的例子：

 

var name = ‘Schopenhauer‘function getName () {  console.log(name)}function myName () {  var name = ‘wangxi‘  getName()}myName() // Schopenhauer

 

如果執行 myName() 輸出的結果和你想象的不一樣，你就要再回去看看上面說的這句話了，

 

JavaScript 中的函數運行在它們被定義的範圍裡，而不是它們被執行的範圍裡

 

執行 myName，函數內部執行了 getName，而 getName 是在全域環境下定義的，因此儘管在 myName 中定義了變數 name，對getName 的執行並無影響，getName 中列印的依然是全域範圍下的 name。

 

我們稍微改一下代碼:

 

var name = ‘Schopenhauer‘function getName () {　 var name = ‘Aristotle‘   var intro = function() {  // 這是一個閉包      console.log(‘I am ‘ + name)   }   return intro}function showMyName () {   var name = ‘wangxi‘   var myName = getName()   myName()}showMyName() // I am Aristotle

 

結果和你想象的一樣嗎？結果留作聰明的你自己分析~

 

 

 

以上就是對 js 中閉包的理解，如果有誤，歡迎指正。最後引用一段知乎問題下關於閉包概念的一個回答。

 

（蕭瀟 連結：https://www.zhihu.com/question/34547104/answer/197642727）

 

什麼是閉包?

簡單來說，閉包是指可以訪問另一個函數範圍變數的函數，一般是定義在外層函數中的內層函數。

為什麼需要閉包？

局部變數無法共用和長久的儲存，而全域變數可能造成變數汙染，所以我們希望有一種機制既可以長久的儲存變數又不會造成全域汙染。

特點

• 佔用更多記憶體
• 不容易被釋放

何時使用？

變數既想反覆使用，又想避免全域汙染

如何使用？

1. 定義外層函數，封裝被保護的局部變數。
2. 定義內層函數，執行對外部函數變數的操作。
3. 外層函數返回內層函數的對象，並且外層函數被調用，結果儲存在一個全域的變數中。

   

【參考】

 

淺談JavaScript的閉包和範圍鏈

 

由一道題圖解JavaScript的範圍

 

如何才能通俗易懂的解釋javascript裡面的‘閉包’？

深入Javascript之this JS中的的"閉包"？

JS中的的"閉包"？深入Javascript之this