JavaScript閉包詳解
1.?什么是閉包
閉包:函數(shù)本身和該函數(shù)聲明時所處的環(huán)境狀態(tài)的組合。
也就是說函數(shù)不在其定義的環(huán)境中被調(diào)用,也能訪問定義時所處環(huán)境的變量。
所以使用閉包,就可以將數(shù)據(jù)與操作該數(shù)據(jù)的函數(shù)相關(guān)聯(lián)。
舉個例子:
function foo() {
let a = 1;
return function() {
console.log(a);
}
}
let foo1 = foo();
foo1() // 輸出 1
這個就是一個閉包的例子,在 foo 中,由于 return 了一個函數(shù),這個函數(shù)擁有涵蓋 foo 內(nèi)部作用域的閉包,也就是 a,使得 a 一直存活,不會在 foo 結(jié)束時被回收。
2.?閉包的作用
2.1) 記憶性
什么是閉包的記憶性
當(dāng)閉包產(chǎn)生時,函數(shù)所處環(huán)境的狀態(tài)會始終保持在內(nèi)存中,不會在外層函數(shù)調(diào)用結(jié)束后,被垃圾回收機(jī)制回收。
舉個例子:
function foo() {
let a = 0;
return function() {
a ++;
console.log(a);
}
}
let foo1 = foo();
let foo2 = foo();
foo1(); // 1
foo2(); // 1
foo2(); // 2
foo1(); // 2

因為 a 屬于閉包的一部分,所以當(dāng)閉包產(chǎn)生時,a 所處的環(huán)境狀態(tài)會保持在內(nèi)存中,不會隨外層函數(shù)調(diào)用結(jié)束后清除,所以隨著 foo1的使用,a 都會在內(nèi)存中的值加 1。
然后 foo1 和 foo2 產(chǎn)生的閉包是兩個獨立的閉包,它們互不影響。所以 foo2 第二次調(diào)用的時候,是在它自己第一次調(diào)用后結(jié)果上加 1.
2.2) 模擬私有變量
保證一個變量只能被進(jìn)行指定操作。
舉個例子:
function foo() {
let A = 0;
return {
getA : function() {
return A;
},
add : function() {
A ++;
},
del : function() {
A --;
}
}
}
let foo1 = foo();
console.log(foo1.getA()); // 0
foo1.add();
console.log(foo1.getA()); // 1
foo1.del();
console.log(foo1.getA()); // 0

通過閉包,保證了 A 只能被進(jìn)行指定的 加一,減一操作。
3.?閉包的注意點
不能濫用閉包,否則可能會因為內(nèi)存占用過多而造成網(wǎng)頁的性能問題,甚至可能造成內(nèi)存泄漏。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript 異步調(diào)用框架 (Part 1 - 問題 & 場景)
在Ajax應(yīng)用中,調(diào)用XMLHttpRequest是很常見的情況。特別是以客戶端為中心的Ajax應(yīng)用,各種需要從服務(wù)器端獲取數(shù)據(jù)的操作都通過XHR異步調(diào)用完成。2009-08-08
淺析Virtual DOM的概念與其在現(xiàn)代前端框架中的實踐
這篇文章將深入探討Virtual DOM(虛擬DOM)的概念,分析其對前端開發(fā)的革新影響,并以此展示前端技術(shù)的深度和魅力,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07

