JavaScript 作用域、作用域链的理解

1. 作用域

作用域表示当前的执行上下文，值和表达式在其中可见或可被访问到的上下文。作用域决定了代码区块中变量和其他资源的可见性。

在JavaScript中，作用域可分为全局作用域、局部作用域、块级作用域。

1. 全局作用域

在代码中任何地方都能访问到的对象，拥有全局作用域。

JavaScript中，一般有三种情况拥有全局作用域：

（1）window对象的属性、方法

如图所示，所有window对象的属性都拥有全局作用域。之所以可以在JavaScript的任何地方使用alert函数，是因为它被定义在了window对象上的，拥有全局作用域。

（2）定义在最外层的变量、函数、对象

// 最外层变量
let a = 1;

// 最外层函数
function func1() {
    // 内层变量
    let b = 2;
    // 内层函数
    function func2() {
        console.log(b);
    }
}

console.log(a); // 1
console.log(b); // b is not defined

console.log(func1); // [Function: func1]
console.log(func2); // func2 is not defined

在此例中，变量a和函数func1拥有全局作用域，在任何地方都能访问到。

但变量b和函数func2没有定义在全局作用域中，在全局作用域中无法访问。

（3）未定义直接赋值的变量

所有未定义直接赋值的变量，会自动声明为全局变量。

function func() {
    a = 1;
}

func();

console.log(a); // 1
console.log(window.a); // 1

以上代码中，变量a在函数func中直接被赋值，没有定义，那么变量a会自动挂到window对象上，用于全局作用域，在全局作用域下可被访问。

2. 局部作用域

局部作用域相当于函数作用域，指函数内部的空间。函数内部的变量，在外部无法访问。

function func() {
    let a = 1;
}

console.log(a); // a is not defined

3. 块级作用域

块级作用域指被大括号{}包裹在内的部分。比如，如果if语句使用{}包裹，就生成了一个块级作用域。

if (true) {
    let a = 1;
}

console.log(a); // a is not defined

另外，也可以直接使用{}包裹代码，形成块级作用域。

{
    let a = 1;
}

console.log(a); // a is not defined

2. 作用域链

当在某个函数的内部作用域中查找某个变量时，如果没有找到就会到他的父级作用域中查找，如果父级也没找到就会接着一层一层的向上寻找，直到找到全局作用域还是没找到的话，就结束寻找，认定为变量未定义。这种一层一层的作用域嵌套关系，就是作用域链。

let a = 1;
function func1() {
    let b = 2;
    function func2() {
        let c = 3;
        console.log(a); // 全局作用域的变量
    }
    func2();
}
func1(); // 1

作用域存在的意义：

变量隔离，不同作用域下同名变量不会出现冲突。