js闭包
2025-02-16 本文已影响0人
神奇的少年
1、原理
允许函数保存其被声明时作用域中的变量；即使函数在作用域外被调用。
2、示例
function outer() {
let value = 1;
return function inner() {
value ++;
console.log(value);
}
};
const test1 = outer();
const test2 = outer();
test1();// 输出2
test1();// 输出3
test2();// 输出2
第二次调用test1函数的时候，函数内作用域中的value因上面被调用过一次，故保存了结果2的变量；
3、应用场景
3.1、保存事件处理中所需的数据；
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</body>
function createClickHandler(message) {
return function() {
alert(message);
};
}
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('click', createClickHandler('你点击了按钮1'));
btn2.addEventListener('click', createClickHandler('你点击了按钮2'));
3.2、循环中的事件绑定
<ul>
<li>按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
</ul>
const ListItems = document.querySelectorAll('li');
for (let i = 0; i < ListItems.length; i++) {
ListItems[i].addEventListener('click', (function (index) {
return function () {
alert('你点击了第${index + 1}项');
}
})(i));
}
