三，5分钟快速了解JS中的【闭包 / 作用域】相关知识；

闭包 / 作用域前端面试高频出现，极为重要！！！

很久没更新博客，因为最近事情实在太多，周末都抽不出空来，今天晚上把剪头发的时间抽出来写下这篇博客…QAQ… 废话不多说直接开写。

JS三座大山之一的【闭包/作用域】个人认为是最难理解的的JS基础问题了，基础不扎实的话很容易搞混淆。

老规矩，不要问什么是闭包，先看完文章；说到闭包就不得不说作用域，执行上下文；

回忆一下js相关基础知识，众所周知js中的变量（ES5）是没有块级作用域的，再ES6中let和const新增了块级作用域；
var a = 1;
function test(){ var a = 2; console.log(a)} // 2
console.log(a) // 1
咱们定义一个全局变量a 然后再到test()里面定义一个局部变量a，这时候局部变量的优先级会高于全局变量，但是局部变量的声明并不会覆盖全局变量只会优先使用。

再说到一个有趣的问题，变量提升及执行上下文，看代码：

1console.log(a) // undefined
2var a = 100;
3func('abc') // abc
4function func(val){ console.log(val) }

我们打印一下a再给a赋值，发现变量a是undefiend？但是执行函数func的时候竟然成功了？这是为什么？

因为js的机制是运行之前会先执行上下文，那么什么是执行上下文呢？

就是在js运行之前会把所有的变量和函数声明先拿出来，放到前面来，这个动作叫做变量提升。如果是变量则先给一个undefiend，如果是函数声明则先把函数声明解析一下，即再执行一下执行上下文动作，把函数声明里的变量，this及参数先拿出来放到顶部。所以执行第咱们上面的一块代码的时候先把变量a和func()先拿出来，给a一个undefiend，然后解析一下func()。等到执行的时候先执行第一句话，这时候a已经给了一个undefiend所以输出undefiend，运行到第3句话的时候因为函数声明已经提前拿出来了，所以会进入函数里面去执行里面的语句，所以输出abc。

是不是很有意思？到了这里童鞋们还是不太清楚到底什么是闭包呢？

相信各位在面试中肯定遇到过类似这样的题目：要求点击每一个li弹出响应的下标，即0，1，2，3，4

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

function f(){ 
  var list = document.querySelectorAll('ul li');
  for(var i=0;i<list.length;i++){
    list[i].addEventListener('click',function(){
      alert(i);
    })
  }
 } f();

相信很多童鞋都会如上文这么写，错！这样你点击每一个li标签输出的都是4，那么正确应该怎么写呢？

function f(){ 
  var list = document.querySelectorAll('ul li');
  for(var i=0;i<list.length;i++){
     (function (n){ 
         list[n].addEventListener('click',function(){
     	   alert(n);
    	 })
     })(i)
  }
 } f();

相信看到这里很多童鞋不屑一顾，我早就知道这么写了，因为这个问题遇到过很多次，但是为什么这么写就没问题，理由是什么能清楚的说出来吗？因为以前我本人也是这样的。

其中的原理是通过一个匿名立即执行函数来传值i。具体如下：

在错误的写法中我们通过for循环给list[i]添加绑定事件，因为函数声明了之后不会立即就执行，所以变量i的值是一个不确定的值，它依赖于它的上下文环境给它穿什么值它就是什么值。但是for循环是立即就会执行，所以在几毫秒的时间里i的值就从0-1-2-3-4变化了好几次，当我们点击的时候i已经是4了，所以无论点击哪一个li都是4.但是通过匿名自执行函数我们把i传给匿名自执行函数，这时候函数的参数n已经是固定的了，函数体内不需要再依赖于for循环给它的值，所以可以正确alert出01234. 这就是一个经典的闭包问题。

闭包，你明白了吗？

如有不对，欢迎各位指教，本人虚心接受。