本文已参与「新人创作礼」活动，一起开启掘金创作之路。

什么是闭包？

闭包是JavaScript最强大的特性，没有之一。很多强大JavaScript库比如jQuery、Vue.js都使用了闭包的特性来实现的。那么，究竟什么是闭包呢？

关于JavaScript闭包的定义有很多种，每本书、每个作者都有不完全相同的描述。

红宝书：闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

MDN：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

 function func(){
     let n = 0;
     return () => {
         console.log(n);
         n++;
     }
 }
 ​
 let f = func();
 ​
 f();//0
 f();//1
 f();//2

上面的代码是一个非常典型典型的闭包，可以看到，func函数返回一个函数，并且这个函数中引用了func函数作用域的变量n。我们定义一个f变量来接收返回的函数，每调用依次f函数，发现n的状态一直保持着（递加）。JavaScript函数内部可以通过作用域链直接读取父作用域变量，但是在函数外部无法读取函数内部的局部变量。

闭包表示有权访问另一个函数作用域中的变量的函数，常见的创建闭包的方式是在一个函数中创建另一个函数，在函数外部接收返回的函数，即可通过调用接收的函数从而达到访问内部作用域变量的目的，并且使得变量一直保存在内存中。

闭包的原理

JavaScript 闭包的本质源自两点，词法作用域和函数当作值传递。

1、词法作用域

嵌套函数的内部函数可以通过作用域链访问外部函数作用域的变量。

2、函数值传递

JavaScript中函数是一等公民，可以把函数当成值传递。当作参数传给别的函数，也可以把函数当作一个值 return出去。

内部函数可以访问外层函数作用域的变脸，即函数所需要的数据结构保存了下来，数据结构中的值在外层函数执行时创建，外层函数执行完毕时理因销毁，但由于内部函数作为值返回出去，这些值得以保存下来。而且无法直接访问，必须通过返回的函数。这也就是私有性。

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能导致内存泄露。

闭包的应用

节流和防抖是非常典型的闭包使用场景，因为二者都需要记住上一次的状态。

节流（throttle）

点击提交按钮，3秒内，仅第一次点击生效。

 function submit() {
     console.log("submit");
 }
 ​
 const throttle = (fn, delay) => {
     let canUse = true;
     return (...args) => {
         if (canUse) {
             fn.apply(this, args);
             canUse = false;
             setTimeout(() => (canUse = true), delay);
         }
     };
 };
 ​
 const btnThrottle = throttle(submit, 3000);
 ​
 const btn = document.getElementById("submit-btn");
 btn.addEventListener("click", btnThrottle);

防抖（debounce）

一秒内，重复点击按钮，则重新计时（1s），直到1s内只点击一次按钮，才能触发事件。

 function submit() {
     console.log("submit");
 }
 ​
 const debounce = (fn, delay) => {
     let timerId = null;
     return (...args) => {
         if (timerId) {
             window.clearTimeout(timerId);
         }
         timerId = setTimeout(() => {
             fn.apply(this, args);
             timerId = null;
         }, delay);
     };
 };
 ​
 const btnDebounce = debounce(submit, 1000);
 ​
 const btn = document.getElementById("submit-btn");
 btn.addEventListener("click", btnDebounce);