JavaScript变量作用域

JavaScript变量作用域教程

JavaScript 中的一个变量（常量、类型或函数）在程序中都有一定的作用范围，我们称之为作用域。

JavaScript变量作用域分为局部作用域、全局作用域、块级作用域和词法作用域。

JavaScript局部变量

只在固定的代码片段内可访问到的变量称为局部变量，最常见的局部变量是在函数内部定义的变量。

JavaScript全局变量

在任何地方都可以访问到的变量就是全局变量，对应全局作用域。

JavaScript块级变量

任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。

在 es5 之前没有块级作用域的的概念，只有函数作用域。

JavaScript词法作用域

变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。

词法作用域规则

函数允许访问函数外的数据
整个代码结构中只有函数可以限定作用域
作用域规则首先使用提升规则分析
如果当前作用规则中有名字了, 就不考虑外面的名字

JavaScript作用域链

只有函数可以制造作用域结构，那么只要是代码，就至少有一个作用域，即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

案例

局部变量

在函数内部定义的变量是局部变量

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript变量作用域</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function doSomething(){
                var name = "HaiCoder";
            }
            console.log("Outer Name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

22_javascript变量作用域.png

我们在函数的内部定义了变量 name ，即此时的变量 name 的作用域仅仅在函数内，name 是一个局部变量。

局部变量

在变量的作用域外，访问变量，程序报错

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript变量作用域</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function doSomething(){
                var name = "HaiCoder";
                console.log("inner Name =", name);
            }
            doSomething();
            console.log("outer Name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

23_javascript变量作用域.png

我们在函数的内部定义了变量 name ，即此时的变量 name 的作用域仅仅在函数内，name 是一个局部变量。最后，我们在函数的外部访问作用域在函数内部的变量，访问不到指定的变量。

全局变量

在函数外声明的变量为全局变量

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript变量作用域</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var name = "HaiCoder";
            function doSomething(){
                console.log("inner Name =", name);
            }
            doSomething();
            console.log("outer Name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

24_javascript变量作用域.png

我们在函数外部，定义一个全局变量 name，此时全局变量 name 可以在该源码文件的任何位置访问。

JavaScript变量作用域总结

JavaScript 中的一个变量（常量、类型或函数）在程序中都有一定的作用范围，我们称之为作用域。JavaScript变量作用域分为局部作用域、全局作用域、块级作用域和词法作用域。