通俗易懂地解釋JS中的閉包
1. "閉包就是跨作用域訪問變量。"
【示例一】
var name = 'wangxi'
function user () {
// var name = 'wangxi'
function getName () {
console.log(name)
}
getName()
}
user() // wangxi
在 getName 函數(shù)中獲取 name,首先在 getName 函數(shù)的作用域中查找 name,未找到,進而在 user 函數(shù)的作用域中查找,同樣未找到,繼續(xù)向上回溯,發(fā)現(xiàn)在全局作用域中存在 name,因此獲取 name 值并打印。這里很好理解,即變量都存在在指定的作用域中,如果在當(dāng)前作用中找不到想要的變量,則通過作用域鏈向在父作用域中繼續(xù)查找,直到找到第一個同名的變量為止(或找不到,拋出 ReferenceError 錯誤)。這是 js 中作用域鏈的概念,即子作用域可以根據(jù)作用域鏈訪問父作用域中的變量,那如果相反呢,在父作用域想訪問子作用域中的變量呢?——這就需要通過閉包來實現(xiàn)。
【示例二】
function user () {
var name = 'wangxi'
return function getName () {
return name
}
}
var userName = user()()
console.log(userName) // wangxi
分析代碼我們知道,name 是存在于 user 函數(shù)作用域內(nèi)的局部變量,正常情況下,在外部作用域(這里是全局)中是無法訪問到 name 變量的,但是通過閉包(返回一個包含變量的函數(shù),這里是 getName 函數(shù)),可以實現(xiàn)跨作用域訪問變量了(外部訪問內(nèi)部)。因此上面的這種說法完整的應(yīng)該理解為:
閉包就是跨作用域訪問變量 —— 內(nèi)部作用域可以保持對外部作用域中變量的引用從而使得(更)外部作用域可以訪問內(nèi)部作用域中的變量。(還是不理解的話看下一條分析)
2. "閉包:在爺爺?shù)沫h(huán)境中執(zhí)行了爸爸,爸爸中返回了孫子,本來爸爸被執(zhí)行完了,爸爸的環(huán)境應(yīng)該被清除掉,但是孫子引用了爸爸的環(huán)境,導(dǎo)致爸爸釋放不了。這一坨就是閉包。簡單來講,閉包就是一個引用了父環(huán)境的對象,并且從父環(huán)境中返回到更高層的環(huán)境中的一個對象。"
這個怎么理解呢?首先看下方代碼:
【示例三】
function user () {
var name = 'wangxi'
return name
}
var userName = user()
console.log(userName) // wangxi
問:這是閉包嗎?
答:當(dāng)然不是。首先要明白閉包是什么。雖然這里形式上看好像也是在全局作用域下訪問了 user 函數(shù)內(nèi)的局部變量 name,但是問題是,user 執(zhí)行完,name 也隨之被銷毀了,即函數(shù)內(nèi)的局部變量的生命周期僅存在于函數(shù)的聲明周期內(nèi),函數(shù)被銷毀,函數(shù)內(nèi)的變量也自動被銷毀。
但是使用閉包就相反,函數(shù)執(zhí)行完,生命周期結(jié)束,但是通過閉包引用的外層作用域內(nèi)的變量依然存在,并且將一直存在,直到執(zhí)行閉包的的作用域被銷毀,這里的局部變量才會被銷毀(如果在全局環(huán)境下引用了閉包,則只有在全局環(huán)境被銷毀,比如程序結(jié)束、瀏覽器關(guān)閉等行為時才會銷毀閉包引用的作用域)。因此為了避免閉包造成的內(nèi)存損耗,建議在使用閉包后手動銷毀。還是上面示例二的例子,稍作修改:
【示例四】
function user () {
var name = 'wangxi'
return function getName () {
return name
}
}
var userName = user()() // userName 變量中始終保持著對 name 的引用
console.log(userName) // wangxi
userName = null // 銷毀閉包,釋放內(nèi)存
【為什么 user()() 是兩個括號:執(zhí)行 user() 返回的是 getName 函數(shù),要想獲得 name 變量,需要對返回的 getName 函數(shù)執(zhí)行一次,所以是 user()()】
根據(jù)觀點2,分析一下代碼:在全局作用域下創(chuàng)建了 userName 變量(爺爺),保存了對 user 函數(shù)最終返回結(jié)果的引用(即局部變量 name 的值),執(zhí)行 user()()(爸爸),返回了 name(孫子),正常情況下,在執(zhí)行了 user()() 之后,user 的環(huán)境(爸爸)應(yīng)該被清除掉,但是因為返回的結(jié)果 name(孫子)引用了爸爸的環(huán)境(因為 name 本來就是存在于 user 的作用域內(nèi)的),導(dǎo)致 user 的環(huán)境無法被釋放(會造成內(nèi)存損耗)。
那么【"閉包就是一個引用了父環(huán)境的對象,并且從父環(huán)境中返回到更高層的環(huán)境中的一個對象。"】如何理解?
我們換個說法:如果一個函數(shù)引用了父環(huán)境中的對象,并且在這個函數(shù)中把這個對象返回到了更高層的環(huán)境中,那么,這個函數(shù)就是閉包。
還是看上面的例子:
getName 函數(shù)中引用了 user(父)環(huán)境中的對象(變量 name),并且在函數(shù)中把 name 變量返回到了全局環(huán)境(更高層的環(huán)境)中,因此,getName 就是閉包。
3. "JavaScript中的函數(shù)運行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里."
這句話對閉包中對變量的引用的理解很有幫助。我們看下面的例子:
var name = 'Schopenhauer'
function getName () {
console.log(name)
}
function myName () {
var name = 'wangxi'
getName()
}
myName() // Schopenhauer
如果執(zhí)行 myName() 輸出的結(jié)果和你想象的不一樣,你就要再回去看看上面說的這句話了,
JavaScript 中的函數(shù)運行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里
執(zhí)行 myName,函數(shù)內(nèi)部執(zhí)行了 getName,而 getName 是在全局環(huán)境下定義的,因此盡管在 myName 中定義了變量 name,對getName 的執(zhí)行并無影響,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
結(jié)果和你想象的一樣嗎?結(jié)果留作聰明的你自己分析~
以上就是對 js 中閉包的理解,如果有誤,歡迎指正。最后引用一段知乎問題下關(guān)于閉包概念的一個回答。
什么是閉包?
簡單來說,閉包是指可以訪問另一個函數(shù)作用域變量的函數(shù),一般是定義在外層函數(shù)中的內(nèi)層函數(shù)。
為什么需要閉包?
局部變量無法共享和長久的保存,而全局變量可能造成變量污染,所以我們希望有一種機制既可以長久的保存變量又不會造成全局污染。
特點
- 占用更多內(nèi)存
- 不容易被釋放
何時使用?
變量既想反復(fù)使用,又想避免全局污染
如何使用?
- 定義外層函數(shù),封裝被保護的局部變量。
- 定義內(nèi)層函數(shù),執(zhí)行對外部函數(shù)變量的操作。
- 外層函數(shù)返回內(nèi)層函數(shù)的對象,并且外層函數(shù)被調(diào)用,結(jié)果保存在一個全局的變量中。
好了,以上所述是小編給大家介紹的js中的閉包,希望對大家有所幫助!
相關(guān)文章
獲取Javscript執(zhí)行函數(shù)名稱的方法
獲取Javscript執(zhí)行函數(shù)名稱的方法...2006-12-12
JavaScript數(shù)組排序功能簡單實現(xiàn)
這篇文章主要介紹了JavaScript數(shù)組排序功能簡單實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
自定義排序算法在JavaScript中的應(yīng)用小結(jié)
這篇文章主要介紹了自定義排序算法在JavaScript中的應(yīng)用,通過自定義排序函數(shù),我們能夠精確控制數(shù)組元素的排序邏輯,從而滿足各種復(fù)雜的應(yīng)用場景,需要的朋友可以參考下2024-12-12
JavaScript搜索字符串并將搜索結(jié)果返回到字符串的方法
這篇文章主要介紹了JavaScript搜索字符串并將搜索結(jié)果返回到字符串的方法,涉及javascript中match方法操作字符串的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
通過JavaScript腳本復(fù)制網(wǎng)頁上的一個表格
通過JavaScript腳本復(fù)制網(wǎng)頁上的一個表格...2006-07-07
JavaScript純前端實現(xiàn)語音播報和朗讀功能
這篇文章主要為大家詳細介紹了JavaScript純前端實現(xiàn)語音播報和朗讀功能的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如:15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如:15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下2014-06-06

