JS作用域链分析

JS声明的变量会根据作用域链查找作用域是否声明该变量，如果没有，则查找上一个作用域，直到全局作用域。

// 全局作用域
function f1() {
    // f1作用域
    var a = 2
    function f2() {
        // f2作用域
        a = 1
        console.log(a)
    }
    
    f2()
    // var a = 2
    console.log(a)
}
f1()
console.log(a)

打印的结果为1,1，报错。在函数f2中，a被赋值为1。根据作用域链，查看f2作用域，由于f2没有声明a，查找f1作用域，由于f1声明a，所以f2的a是f1声明的变量a。由于执行了f2函数，所以前面两个打印的是1。最后一行代码打印a，根据作用域链，查找全局作用域，由于全局作用域没有声明变量a，所以最后一行报没有声明变量a的错误。

// 全局作用域
function f1() {
    // f1作用域
    // var a = 2
    function f2() {
        // f2作用域
        a = 1
        console.log(a)
    }
    
    f2()
    var a = 2
    console.log(a)
}
f1()
console.log(a)

打印的结果为1,2，报错。在函数f2中，a被赋值为1。根据作用域链，查看f2作用域，由于f2没有声明a，查找f1作用域，由于f1声明a，所以f2的a是f1声明的变量a。虽然声明语句在f2函数执行之后，由于JS的变量提升，凡是使用声明语句都会添加到作用域，所以f1的作用域已经存在a，也就是说f2从作用域查找的变量a是属于f1的。执行f2函数后，f1的变量a被赋值为1。后面有执行了一行赋值语句，a被赋值为2。所以前面2个打印的是1和2。最后一行打印变量a，根据作用域链，查找全局作用域，由于全局作用域没有声明变量a，所以最后一行报没有声明变量a的错误。

// 全局作用域
function f1() {
    // f1作用域
    // var a = 2
    function f2() {
        // f2作用域
        a = 1
        console.log(a)
    }
    
    f2()
    // var a = 2
    console.log(a)
}
f1()
console.log(a)

打印的结果为1,1,1.。在函数f2中，a被赋值为1。根据作用域链，查看f2作用域，由于f2没有声明a，查找f1作用域，由于f1没有声明变量a，查找全局作用域，由于全局作用域没有声明变量a，所以没有找到变量a。但是需要执行赋值语句，所以在全局作用域声明了变量a并执行了赋值操作。所以f1、f2的变量a是全局作用域的变量a，前面2个打印的是1和1。最后一行打印打印的是新增的全局作用域的变量a，a可以说是全局变量，所以最后一行打印的结果为1。

// 全局作用域
function f1() {
    // f1作用域
    // var a = 2
    function f2() {
        // f2作用域
        // a = 1
        console.log(a)
    }
    
    f2()
    // var a = 2
    console.log(a)
}
f1()
console.log(a)

这里在f2执行的时候直接报错。根据作用域链，查找f2作用域、f1作用域、全局作用域都没有找到变量a，所以直接报错。

// 全局作用域
function f1() {
    // f1作用域
    // var a = 2
    function f2() {
        // f2作用域
        var a
        console.log(a)
    }
    
    f2()
    // var a = 2
    console.log(a)
}
f1()
console.log(a)

打印结果为undefined，报错。f2从作用域链查找到f2的局部变量a，因为没有赋值，所以f2打印的结果为undefined，f1根据作用域链查找f1作用域和全局作用域，没有找到变量a，所以报错。

 

最后，JS一定要先声明再使用变量！