JavaScript 閉包原理和實(shí)踐案例
一、概述
閉包（Closure）是 JavaScript 中最核心、最具特色也最容易引起困惑的概念之一。它既是前端面試的高頻考點(diǎn)，也是理解 JavaScript 執(zhí)行機(jī)制的關(guān)鍵。本文將從原理到實(shí)踐，帶你徹底掌握閉包的本質(zhì)。
二、閉包的核心定義
閉包是函數(shù)和對(duì)其周圍（詞法）環(huán)境的引用的組合。
簡(jiǎn)單來說，當(dāng)一個(gè)函數(shù)內(nèi)部引用了外部函數(shù)的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢，這個(gè)內(nèi)部函數(shù)仍然可以訪問這些外部變量，這就是閉包。
“閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)。” —— MDN
三、閉包的形成條件
形成閉包需要滿足三個(gè)必要條件：
- 函數(shù)嵌套：內(nèi)部函數(shù)定義在外部函數(shù)內(nèi)部
- 引用外部變量：內(nèi)部函數(shù)引用了外部函數(shù)的變量
- 外部調(diào)用：內(nèi)部函數(shù)被返回或在外部被調(diào)用
function outer() {
let outerVar = '外部變量';
function inner() {
console.log(outerVar); // 引用外部變量
}
return inner; // 返回內(nèi)部函數(shù)
}
const closure = outer(); // 調(diào)用外部函數(shù)并保存返回的內(nèi)部函數(shù)
closure(); // 輸出: 外部變量四、閉包的工作原理
1. 作用域鏈機(jī)制
JavaScript 采用詞法作用域（靜態(tài)作用域），函數(shù)的作用域在定義時(shí)就已確定，而不是在執(zhí)行時(shí)。
當(dāng)函數(shù)被創(chuàng)建時(shí)，它會(huì)保存對(duì)其外層作用域的引用，形成一條作用域鏈。
function outer() {
let a = 1;
function inner() {
let b = 2;
console.log(a + b); // 作用域鏈查找：inner -> outer -> global
}
return inner;
}2. 垃圾回收機(jī)制
在正常情況下，函數(shù)執(zhí)行完畢后，其局部變量會(huì)被垃圾回收機(jī)制回收。但當(dāng)這些變量被閉包引用時(shí)，它們就不會(huì)被回收，因?yàn)殚]包保持著對(duì)這些變量的引用。
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2在這個(gè)例子中，count 變量在 createCounter 函數(shù)執(zhí)行完畢后本應(yīng)被回收，但由于被返回的函數(shù)（閉包）引用，所以它被保留了下來。
五、閉包的經(jīng)典應(yīng)用場(chǎng)景
1. 封裝私有變量
JavaScript 沒有 private 關(guān)鍵字，但可以通過閉包實(shí)現(xiàn)私有變量。
function createPerson() {
let _name = "張三";
return {
getName: function() {
return _name;
},
setName: function(name) {
if (name.startsWith("張")) {
_name = name;
} else {
throw new Error("姓氏必須是張");
}
}
};
}
const person = createPerson();
console.log(person.getName()); // 張三
person.setName("張三豐");
console.log(person.getName()); // 張三豐
// console.log(_name); // Uncaught ReferenceError: _name is not defined2. 實(shí)現(xiàn)模塊化
閉包是 JavaScript 模塊化設(shè)計(jì)的基礎(chǔ)。
const Counter = (function() {
let count = 0;
return {
increment: function() {
return ++count;
},
decrement: function() {
return --count;
},
value: function() {
return count;
}
};
})();
console.log(Counter.increment()); // 1
console.log(Counter.increment()); // 2
console.log(Counter.value()); // 23. 事件處理與循環(huán)問題
閉包可以解決 for 循環(huán)中 i 變量的問題。
// 錯(cuò)誤示例
const buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
console.log(i); // 所有按鈕點(diǎn)擊都輸出 buttons.length
});
}
// 正確示例：使用閉包
const buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', (function(index) {
return function() {
console.log(index);
};
})(i));
}4. 函數(shù)柯里化
閉包是實(shí)現(xiàn)函數(shù)柯里化（Currying）的基礎(chǔ)。
function add(x) {
return function(y) {
return x + y;
};
}
const add5 = add(5);
console.log(add5(3)); // 8
console.log(add5(10)); // 155. 節(jié)流與防抖
使用閉包實(shí)現(xiàn)函數(shù)節(jié)流。
function throttle(func, delay) {
let lastCall = 0;
return function() {
const now = Date.now();
if (now - lastCall >= delay) {
func.apply(this, arguments);
lastCall = now;
}
};
}
const throttledFunction = throttle(() => console.log('觸發(fā)'), 500);
// 每500ms最多觸發(fā)一次六、閉包的常見誤區(qū)
1. 閉包一定會(huì)導(dǎo)致內(nèi)存泄漏
事實(shí)：閉包本身不會(huì)導(dǎo)致內(nèi)存泄漏，但不當(dāng)使用閉包可能導(dǎo)致內(nèi)存泄漏。
- 閉包會(huì)保留對(duì)其詞法環(huán)境的引用，這是設(shè)計(jì)使然
- 問題在于：如果閉包被意外保留（如全局變量引用），且不再需要時(shí)未清除引用
function createClosure() {
const largeData = new Array(1000000).fill('data');
return function() {
console.log('I have access to largeData');
};
}
// 如果將返回的函數(shù)保存在全局變量中，largeData 將無法被回收
const closure = createClosure();2. 閉包是"函數(shù)內(nèi)部的函數(shù)"
事實(shí)：閉包是"函數(shù)和其詞法環(huán)境的組合"，而不僅僅是"函數(shù)內(nèi)部的函數(shù)"。
function outer() {
const a = 1;
const b = 2;
function inner() {
console.log(a + b);
}
return inner;
}
// inner 是閉包，因?yàn)樗昧?outer 的變量
const closure = outer();七、閉包的性能考量
1. 內(nèi)存使用
閉包會(huì)保留對(duì)外部作用域的引用，可能導(dǎo)致內(nèi)存占用增加。
優(yōu)化建議：
- 避免在閉包中保留不必要的大對(duì)象
- 在不再需要時(shí)，將閉包引用置為
null
function createLargeClosure() {
const largeData = new Array(1000000).fill('data');
let counter = 0;
return {
getValue: function() {
counter++;
return largeData[counter % largeData.length];
},
clear: function() {
largeData = null; // 清除對(duì)大對(duì)象的引用
}
};
}
const closure = createLargeClosure();
console.log(closure.getValue());
closure.clear(); // 清除大對(duì)象引用2. 作用域鏈查找
閉包會(huì)增加作用域鏈的長(zhǎng)度，可能影響性能。
優(yōu)化建議：
- 避免在閉包中使用過于復(fù)雜的嵌套作用域
- 將常用變量緩存到局部變量中
function createFunction() {
const a = 1;
const b = 2;
// 優(yōu)化前：每次調(diào)用都要查找作用域鏈
return function() {
return a + b;
};
// 優(yōu)化后：將結(jié)果緩存到局部變量
const result = a + b;
return function() {
return result;
};
}八、閉包的實(shí)踐建議
- 合理使用：閉包是強(qiáng)大的工具，但不要過度使用
- 明確目的：每次使用閉包前，思考是否真的需要它
- 清理引用：在不再需要閉包時(shí)，清除對(duì)閉包的引用
- 避免大對(duì)象：不要在閉包中保留不必要的大對(duì)象
- 理解原理：深入理解閉包的機(jī)制，避免誤用
九、總結(jié)
閉包是 JavaScript 語言的精髓所在，它使我們能夠：
- 實(shí)現(xiàn)數(shù)據(jù)封裝和私有變量
- 創(chuàng)建模塊化和可重用的代碼
- 解決作用域和事件處理中的常見問題
- 實(shí)現(xiàn)函數(shù)式編程的高級(jí)模式
理解閉包的關(guān)鍵在于掌握：
- 作用域鏈的機(jī)制
- 垃圾回收的工作原理
- 詞法環(huán)境的保留
正如《JavaScript 高級(jí)程序設(shè)計(jì)》中所說：“閉包是 JavaScript 中最強(qiáng)大的特性之一，也是最容易被誤解的特性之一。”
掌握閉包，你就能更深入地理解 JavaScript 的運(yùn)行機(jī)制，編寫出更優(yōu)雅、更高效的代碼。記住，閉包不是魔法，而是 JavaScript 語言設(shè)計(jì)的自然結(jié)果。
到此這篇關(guān)于JavaScript 閉包原理和實(shí)踐深度解析的文章就介紹到這了,更多相關(guān)JavaScript 閉包原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用Keydown事件阻止用戶輸入實(shí)現(xiàn)代碼
這篇文章主要介紹了利用Keydown事件阻止用戶輸入的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
響應(yīng)式表格之固定表頭的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄憫?yīng)式表格之固定表頭的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JavaScript設(shè)計(jì)模式適配器模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式適配器模式實(shí)例，適配器設(shè)計(jì)模式可以讓彼此不兼容的功能在一塊工作，有助于避免大規(guī)模的修改代碼，并且易于擴(kuò)展和兼容2022-06-06
這篇文章主要介紹了JS實(shí)現(xiàn)的仿QQ空間圖片彈出效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)生成彈出層的相關(guān)技巧,需要的朋友可以參考下2016-02-02
BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁應(yīng)用小結(jié)
這篇文章主要介紹了BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
JavaScript監(jiān)聽手機(jī)物理返回鍵的兩種解決方法
JavaScript沒有監(jiān)聽物理返回鍵的API，所以只能使用 popstate 事件監(jiān)聽。接下來通過本文給大家分享JavaScript監(jiān)聽手機(jī)物理返回鍵的兩種解決方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于jQuery正則表達(dá)式驗(yàn)證表單的相關(guān)資料,我們?cè)趯懕韱蔚臅r(shí)候會(huì)通過一些正則表達(dá)式來驗(yàn)證是否正確,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
JavaScript實(shí)現(xiàn)合并(歸并)排序算法示例解析
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)合并(歸并)排序算法示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)
我們每次改完要打包的資源文件，和配置文件都是是輸入npx webpack命令手動(dòng)打包的，本文就來介紹一下webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2023-07-07
通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化
這篇文章主要介紹了通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化,需要的朋友可以參考下2014-02-02