闭包的详解

        2023年是十分艰难的一年，找工作异常艰难，不过面试准备十分充分，都尽力去面试吧。今天来整理下闭包，一个从开始工作问道现在的问题（ps：闭包建议好好学习下，不管您是初级、高级、资深前端都会被问到）

1、内存回收机制

function fn() {
  // 具备不删除的独立作用
  var b = 2;
  return function () {
    console.log(b, '回收');
  }
}

原理：当变量不在被其他作用域调用时会回收对应的内存

上面代码中，在fn执行过程中先会给b分配内存，当fn执行完成后，因为有函数在使用，所以不会被回收 

2、原理

由上面的解释中引出定义：在一个函数里边再定义一个函数。这个内部函数一直保持有对外部函数中作用域的访问，将函数内部的变量转化为全局变量

有两个作用：

（1）读取函数内部变量

（2）让变量的值始终保持在内存中

function f1() {
  // 一直被放置在内存中
  var n = 999;
  // 函数内未使用var let进行定义,那么nAdd将作为全局作用域变量
  nAdd = function () {
     alert(n += 1);
  }
  function f2() {
     alert(n);
  }
  return f2;
}

var result = f1();
result(); //999
nAdd();//1000
result(); //1000


1、var n = 999 只会被执行一次，因为result相当于初始化操作,已经调用过一次f1了
所以执行result方法直接会去寻找f2
2、如果是f1()()这里就变成了先初始化，然后执行函数，这样闭包就没有效果了

3、应用-防抖与节流（一样，面试必问的优化问题）

原理在这里不介绍，网上都有介绍或者看《Javascript高级程序设计》

（1）防抖

思路：设置定时器，每当有新的事件产生时，清除定时器重新执行

const onclickButton = () => {
  console.log('触发点击事件');
  onDebounce(() => {
     console.log('完成事件执行');
  }, 5 * 1000)()
}

const onDebounce = () => {
  let timeout
  return function(fn, wait) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn()
    }, wait)
  }
}


const res = onDebounce()
res(onclickButton, 3*1000)

（2）节流

思路：节流特征是：每隔指定的周期才可以去触发新的任务
所以将timeout判断有没有，没有给出新的定时器，有抛出错误，在执行完成后再去执行
 
const onDebounce = () => {
  let timeout;
  console.log(timeout);
  return function(fn, wait) {
     if (!timeout) {
        timeout = setTimeout(function() {
            timeout = null;
            console.log(timeout);
             fn();
         }, wait);
     } else {
        throw new Error('不可重复点击')
     }
  };
}