【七日打卡】重温js之基础的作用域

作用域

什么是作用域

在上一篇文章中，我们详细了解了变量的相关知识，那么啥是作用域呢，简单的说，就是变量可以生效的地方，就叫做作用域，也叫执行环境，大家也可以理解为变量可以发生作用的地方。举个栗子，我们国家颁布《刑法》，那么刑法就相当于一个变量，存储的值，就是刑法的内容，生效的范围就是作用域，也就是全国。

全局作用域

全局作用域就是代码运行时最外围的执行环境，比如在我国，最大的范围就是全国，全国就是全局作用域，而在js中，全局作用域被认为是window对象，而在上一篇文章中我们也说到了，在全局作用域中声明的变量为全局变量，而如果省略声明关键字声明的变量，默认也为全局变量。就像我们在国家的任何一个地方都需要遵从国家法律一样，我们在js的任何一个地方也都可以访问到全局作用域。

局部作用域

假如我们的国家是一个全局作用域，那它下面还有好多个省份和地区，在js 里也一样，全局作用域下面还有好多小的作用域，我们称之为局部作用域。在es6之前，js还不支持块作用域，所以在es6之前所谓的局部作用域就是指的函数作用域，也就是我们声明一个函数时这个函数内部的作用域。

如图所示，函数foo内部就是它所生成的局部作用域，变量bar就是这个局部作用域里的局部变量。

作用域嵌套与作用域链

上面我们说了，声明一个函数的同时就会创建属于它的函数作用域，那么函数可能会存在嵌套的情况，这时候就产生了作用域嵌套，这时候我们执行代码的话，就会产生一个作用域链，作用域链的前端，始终都是当前执行的代码距离最近的作用域。

如图所示就是一个嵌套的作用域，js解析变量的时候会遵循自下而上（自内而外）的规则沿着作用域链一级一级的查找，知道找到为止，如果查找到全局作用域（window）时依然没找到，就会报错。注意，作用域链是不可逆的，就是说我们在内层的作用域里可以访问外层作用域里的变量，但是在外层作用域里不能访问到内层作用域的变量。

另外要说一点，在我们讲this的那一篇文章中说了，this是在函数调用时决定的，在函数被定义时并没有this。而作用域则刚好相反，作用域是在函数定义时决定的，跟函数在哪里被调用没有关系。所以无论我们在哪里调用函数，都不会改变他的作用域链。

块作用域

上面我们说了，在es6之前，js中是没有块作用域的，在es6中，添加了let关键字实现了对块级作用域的支持。那么什么是块级作用域呢，其实就是两个大括号包裹的作用域。而且在我们日常的代码中非常常见，比如if语句后跟的大括号，for循环后跟的大括号。那有的同学会说，这不是有块级作用域吗，那为什么又说没有块级作用域呢？我们又怎么区分有没有块级作用域呢？其实很简单，我们来看看代码就知道了。

if (true) {
    var test = 'hello'
}
console.log(test) // hello

看，我们在大括号外也访问到了大括号里面的变量，上面我们说了，在局部作用域（块级作用域也属于局部作用域）外面是访问不到作用域里面的变量的，所以这里的‘块作用域’其实并没有真正的形成作用域，只不过是徒有其表罢了，这样子的危害就是容易污染全局作用域，而且容易给我们造成一定程度上的误解。比如下面这样子。

var index = 5
for (var index = 0; index < 10; index++) {
    /**/
}
console.log(index) // 10

很明显，上面代码中for循环中的index污染了全局作用域中的index，如果我们不小心的话很容易造成意想不到的后果，当然我们也可以尽量小心的去给变量命名，细心的检查代码，或者使用try...catch（感兴趣可以去搜一下，或者看js高级程序设计）去实现块作用域，以便代码如我们想象般的运行，可那样就会花费更多的精力，好在es6推出了let关键字，从代码层面支持了块作用域，减少了我们很多的工作量，来看看let的效果

var index = 5
for (let index = 0; index < 10; index++) {
    /**/
}
console.log(index) // 5

看，代码完全按照我们想象那样执行，let声明的变量支持块作用域，仅在块作用域内可访问，不会影响全局变量。

下面我们就来看看很经典的一道面试题

for (var index = 0; index < 6; index++) {
    setTimeout(function(){
        console.log(index)
    })
}

知道了块作用域再理解这道题就很简单了吧，因为这里用的是var关键字，所以这里没有块作用域，也就是说这里的index其实是一个全局变量，然后每次对index进行++的操作其实都是操作的同一个变量——全局变量index，然后我们里面又用的是setTimeout，一个异步函数，虽然我们这里没有设置定时时间，但它还是一个异步函数，需要等到for循环全部结束后才会运行，这时候index就已经是6了，所以会打印出来6个6。那如果我们把var换成let呢？

for (let index = 0; index < 6; index++) {
    setTimeout(function(){
        console.log(index)
    })
}

打印结果：0 1 2 3 4 5

完全符合我们的预期，这里我们使用的是let，let声明的变量支持块作用域，也就是仅在当前作用域内有效，所以这里我们循环中的每一个setTimeout引用的index其实都是单独的变量，互不影响。

简单的作用域介绍就到之类，下一次准备写一下跟作用域息息相关的闭包