三，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，这时候局部变量的优先级会高于全局变量，但是

局部变量的声明并不会覆盖全局变量

只会优先使用。

再说到一个有趣的问题，

变量提升

及

执行上下文

，看代码：

1

console.log(a) // undefined

2

var a = 100;

3

func('abc') // abc

4

function 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
.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. 这就是一个经典的闭包问题。

闭包，你明白了吗？

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