写在前面

在Javascript编程中，闭包是个相当重要且难以理解的概念，并且与作用域知识是密切相关的。那么：

  • Javascript中的作用域是什么意思呢？
  • 闭包会在哪些场景中使用呢？

  • 通过定时器循环输出自增的数字，通过JS代码如何实现呢？

    作用域

    作用域：指的是变量的作用范围，即变量能够被访问到的范围。

  • es5之前只有：全局作用域和函数作用域

  • es6之后新增：块级作用域

    全局作用域

    在Javascript中，全局变量是挂载到window顶级对象下的变量，因此在网页中的任何位置都可以进行使用，并且可以访问到这个全局变量。 ```javascript var globalName = “global”;

function getName(){ console.log(globalName);//“global” var name = “innner”; console.log(name);//“innner” }

getName(); console.log(name);//undefined console.log(globalName);//globalName

function setName(){ vName = “setName”;//未经过定义的变量，会默认挂载到window上作为全局变量 } setName(); console.log(vName);//setName console.log(window.vName);//setName

  1. 使用全局变量的缺点是：定义很多全局变量的时候，会容易引起变量命名的冲突。因此定义全局变量的时候，要注意作用域的访问范围。
  2. <a name="Thq6F"></a>
  3. ### 函数作用域
  4. 函数作用域：除了函数内部能够进行访问外，其他地方都是不能够访问的。且此函数执行完毕后，定义在函数作用域的局部变量也会被销毁。
  5. ```javascript
  6. function getName(){
  7.   var name = "inner";
  8.   console.log(name);//"inner"
  9. }
  11. getName();
  12. console.log(name);//name is not defined

块级作用域

块级作用域最直接的表现是：新增的let关键字，使用let关键字定义的变量只能在块级作用域中被访问。这是因为其具有暂时性死区的特点：这个变量在定义之前是不能够被使用的。

在Javascript中，if语句、try…catch…、switch以及for等语句后面{…}里面所包括的都是块级作用域。

  1. console.log(name);//name is not defined
  2. if(true){
  3.     let name = "yichuan";
  4.   console.log(name);//"yichuan"
  5. }
  6. console.log(name);//name is not defined

闭包

在《Javscript高级程序设计》中是这样定义闭包的：闭包指有权访问另外一个函数作用域中的变量的函数。

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

对于我们理解，其实闭包就是一个可以访问其它函数内部变量的函数。

通常情况下，函数内部变量是无法在函数外部进行访问的，因此使用闭包的作用就是突破这种限制，使得具备了能够在函数外部访问此函数内部变量的功能。

  1. function func1(){
  2.     var name = "yichuan";
  3.   return function(){
  4.       console.log(name);
  5.   }
  6. }
  8. func1();//此处返回的是一个function函数
  9. var result = func1();//使用result接收这个return出来的函数
  10. result();//1

我们看上面的代码其实就已经具有闭包的特点，就是可以在func函数外部去访问name的值。

我们分析下闭包产生的原因，这就需要先理解什么是作用域链。

作用域链：当访问一个变量时，代码解释器会首先在当前作用域进行查找，如果没有查找到，就会去父级作用域进行查找，知道找到该变量或者不存在父级作用域中。

  1. var name = "outer";
  2. console.log(name);//outer
  3. function func1(){
  4.     var name = "inner";
  5.   console.log(name);//inner
  6.   function func2(){
  7.       var name = "self";
  8.     console.log(name);//self
  9.   }
  10.   function func3(){
  11.       console.log(name);//inner
  12.   }
  13.   func2();
  14.   func3();
  15. }
  17. function func4(){
  18.     function func5(){
  19.       console.log(name);//outer
  20.   }
  21. }
  23. func1();
  24. func4();

我们看到，在函数func2中使用name变量，他会现在func2中查找到name变量并使用它的值。在函数func3中没有name变量，它就会沿着作用域链向上查找到func1函数中的name变量并使用。在函数func5中，查找并没有name变量，它就会去func4函数中查找也没有，就接着去全局变量查找到name变量并使用。

闭包产生本质就是：当前环境中存在指向父级作用域的引用。

  1. function func1(){
  2.     var name = "inner";
  3.   function func2(){
  4.       console.log(name);//inner
  5.   }
  6.   return func2;
  7. }
  8. var result = func1();
  9. result();

是不是只有返回函数的形式才能说产生了闭包呢？当然不是呀，只要让父级作用域的引用存在即可。

  1. var func2;
  2. function func1(){
  3.     var name = "yichuan";
  4.   func2 = function(){
  5.       console.log(name);
  6.   }
  7. }
  8. func1();
  9. func2();//"yichuan"

所以闭包有哪些表现形式呢？

  1. 直接返回一个函数
  2. 在定时器、事件监听、ajax请求、web workers或者任何异步中只要使用到了回调函数，实际上就是在使用闭包
  3. 作为函数参数传递的形式
  4. 立即执行函数IIFE，创建了闭包，保存了全局作用域window和当前函数作用域，因此可以输出全局的变量 ```javascript //定时器 setTimeout(function(){ console.log(“yichuan”); },1000);

//事件监听 const container = document.getElementById(“app”); container.addEventListener(“click”,function(){ console.log(“event listener”); });

//函数参数传递 var name = “yichuan”; function func1(){ var name = “onechuan”; function func2(){ console.log(name); } func3(func2); }

function func3(func){ func();//闭包 } func1();//输出”onechuan”

//立即执行函数 var name = “yihchuan”; (function(){ console.log(name);//“yichuan” })();

  1. 那么，我们应该如何应用闭包解决循环问题呢？
  2. <a name="abk26"></a>
  3. ## 面试中常考的循环打印问题
  4. 例如：<br />在循环中是否是期望的，打印出来的是1、2、3、4、5呢？
  5. ```javascript
  6. for(var i = 1; i <= 5; i++){
  7.     setTimeout(function(){
  8.     console.log(i);
  9.   },0);
  10. }

答案是否定的，最终打印出来是五个6。这是为什么呢？

这是因为：setTimeout是宏任务，由于js中单线程EventLoop机制，在主线程同步任务执行完毕后才会去执行宏任务，因此循环结束后setTimeout中的回调才会依次执行。而setTimeout函数也是一种闭包，沿着作用域链往上找它的父级作用域就是window，而变量i是window上的全局变量。等开始执行setTimeout函数之前变量i就已经变成了6了，因此最后输出的数值就是5个6。

那么如何解决呢？

  1. //使用立即执行函数
  2. for(var i = 1; i <= 5; i++){
  3.     (function(j){
  4.       setTimeout(function(){
  5.       console.log(j);
  6.     },0);
  7.   })(i)
  8. }
  10. //使用es6中let
  11. for(let i = 1; i <= 5; i++){
  12.     setTimeout(function(){
  13.     console.log(i);
  14.   },0);
  15. }

还有个很难想到的方法，就是使用setTimeout的隐藏的第三个参数。

  1. for(var i = 1; i <= 5; i++){
  2.     setTimeout(function(){
  3.     console.log(i);
  4.   },0,i);
  5. }

附加参数，一旦定时器到期，它们会作为参数传递给function。但是得注意：IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。

参考文章

《Javascript核心原理精讲》
《MDN》
《Javascript高级程序设计》

写在后面

闭包的使用在日常的javascript编程中经常出现，使用的场景比较多且复杂，需要读者仔细分析。本篇文章讲到了关于作用域和闭包的知识，其中作用域根据变量的作用范围分为：全局作用域、函数作用域以及块级作用域。而闭包就是一个可以访问其它函数内部变量的函数，在解决for循环打印的问题可以使用立即执行函数、setTimeout的第三参数、es6中的let关键字解决。