怎樣理解JavaScript 閉包,相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
公司主營(yíng)業(yè)務(wù):成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出蘭州免費(fèi)做網(wǎng)站回饋大家。
深入剖析 JavaScript 閉包
?一個(gè)函數(shù)和對(duì)其周?chē)鸂顟B(tài)的引用捆綁在一起,這樣的組合就是「閉包」.
通俗的說(shuō):一個(gè)內(nèi)層函數(shù)可以訪問(wèn)外層函數(shù)的作用域 就叫 「閉包」。
在 JavaScript 中,每當(dāng)創(chuàng)建一個(gè)函數(shù),閉包就會(huì)在函數(shù)創(chuàng)建的同時(shí)被創(chuàng)建出來(lái)。
閉包的形成與變量的作用域以及變量的生命周期密切相關(guān)。
?
??
函數(shù)嵌套函數(shù)
函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收
?優(yōu)點(diǎn):
?可以設(shè)計(jì)私有的方法和變量
?「缺點(diǎn)」
?常駐內(nèi)存,會(huì)增大內(nèi)存使用量,使用不當(dāng)很容易造成內(nèi)存泄露。
?「一般函數(shù)執(zhí)行完畢后,局部活動(dòng)對(duì)象就被銷(xiāo)毀,內(nèi)存中僅僅保存全局作用域?!?/strong>
?
?變量的作用域:變量的有效范圍。
在實(shí)際開(kāi)發(fā)中,我們經(jīng)常遇到的是 「函數(shù)中聲明的變量作用域?!?/strong>
?
var a = '閉包';
function getValue(){
var a = '函數(shù)局部作用域'
console.log(a)
}
getValue() //函數(shù)局部作用域
?當(dāng)在全局聲明了一個(gè)同名變量,在函數(shù)內(nèi)部也聲明了一個(gè)同名變量,函數(shù)優(yōu)先訪問(wèn)函數(shù)作用域中的變量。
?
?函數(shù)作用域:在函數(shù)內(nèi)部可以訪問(wèn)到函數(shù)外部變量,而在函數(shù)外部的變量不可以訪問(wèn)函數(shù)內(nèi)部的變量。
為什么呢?
「因?yàn)楫?dāng)在函數(shù)中搜索一個(gè)變量的時(shí)候,如果函數(shù)內(nèi)部沒(méi)有這個(gè)變量的聲明,那么它會(huì)隨著代碼的執(zhí)行環(huán)境創(chuàng)建的作用域往外層逐層搜索,直到搜索到全局變量為止。」
變量的搜索是從內(nèi)到外搜索的。
?
function getData() {
var str = "閉包練習(xí)";
var fun = function(){
var innerStr = '內(nèi)部變量'
}
console.log(innerStr)
//innerStr is not defined 函數(shù)外層是訪問(wèn)不到 函數(shù)內(nèi)層變量的
}
getData()
?對(duì)于 「全局變量」,它的生存周期是永久的的,除非主動(dòng)銷(xiāo)毀變量。
而對(duì)于 「函數(shù)局部變量」,當(dāng)函數(shù)執(zhí)行完畢,局部變量也就銷(xiāo)毀了。
?
Document
1
2
3
4
?給每個(gè)
div
增加點(diǎn)擊事件,當(dāng)點(diǎn)擊 div 時(shí),彈出它對(duì)應(yīng)的索引值。現(xiàn)在無(wú)論點(diǎn)擊哪個(gè)
div
,它 彈出的 都是 4 。為什么呢?
「因?yàn)?div 點(diǎn)擊事件 是被 異步觸發(fā)的,當(dāng)事件被觸發(fā)的時(shí)候,循環(huán)已經(jīng)執(zhí)行完,此時(shí)的 i 的 變量值 為 4?!?/strong>
如何解決 點(diǎn)擊每個(gè)div 彈出對(duì)應(yīng)的i 值呢 ?
**可以借用 閉包, 把每次循環(huán)的 i 保存起來(lái),當(dāng)執(zhí)行點(diǎn)擊事件時(shí),它會(huì)從內(nèi)到外 搜索變量的作用域,它會(huì)優(yōu)先搜索到 閉包環(huán)境環(huán)境的 i **
?
# 閉包解決辦法
var num = 1;
function getValue(){
var num = 0;
return function(){
num++
console.log(num)
}
}
var s = getValue()
s()
s()
// 1 2
?按常理思路來(lái):函數(shù)執(zhí)行完畢,num = 1 銷(xiāo)毀,變?yōu)槌跏贾?num = 0 ,變量在函數(shù)中作用域從內(nèi)到外逐層搜索。
前面也說(shuō)到了,當(dāng)函數(shù)執(zhí)行完,局部變量也跟著銷(xiāo)毀了,那為什么會(huì) 輸出 2 呢 ?
?這里 涉及到 垃圾回收機(jī)制引用計(jì)數(shù)問(wèn)題
[關(guān)于垃圾回收] https://blog.csdn.net/zhouziyu2011/article/details/61201613
簡(jiǎn)述:
「當(dāng)聲明了一個(gè)變量并將一個(gè)引用類(lèi)型值賦給該變量時(shí),則該值的引用次數(shù)就是1;如果同一個(gè)值又被賦給另一個(gè)變量,則該值的引用次數(shù)加1;如果包含對(duì)該值引用的變量又取得了另外一個(gè)值,則該值的引用次數(shù)減1。當(dāng)該值的引用次數(shù)變?yōu)?時(shí),則可以回收其占用的內(nèi)存空間。當(dāng)垃圾回收器下一次運(yùn)行時(shí),就會(huì)釋放那些引用次數(shù)為0的值所占用的內(nèi)存?!?/strong>
?「解答」
?第一次執(zhí)行
s()
時(shí),num = 1第二次 執(zhí)行
?s()
時(shí), 由于 引用的時(shí)第一次s ()
的變量num=1,num 沒(méi)有被銷(xiāo)毀,固然在 num = 1 的基礎(chǔ)上 再 加 1 。「注意」
如果沒(méi)有使用同樣引用的話(huà),那么多次調(diào)用,都是同樣的值,因?yàn)闆](méi)有記錄引用值。
函數(shù)在執(zhí)行完畢,num = 1 被銷(xiāo)毀掉了,初始為 0
?
var num = 1;
function getValue(){
var num = 0;
return function(){
num++
console.log(num)
}
}
getValue()()
getValue()()
// 0 0
?閉包的注意作用為這兩項(xiàng):
?
「可以讀取函數(shù)內(nèi)部的變量」 「可以變量的值始終保持在內(nèi)存中」
function f2(){
let num = 0;
addNum = function(){
num++
}
function f3(){
console.log(num)
}
return f3
}
var a = f2()
a()
addNum()
a()
// 0 1
?閉包注意
結(jié)果為 0 1
函數(shù)在執(zhí)行完畢,局部變量也跟著銷(xiāo)毀, 結(jié)果 不應(yīng)該是 0 0 嗎 ?
其實(shí)a() 相當(dāng)于 是 f3() 的閉包函數(shù),它被執(zhí)行了兩次。
第一次 執(zhí)行 a() 時(shí), 結(jié)果為 0 , 很好理解。 第二次 執(zhí)行的 f2()
函數(shù)內(nèi)部的addNum
函數(shù),發(fā)現(xiàn)沒(méi)這個(gè)匿名函數(shù)賦值給一個(gè)變量,而且這個(gè)變量沒(méi)加var / let
, 那么它此時(shí)的作用域?yàn)?全局
,保存在內(nèi)存當(dāng)中。執(zhí)行addNum
時(shí)它訪問(wèn)的f2()
函數(shù)內(nèi)部的局部變量num
, 此時(shí),addNum
的存在依賴(lài)于f2
,因此f2
也在內(nèi)存中,不會(huì)在調(diào)用結(jié)束后,被垃圾回收機(jī)制(garbage collection)回收。第三次 執(zhí)行 a()
時(shí), 因?yàn)?num
已存在內(nèi)存中,而 值為1最終輸出結(jié)果:0 , 1
?
?
由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中,內(nèi)存消耗很大,所以不能濫用閉包,否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題,在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是,在退出函數(shù)之前,將不使用的局部變量全部刪除。 閉包會(huì)在父函數(shù)外部,改變父函數(shù)內(nèi)部變量的值。所以,如果你把父函數(shù)當(dāng)作對(duì)象(object)使用,把閉包當(dāng)作它的公用方法(Public Method),把內(nèi)部變量當(dāng)作它的私有屬性(private value),這時(shí)一定要小心,不要隨便改變父函數(shù)內(nèi)部變量的值。
看完上述內(nèi)容,你們掌握怎樣理解JavaScript 閉包的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!