定义:
闭包: 函数A嵌套函数B,函数B使用函数A的变量
场景:
- 函数作为返回值
- 函数作为参数
- 函数嵌套
- 事件处理的回调(异步执行)
// 闭包的使用场景
// 1、函数作为返回值
function mail() {
let content = '信';
return function () {
console.log(content);
};
}
const envelop = mail();
envelop();
// 2、函数作为参数
let count = 0;
function envelop(fn) {
count = 1;
fn();
}
function mail() {
console.log(count);
}
envelop(mail);
// 3、函数嵌套
let count = 0;
function outerFn() {
function innerFn() {
count++;
console.log(count);
}
return innerFn;
}
outerFn()();
// 4、事件处理回调(异步执行)
let lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
(function (i) {
lis[i].addEventListener('click', function () {
console.log(i);
});
})(i);
}
常见面试的追问
- 立即执行嵌套
- 当立即执行函数遇到块级作用域
- 拆分执行
- 实现私有变量
// 立即执行嵌套
(function immediateA(a) {
return (function immediateB(b) {
console.log(a);
})(1);
})(0);
// 当立即执行函数遇到块级作用域;
let count = 0;
(function immediate() {
if (count === 0) {
let count = 1;
console.log(count);
}
console.log(count);
})();
// 拆分执行;
function createIncrement() {
let count = 0;
function increment() {
count++;
}
let message = `count is ${count}`;
// console.log('======') //只执行一次
function log() {
console.log(message);
}
return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log();
// 实现私有变量;
function createStack() {
const items = [];
return {
push(item) {
items.push(item);
// console.log(items);
},
};
}
const res = createStack();
res.push(1);