JavaScript閉包的深度剖析與實(shí)際應(yīng)用小結(jié)
前言
本文將通過一系列代碼片段詳細(xì)探討閉包的概念、作用、原理及其優(yōu)缺點(diǎn)，并結(jié)合具體實(shí)例進(jìn)行分析。希望通過這篇文章，讀者能夠?qū)﹂]包有更深刻的理解。
一、什么是閉包？
簡單定義
閉包是指一個(gè)函數(shù)能夠記住并訪問它的詞法作用域，即使這個(gè)函數(shù)在其詞法作用域之外執(zhí)行。換句話說，閉包讓一個(gè)函數(shù)可以訪問另一個(gè)函數(shù)中的局部變量，即使外部函數(shù)已經(jīng)調(diào)用結(jié)束被釋放后，依然可以訪問這些變量。
代碼示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(){
var a = 3;
return function (){ // 閉包函數(shù)
return a;
}
}
function fun(){
var ff = fn(); // function me(){return a;}
alert(ff()); // 輸出3
}
fun();
</script>
</body>
</html>
代碼解析：
fn函數(shù)內(nèi)部定義了一個(gè)局部變量a和一個(gè)匿名函數(shù)（閉包）。- 匿名函數(shù)返回
a的值。當(dāng)fn被調(diào)用時(shí)，返回的是這個(gè)匿名函數(shù)。 - 在
fun函數(shù)中，ff是fn返回的匿名函數(shù)，調(diào)用ff()會(huì)輸出3，因?yàn)殚]包記住了a的值。
二、閉包的作用
解決全局變量污染的問題
閉包可以幫助我們將一些不需要暴露給全局作用域的變量封裝起來，避免全局變量的污染。通過閉包，我們可以創(chuàng)建私有變量和方法，從而提高代碼的安全性和可維護(hù)性。
代碼示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 全局變量累加和
var a = 1;
function fn(){
a ++;
}
fn();
console.log(a); // 2
fn();
console.log(a); // 3
fn();
console.log(a); // 4
</script>
</body>
</html>
代碼解析：
- 這里使用了全局變量
a來實(shí)現(xiàn)累加操作。每次調(diào)用fn函數(shù)時(shí)，a都會(huì)增加1。 - 這種方式雖然簡單，但會(huì)導(dǎo)致全局變量污染。如果多個(gè)函數(shù)都依賴于
a，可能會(huì)引發(fā)不可預(yù)見的問題。
使用閉包改進(jìn)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 局部變量累加和
function fn(){
var a = 1;
return function(){
return ++ a;
}
}
let fun = fn(); // function(){}
console.log(fun()); // 2
console.log(fun()); // 3
console.log(fun()); // 4
</script>
</body>
</html>
代碼解析：
fn函數(shù)內(nèi)部定義了一個(gè)局部變量a和一個(gè)匿名函數(shù)（閉包）。- 匿名函數(shù)返回
a的自增結(jié)果。每次調(diào)用fun函數(shù)時(shí)，都會(huì)執(zhí)行閉包，使得a的值逐步增加。由于a是局部變量，不會(huì)污染全局作用域，提高了代碼的安全性。
三、閉包的原理
瀏覽器的垃圾回收機(jī)制
當(dāng)一個(gè)函數(shù)執(zhí)行完畢后，通常其內(nèi)部的局部變量會(huì)被銷毀。但是，如果這些局部變量被其他函數(shù)引用，則它們不會(huì)被銷毀。這是因?yàn)殚]包的存在使得這些變量仍然處于活動(dòng)狀態(tài)，瀏覽器的垃圾回收機(jī)制不會(huì)回收這些變量，直到所有引用它們的閉包都被銷毀。
代碼示例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(){
// 聲明一個(gè)數(shù)組
let arr = [];
// 循環(huán)添加數(shù)據(jù)
for(var i = 0;i < 5;i ++){
arr[i] = function(i){ // 0 1 2 3 4
return function(){
return i;
};
}(i);
}
return arr; // 返回?cái)?shù)組
}
let list = fn();
for(var i = 0,len = list.length;i < len;i ++){
console.log(list[i]()); // 01234
}
</script>
</body>
</html>
代碼解析：
fn函數(shù)內(nèi)部聲明了一個(gè)數(shù)組arr，并通過循環(huán)為每個(gè)元素賦值。- 每個(gè)元素是一個(gè)閉包，該閉包接收一個(gè)參數(shù)
i并返回一個(gè)匿名函數(shù)。匿名函數(shù)返回i的值。 - 通過立即執(zhí)行函數(shù)表達(dá)式
(i)，確保每次循環(huán)時(shí)傳遞的i值是當(dāng)前的值，而不是最終的值。 - 最終，
list數(shù)組中的每個(gè)元素都是一個(gè)閉包，調(diào)用這些閉包會(huì)依次輸出0到4。
四、閉包的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
- 變量長駐內(nèi)存：閉包可以讓局部變量在函數(shù)執(zhí)行結(jié)束后仍然存在，這使得我們可以保存一些狀態(tài)信息，方便后續(xù)使用。
- 提供私有變量：通過閉包，我們可以創(chuàng)建私有變量和方法，避免全局變量的污染，提高代碼的安全性和可維護(hù)性。
缺點(diǎn)
- 內(nèi)存占用：由于閉包會(huì)讓變量一直存在于內(nèi)存中，可能導(dǎo)致內(nèi)存占用過大，尤其是在處理大量數(shù)據(jù)或長時(shí)間運(yùn)行的應(yīng)用中。
- 內(nèi)存泄露：如果閉包沒有正確管理，可能會(huì)導(dǎo)致內(nèi)存泄露，尤其是在IE等老版本瀏覽器中更為明顯。
代碼示例4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(){
// 聲明一個(gè)數(shù)組
let arr = [];
// 循環(huán)添加數(shù)據(jù)
for(var i = 0;i < 5;i ++){
arr[i] = function(){
return i;
}();
}
return arr; // 返回?cái)?shù)組
}
let list = fn();
for(var i = 0,len = list.length;i < len;i ++){
console.log(list[i]); // 0 1 2 3 4
}
</script>
</body>
</html>
代碼解析：
fn函數(shù)內(nèi)部聲明了一個(gè)數(shù)組arr，并通過循環(huán)為每個(gè)元素賦值。- 每個(gè)元素是一個(gè)立即執(zhí)行函數(shù)表達(dá)式，返回當(dāng)前的
i值。 - 最終，
list數(shù)組中的每個(gè)元素都是一個(gè)數(shù)值，分別是0到4。 - 這種寫法避免了閉包帶來的內(nèi)存問題，但也失去了閉包的功能。
五、總結(jié)與展望
結(jié)束語
通過上述代碼片段和解析，我們深入探討了JavaScript中的閉包概念、作用、原理及其優(yōu)缺點(diǎn)。閉包作為JavaScript中一個(gè)強(qiáng)大的特性，既能幫助我們解決許多編程難題，也需要注意其潛在的風(fēng)險(xiǎn)。合理使用閉包，可以在保證代碼安全性和性能的前提下，編寫出更加簡潔高效的程序。
未來展望
隨著JavaScript的發(fā)展，閉包的應(yīng)用場景也在不斷擴(kuò)展?，F(xiàn)代JavaScript框架如React、Vue等廣泛使用閉包來實(shí)現(xiàn)組件的狀態(tài)管理和生命周期管理。因此，深入理解閉包不僅是掌握J(rèn)avaScript的基礎(chǔ)，更是邁向高級(jí)編程的重要一步。
到此這篇關(guān)于JavaScript閉包的深度剖析與實(shí)際應(yīng)用的文章就介紹到這了,更多相關(guān)js閉包應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript之通用簡單的table選項(xiàng)卡實(shí)現(xiàn)(二)
上篇中的選項(xiàng)卡存在這樣的問題：把邏輯封裝在table.js中，不夠靈活，也就是說如果某個(gè)選項(xiàng)卡是實(shí)現(xiàn)異步請求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過table.js來達(dá)到目的，顯然不是我所需要的。2010-05-05
List Installed Hot Fixes...2007-06-06
js 判斷一個(gè)元素是否存在此功能在項(xiàng)目中很實(shí)用，本人搜集整理了一些常用技巧，需要了解的朋友可以參考下2012-12-12
javascript獲取不重復(fù)的隨機(jī)數(shù)的方法比較
js永不重復(fù)隨機(jī)數(shù)實(shí)現(xiàn)代碼比較2008-09-09
用JS動(dòng)態(tài)改變表單form里的action值屬性的兩種方法
下面小編就為大家?guī)硪黄肑S動(dòng)態(tài)改變表單form里的action值屬性的兩種方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
本文主要分享了javascript中遞歸的兩種寫法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript中關(guān)于數(shù)組的調(diào)用方式
這篇文章主要介紹了JavaScript中關(guān)于數(shù)組的調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
獲取頁面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo)，在js控制元素運(yùn)動(dòng)的過程中，對于頁面元素坐標(biāo)位置的獲取是經(jīng)常用到的，這里主要總結(jié)下兩種方法2013-05-05
下面小編就為大家?guī)硪黄钊肜斫鈐s函數(shù)的作用域與this指向。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了js獲取地址欄參數(shù)的兩種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06