作用域与作用域链

1.作用域

1.1 定义

• 作用域是指程序源代码中定义变量的区域，
• 规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。
• 通俗的讲，作用域就是一套规则，用于确定在何处以及如何查找某个变量的规则。

1.2 JavaScript中的作用域

        JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域：函数的作用域在函数定义的时候就决定了；与之对应的还有一个动态作用域：函数的作用域是在函数调用的时候才决定的。详细知识可参考词法作用域与动态作用域。

JavaScript 有两种作用域：全局作用域和局部作用域。除了函数内部和{}内部定义的变量，其余都属于全局作用域。ES6提供了块级作用域，目前局部作用域包含函数作用域和块级作用域。

1.3 全局作用域

        全局作用域中定义的变量可以被任何地方访问，包括如下两种：

• 函数外定义的变量，函数的形参；
• 所有未先定义直接赋值的变量自动声明为拥有全局作用域

// 函数外定义的 age 和 未定义直接赋值的 name 均为全局变量，拥有全局作用域
let age = 3;
function fn () {
    name = '小花';
    console.log(age);
}
fn(); //3
console.log(name); //小花

1.4 局部作用域

        局部作用域内的变量只能被定义它的局部作用域访问，包括以下两种：

• 函数作用域

        局部作用域最常见的就是以函数为单位的，当存在函数嵌套情况时，作用域是分层的，内部函数可以访问外部函数作用域里的变量，反之是不可以的(作用域链)。

function fn1 () {
    let val1 = 1;
    function fn2 () {
        let val2 = 2;
        console.log(val1); //1，内部函数可以访问外部函数变量
    }
    fn2();
    console.log(val2) //报错，外部函数不可以访问内部函数变量
}

console.log(val1) //报错，val1 只能在 fn1() 函数内部被访问

 注意：快语句({}内的语句)，比如 if, while 等，不会创建新的作用域。

• 块级作用域

        ES6 新增了 let 和 const 两种声明变量的命令，所声明的变量只能在指定块的作用域内被访问。注意：var 命令会发生变量提升，可以重复声明，后面的声明赋值会覆盖前面的值，而 let, const 不会发生变量提升，不允许重复声明，且 const 的值也不可更新。

var arr = [];
for (var i = 0; i < 10; i++) {
    arr[i] = function() {
        console.log(i);
    }
}
arr[0]() // 把所有的arr执行一遍，发现最后的结果都是10

// 相当于
var arr = []；
var i; // 变量提升，i 为全局变量
for (i = 0; i < 10; i++) {
    arr[i] = function() {
        console.log(i);
    }
}
arr[0](); //遍历结束， i = 10，所以打印出来的都是10

而使用 let 命令不存在变量提升，只在函数内部可以被访问，其中 i 就是局部变量了。

var arr = [];
for (let i = 0; i < 10; i++) {
    arr[i] = function() {
        console.log(i);
    }
}
arr[0]() // 0
arr[1]() // 1

2.作用域链 

       当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象,作用域链的顶端就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

3. 作用域变量的查询规则：

• 内部作用域有权访问外部作用域;
• 外部作用域无法访问内部作用域;
• 兄弟作用域不可互相访问;