闭包也是前端面试中常问的，那么闭包到底是啥？
闭包是什么
闭包的本质是一个函数，一个什么函数呢？一个使用了其包含函数变量的函数。所以更准确的说法是，闭包是一个函数+捕获的变量。如下：
javascript
function init() {
var name = "Mozilla"; // name 是 init 创建的局部变量
function displayName() {
// displayName() 是内部函数，它创建了一个闭包
console.log(name); // 使用在父函数中声明的变量
}
displayName();
}
init();可以看到displayName就是我们所说的使用了其包含函数init的变量name的函数，所以它是一个闭包。这个闭包实际上是因为JS的这种可嵌套函数的写法产生的，在其他如Java，C++等语言中是没有的。
闭包有什么作用？
- 模拟私有变量和方法
javascript
function Stock(name, position) {
this.name = name;
this.addPosition = addPosition;
this.minusPosition = minusPosition;
this.getPosition = getPosition;
let _position = position; // 持仓
function add(count) {
_position += count;
}
function addPosition(count) {
add(count)
}
function minusPosition(count) {
add(-count)
}
function getPosition() {
return _position
}
}
const s = new Stock('贵州茅台', 50000)
s.name // '贵州茅台'
s._positon // undefined
s.getPosition() // 50000
s.add() // 报错：Uncaught TypeError: s.add is not a function
s.addPosition(5000)
s.getPosition() // 55000
s.minusPosition(500)
s.getPosition() // 54500以上代码我们模拟了一个私有变量_position和add，一个是股票的持仓，一个是内部的加法。虽然 Stock 构造函数没有返回内部函数，但它的实例方法（如 getPosition）仍然形成了闭包，因为它们访问了构造函数作用域中的 _position。
- 事件回调中的索引问题
这是一个在没有let和const时代非常容易犯的错。
javascript
function bindEvent() {
const btns = ['btn1', 'btn2', 'btn3'];
const binds = [];
for(var i = 0; i < btns.length; i++){
binds[i] = function() {
setTimeout(() => {
console.log(`执行${btns[i]}的绑定事件：` + i)
})
}
}
return binds;
}
const binds = bindEvent()
binds[0]() // 执行undefined的绑定事件：3
binds[1]() // 执行undefined的绑定事件：3
binds[2]() // 执行undefined的绑定事件：3我们本意是要给每个按钮绑定对于索引的输出语句，结果三个输出一样，且都没有达到要求。这是为什么呢？要解释这个问题，我们得知道 JS 的变量作用域，由于var所定义的变量不存在块中，而是存在于函数作用域中，所以，for循环中的 i 实际上是相当于在函数开始定义的，那么当整个bindEvent执行完毕之后，i 已经被+到了3。而我们在setTimeout回调中又使用了i，所以 i 不会消失，会等到binds中的函数执行时再使用，这个时候 i 的值已经时3了，所以输出就变成了实例中的那样。btns[3]是undefined，i 是3。
怎么解决这个问题呢？我们需要一个区别于bingEvent的作用域，将i的值保留下来。有两种做法，一种是在回调函数的外层套一个立即执行函数，锁定 i 的值；一种是使用let或者const来产生一个块作用域来锁定 i 的值。
javascript
function bindEvent() {
const btns = ['btn1', 'btn2', 'btn3'];
const binds = [];
for(var i = 0; i < btns.length; i++){
binds[i] = (function(index) {
return () => {
setTimeout(() => {
console.log(`执行${btns[index]}的绑定事件：` +index)
})
}
})(i)
}
return binds;
}
const binds = bindEvent()
binds[0]() // 执行btn1的绑定事件：0
binds[1]() // 执行btn2的绑定事件：1
binds[2]() // 执行btn3的绑定事件：2
function bindEvent() {
const btns = ['btn1', 'btn2', 'btn3'];
const binds = [];
for(let i = 0; i < btns.length; i++){
binds[i] = function() {
setTimeout(() => {
console.log(`执行${btns[i]}的绑定事件：` +i)
})
}
}
return binds;
}
const binds = bindEvent()- 节流和防抖中使用
javascript
// 防抖
function debounce(func, delay) {
let timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(()=> func(), delay);
}
}
const bind = debounce(() => {
console.log('执行一个请求操作')
}, 300)
for(let i = 0; i < 10; i++) {
bind()
}
// 只输出一次：执行一个请求操作我们在上面创建了一个防抖函数，我们连续调用10次，结果只输出了1次，因为每一次的执行我们都延后了300ms执行，这样的话，for循环中执行间隙小于300ms，所以10次只有一次执行成功了，这就是防抖。
javascript
// 节流
function throttle(func, delay) {
let lastTime = 0;
return function(){
const now = Date.now();
if (now - lastTime > delay) {
func.apply(this);
lastTime = now;
}
}
}
let count = 1
const operate = throttle(() => console.log('执行一个连续操作' + count++), 100);
for(let i = 0; i < 10000000; i++) {
operate()
}
/* 输出：
执行一个连续操作1
执行一个连续操作2
执行一个连续操作3
执行一个连续操作4
*/如上我们将节流代码执行了1千万次，但是真正执行的只有4次，这就是节流的意义，否则控制台就会真的打印1千万次，导致页面挂掉。
闭包的作用域链
之所以闭包能访问外部函数的变量，是因为闭包在调用的时候，会将包含他的函数的变量对象引用保存起来，然后逐级保存包含外部函数的函数的变量对象，知道全局变量对象。这样，只要这个闭包存在，所有的外层作用域都不会被销毁，这就是作用域链，因此闭包也比普通函数多了一些内存消耗。
其实，你每天都在用闭包：React 的 Hooks（useState）、Vue 的响应式系统、模块化代码......底层都依赖闭包来维持状态。