深入浅出：JavaScript作用域链

Posted 2020-10-11 书山有路

　　1. 什么是作用域

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量的作用范围。

　　2. 变量的分类和变量作用域的分类

在javascript中，变量分为全局变量和局部变量，与此相对应的，变量的作用域有全局作用域和局部作用域两种。

　　3. 全局变量和全局作用域

　　在函数外声明的变量为全局变量，全局变量所对应的作用域为全局作用域。看如下代码：

var globalEle = "世界这么大";
function func(){
    console.log("函数内部：" + globalEle);
}
func();
console.log("函数外部：" + globalEle);

　　打印结果：

　　结果分析：

　　在函数外部声明了一个变量globalEle，因此它为全局变量，拥有全局作用域，全局变量无论在函数内部还是函数外部都可以被访问。

　　4. 局部变量和局部作用域

　　在函数内声明的变量为局部变量，局部变量所对应的作用域为局部作用域。看如下代码：

function func(){
    var localEle = "而我在国内"
    console.log("函数内部：" + localEle);
}
func();
console.log("函数外部：" + localEle);

　　打印结果：

　　结果分析：

　　在函数内部声明了一个变量localEle，因此它为局部变量，拥有局部作用域，局部变量只能在当前声明的函数内起作用，因此在函数外访问局部变量会提示not defined。

　　5. 什么是作用域链

　　作用域链的建立过程此处不详细讲，一些官网定义的抽象的概念也不多加以阐述，就通过下面的例子来看一下，看如下代码：

var ele = "函数外面定义的变量";
function func(){
    var ele = "函数func内定义的变量";
    function son(){
        var ele = "函数son内定义的变量";
        console.log(ele);
    }
    son();
}
func();

　　打印结果：

　　结果分析：变量ele被定义了三次，但他们的作用域不同，第一次定义的ele是全局变量，拥有全局作用域。第二次定义的ele是局部变量，在函数func内起作用，因为函数son是函数func的子函数，所以在函数son内也可以访问到这里定义的变量。第三次定义的ele也是局部变量，在函数son内部起作用。所以，在函数son内部访问变量ele也就是打印变量ele的时候，会依照就近原则先去访问函数son内部的定义的变量ele，如果找不到会一层层网上找，直到最上面一层，如果依旧找不到会提示not defined。希望你能通过这个简单的案例理解作用域链。

　　好啦，就说这么多咯，以上说法有不严谨之处还请各位指正，祝工作愉快！