注意点: 初学者在研究 ​​"作用域链"​​ 的时候最好将 ES6 之前和 ES6 分开研究。


需要明确


  • ES6 之前定义变量通过 var
  • ES6 之前没有​​块级作用域​​, 只有全局作用域和局部作用域
  • ES6 之前函数大括号外的都是全局作用域
  • ES6 之前函数大括号中的都是局部作用域


ES6 之前的作用域链


  • 全局作用域我们又称之为​​0​​ 级作用域
  • 定义函数开启的作用域就是 1级 / 2级 / 3级 / ...作用域
  • JavaScript 会将这些作用域链接在一起形成一个链条, 这个链条就是作用域链
  • 除 0 级作用域以外, 当前作用域级别等于上一级 +1


0 ---> 1 ---> 2 ---> 3 ---> 4

变量在作用域链查找规则


  • 先在当前找, 找到就使用当前作用域找到的
  • 如果当前作用域中没有找到, 就去上一级作用域中查找
  • 以此类推直到 0 级为止, 如果 0 级作用域还没找到, 就报错


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        // 全局作用域 / 0级作用域
        // var num = 123;
        function demo() {
            // 1级作用域
            // var num = 456;
            function test() {
                // 2级作用域
                // var num = 789;
                console.log(num);
            }

            test();
        }

        demo();
    </script>
</head>
<body>
</body>
</html>

如上是 ES6 之前的作用域链，接下来看看 ES6 的作用域链。

需要明确


  • ES6 定义变量通过​​let​​
  • ES6 除了全局作用域、局部作用域以外, 还新增了块级作用域
  • ES6 虽然新增了块级作用域, 但是通过 let 定义变量并无差异 (都是局部变量)


ES6 作用域链


  • 全局作用域我们又称之为 0 级作用域
  • 定义函数或者代码块都会开启的作用域就是 1级 / 2级 / 3级 / ...作用域
  • JavaScript 会将这些作用域链接在一起形成一个链条, 这个链条就是作用域链
  • 除 0 级作用域以外, 当前作用域级别等于上一级 +1


0 ---> 1 ---> 2 ---> 3 ---> 4

变量在作用域链查找规则


  • 先在当前找, 找到就使用当前作用域找到的
  • 如果当前作用域中没有找到, 就去上一级作用域中查找
  • 以此类推直到 0 级为止, 如果 0 级作用域还没找到, 就报错


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        // 全局作用域 / 0级作用域
        // let num = 123;
        {
            // 1级作用域
            // let num = 456;
            function test() {
                // 2级作用域
                // let num = 789;
                console.log(num);
            }

            test();
        }
    </script>
</head>
<body>
</body>
</html>