看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’?,受到一些啟發,因此結合實例將回答中幾個精要的答案做一個簡單的分析以便加深理解。 1. "閉包就是跨作用域訪問變數。" 【示例一】 在 getName 函數中獲取 name,首先在 getName 函數的作用域中查找 nam ...
看了知乎上的話題 如何才能通俗易懂的解釋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) // wangxi userName = 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)
什麼是閉包?
簡單來說,閉包是指可以訪問另一個函數作用域變數的函數,一般是定義在外層函數中的內層函數。
為什麼需要閉包?
局部變數無法共用和長久的保存,而全局變數可能造成變數污染,所以我們希望有一種機制既可以長久的保存變數又不會造成全局污染。
特點
- 占用更多記憶體
- 不容易被釋放
何時使用?
變數既想反覆使用,又想避免全局污染
如何使用?
- 定義外層函數,封裝被保護的局部變數。
- 定義內層函數,執行對外部函數變數的操作。
- 外層函數返回內層函數的對象,並且外層函數被調用,結果保存在一個全局的變數中。