怎样理解作用域链

前言: 理解了作用域链, 就理解了为什么函数作用域可以引用全局作用域下声明的变量, 反正则不行.

第一步: 理解下面这段代码

function fn1() {
    function fn2() {
        console.log(name);
    }
    fn2();
}

fn1(); // undefined

第二步: 理解下面这段代码

function fn1() {
    function fn2() {
        var name = "Lilei";
        console.log(name);
    }
    fn2();
}

fn1(); // "Liei"

第三步: 理解下面这段代码

function fn1() {
    var name = "Lilei";
    function fn2() {
        console.log(name);
    }
    fn2();
}

fn1(); // "Liei"

第四步: 理解下面这段代码

var name = "Lilei";
function fn1() {
    function fn2() {
        console.log(name);
    }
    fn2();
}

fn1(); // "Liei"

第五步: 理解下面这段代码

var name = "Lilei";
function fn1() {
    var name = "Hanmeimei";
    function fn2() {
        var name = "Liqiang";
        console.log(name);
    }
    fn2();
}

fn1(); // "Liqiang"

通过上面的代码我们构建了三个作用域: 

1. 全局作用域: window

2. 函数作用域: fn1

3. 函数作用域: fn2

在使用变量时, js会先在本作用域下去查找, 如果没有, 会顺着作用域链逐层查找, 如果找到, 则结束, 如果找到全局作用域window都还是没找到, 那就返回undefined;

注意:

这种沿着作用域链查找的操作只能是从里到外, 不能从外到里, 这也是为什么函数作用域可以使用全局作用域内的变量, 反正则不行的原因.