通俗易懂地解釋JS中的閉包
1. "閉包就是跨作用域訪問變量。"
【示例一】
var name = 'wangxi' function user () { // var name = 'wangxi' function getName () { console.log(name) } getName() } user() // wangxi
在 getName 函數(shù)中獲取 name,首先在 getName 函數(shù)的作用域中查找 name,未找到,進(jìn)而在 user 函數(shù)的作用域中查找,同樣未找到,繼續(xù)向上回溯,發(fā)現(xiàn)在全局作用域中存在 name,因此獲取 name 值并打印。這里很好理解,即變量都存在在指定的作用域中,如果在當(dāng)前作用中找不到想要的變量,則通過作用域鏈向在父作用域中繼續(xù)查找,直到找到第一個(gè)同名的變量為止(或找不到,拋出 ReferenceError 錯(cuò)誤)。這是 js 中作用域鏈的概念,即子作用域可以根據(jù)作用域鏈訪問父作用域中的變量,那如果相反呢,在父作用域想訪問子作用域中的變量呢?——這就需要通過閉包來實(shí)現(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 變量的,但是通過閉包(返回一個(gè)包含變量的函數(shù),這里是 getName 函數(shù)),可以實(shí)現(xiàn)跨作用域訪問變量了(外部訪問內(nèi)部)。因此上面的這種說法完整的應(yīng)該理解為:
閉包就是跨作用域訪問變量 —— 內(nèi)部作用域可以保持對(duì)外部作用域中變量的引用從而使得(更)外部作用域可以訪問內(nèi)部作用域中的變量。(還是不理解的話看下一條分析)
2. "閉包:在爺爺?shù)沫h(huán)境中執(zhí)行了爸爸,爸爸中返回了孫子,本來爸爸被執(zhí)行完了,爸爸的環(huán)境應(yīng)該被清除掉,但是孫子引用了爸爸的環(huán)境,導(dǎo)致爸爸釋放不了。這一坨就是閉包。簡(jiǎn)單來講,閉包就是一個(gè)引用了父環(huán)境的對(duì)象,并且從父環(huán)境中返回到更高層的環(huán)境中的一個(gè)對(duì)象。"
這個(gè)怎么理解呢?首先看下方代碼:
【示例三】
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)的變量也自動(dòng)被銷毀。
但是使用閉包就相反,函數(shù)執(zhí)行完,生命周期結(jié)束,但是通過閉包引用的外層作用域內(nèi)的變量依然存在,并且將一直存在,直到執(zhí)行閉包的的作用域被銷毀,這里的局部變量才會(huì)被銷毀(如果在全局環(huán)境下引用了閉包,則只有在全局環(huán)境被銷毀,比如程序結(jié)束、瀏覽器關(guān)閉等行為時(shí)才會(huì)銷毀閉包引用的作用域)。因此為了避免閉包造成的內(nèi)存損耗,建議在使用閉包后手動(dòng)銷毀。還是上面示例二的例子,稍作修改:
【示例四】
function user () { var name = 'wangxi' return function getName () { return name } } var userName = user()() // userName 變量中始終保持著對(duì) name 的引用 console.log(userName) // wangxi userName = null // 銷毀閉包,釋放內(nèi)存
【為什么 user()() 是兩個(gè)括號(hào):執(zhí)行 user() 返回的是 getName 函數(shù),要想獲得 name 變量,需要對(duì)返回的 getName 函數(shù)執(zhí)行一次,所以是 user()()】
根據(jù)觀點(diǎn)2,分析一下代碼:在全局作用域下創(chuàng)建了 userName 變量(爺爺),保存了對(duì) user 函數(shù)最終返回結(jié)果的引用(即局部變量 name 的值),執(zhí)行 user()()(爸爸),返回了 name(孫子),正常情況下,在執(zhí)行了 user()() 之后,user 的環(huán)境(爸爸)應(yīng)該被清除掉,但是因?yàn)榉祷氐慕Y(jié)果 name(孫子)引用了爸爸的環(huán)境(因?yàn)?name 本來就是存在于 user 的作用域內(nèi)的),導(dǎo)致 user 的環(huán)境無法被釋放(會(huì)造成內(nèi)存損耗)。
那么【"閉包就是一個(gè)引用了父環(huán)境的對(duì)象,并且從父環(huán)境中返回到更高層的環(huán)境中的一個(gè)對(duì)象。"】如何理解?
我們換個(gè)說法:如果一個(gè)函數(shù)引用了父環(huán)境中的對(duì)象,并且在這個(gè)函數(shù)中把這個(gè)對(duì)象返回到了更高層的環(huán)境中,那么,這個(gè)函數(shù)就是閉包。
還是看上面的例子:
getName 函數(shù)中引用了 user(父)環(huán)境中的對(duì)象(變量 name),并且在函數(shù)中把 name 變量返回到了全局環(huán)境(更高層的環(huán)境)中,因此,getName 就是閉包。
3. "JavaScript中的函數(shù)運(yùn)行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里."
這句話對(duì)閉包中對(duì)變量的引用的理解很有幫助。我們看下面的例子:
var name = 'Schopenhauer' function getName () { console.log(name) } function myName () { var name = 'wangxi' getName() } myName() // Schopenhauer
如果執(zhí)行 myName() 輸出的結(jié)果和你想象的不一樣,你就要再回去看看上面說的這句話了,
JavaScript 中的函數(shù)運(yùn)行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里
執(zhí)行 myName,函數(shù)內(nèi)部執(zhí)行了 getName,而 getName 是在全局環(huán)境下定義的,因此盡管在 myName 中定義了變量 name,對(duì)getName 的執(zhí)行并無影響,getName 中打印的依然是全局作用域下的 name。
我們稍微改一下代碼:
var name = 'Schopenhauer' function getName () { var name = 'Aristotle' var intro = function() { // 這是一個(gè)閉包 console.log('I am ' + name) } return intro } function showMyName () { var name = 'wangxi' var myName = getName() myName() } showMyName() // I am Aristotle
結(jié)果和你想象的一樣嗎?結(jié)果留作聰明的你自己分析~
以上就是對(duì) js 中閉包的理解,如果有誤,歡迎指正。最后引用一段知乎問題下關(guān)于閉包概念的一個(gè)回答。
什么是閉包?
簡(jiǎn)單來說,閉包是指可以訪問另一個(gè)函數(shù)作用域變量的函數(shù),一般是定義在外層函數(shù)中的內(nèi)層函數(shù)。
為什么需要閉包?
局部變量無法共享和長(zhǎng)久的保存,而全局變量可能造成變量污染,所以我們希望有一種機(jī)制既可以長(zhǎng)久的保存變量又不會(huì)造成全局污染。
特點(diǎn)
- 占用更多內(nèi)存
- 不容易被釋放
何時(shí)使用?
變量既想反復(fù)使用,又想避免全局污染
如何使用?
- 定義外層函數(shù),封裝被保護(hù)的局部變量。
- 定義內(nèi)層函數(shù),執(zhí)行對(duì)外部函數(shù)變量的操作。
- 外層函數(shù)返回內(nèi)層函數(shù)的對(duì)象,并且外層函數(shù)被調(diào)用,結(jié)果保存在一個(gè)全局的變量中。
好了,以上所述是小編給大家介紹的js中的閉包,希望對(duì)大家有所幫助!
相關(guān)文章
使用JavaScript制作待辦事項(xiàng)列表的示例代碼
這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項(xiàng)列表HTML的完整信息和教程,文中但是示例代碼講解詳細(xì),感興趣的同學(xué)可以動(dòng)手試一試2022-01-01javascript實(shí)現(xiàn)Email郵件顯示與刪除功能
這篇文章主要介紹了javascript實(shí)現(xiàn)Email郵件顯示與刪除功能,需要的朋友可以參考下2015-11-11javascript實(shí)現(xiàn)checkbox全選的代碼
本文給大家分享的是js實(shí)現(xiàn)checkbox的全選的代碼,在網(wǎng)頁制作中很常用的js代碼,供大家學(xué)習(xí)參考。2015-04-04JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例,也可說是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下2014-08-08如何實(shí)現(xiàn)移動(dòng)端瀏覽器不顯示 pc 端的廣告
隨著移動(dòng)網(wǎng)絡(luò)的發(fā)展,越來越多的人使用手機(jī)等移動(dòng)端瀏覽網(wǎng)頁辦公,那么如果在手機(jī)打開頁面的時(shí)候顯示大大的聯(lián)盟廣告,用戶體驗(yàn)度會(huì)非常差,經(jīng)過一番研究,用下面的方法實(shí)現(xiàn)了移動(dòng)端瀏覽器不顯示PC端廣告。2015-10-10利用momentJs做一個(gè)倒計(jì)時(shí)組件(實(shí)例代碼)
這篇文章主要介紹了利用momentJs做一個(gè)倒計(jì)時(shí)組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12淺談JavaScript中的String對(duì)象常用方法
這篇文章主要介紹了JavaScript中的String對(duì)象常用方法,非常簡(jiǎn)單實(shí)用,有需要的小伙伴參考下2015-02-02JavaScript實(shí)現(xiàn)連連看連線算法
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)連連看連線算法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01