首页 > 编程笔记

JS作用域（全局作用域+局部作用域）

作用域（Scope）是当前执行环境的上下文（Current Context of Execution），它限制了变量、函数等的可见性，在当前作用域下定义的变量、函数等只能在当前及内部嵌套的子作用域中访问，而不能在外层或父作用域中访问，这样可以避免变量和函数的命名冲突，还可以形成私有数据，从而保护数据不被外部作用域中的代码篡改。

在 JavaScript 中，作用域分为全局作用域（Global Scope）和局部作用域（Local Scope）两种。

JS 全局作用域

在全局作用域中定义的变量、函数等可以在任何地方访问。在 JS 源代码最外层定义的变量、函数等都是在全局作用域中的。

例如，下方代码中的变量 a 和 func() 函数都定义在全局作用域中，并且在函数中可以访问全局作用域中的 a，代码如下： 
let a=  10;
function func(){ console.log(a) }
a;       //10
func();  //10
之前提到过最好不要使用 var 关键字定义变量，这是因为在浏览器环境中，使用 var 定义的全局变量，同时也会注册到全局对象 window 中（Node环境下不会），并且在浏览器开发环境中有经常需要使用到第三方库的情况，稍有不慎就会有同名的变量同时被注册到全局变量中，导致互相覆盖而引发问题，代码如下： 
var x=10;
globalThis.x;  //10;
var x="Hello";
globalThis.x;  //"Hello"
上方代码使用 var 定义了一个全局作用域的变量，并且使用 globalThis 访问全局变量，后面又使用同名变量覆盖了它的值，当再次访问时会发现变量值改变了，后续如果想再做与数字相关的操作，就会有问题。

globalThis 是 ES2020 中的新特性，用于统一访问全局对象，即在浏览器中是 window，而在 node 中则是global。

关于覆盖的问题，JavaScript 中使用 var 关键字定义的变量可以重复定义，后定义的变量会覆盖前边的，代码如下： 
var a=5;
var a=6;
console.log(a);  //6
要避免这个问题，可以使用 let 关键字，代码如下： 
let b=  10;
let b=  12;
console.log(b);  //SyntaxError:标识符b重复定义
需要注意的是，如果是在 Chrome 开发者工具中的 Console 面板编写代码，则允许使用 let 重复定义变量，这是为了方便在同一个 Console 环境下，使用相同的变量名编写不同的测试代码，省去思考新变量名的困扰。

JS 局部作用域

在函数中定义变量时，会创建一个局部作用域，在函数外边无法访问函数内部的变量，无论是使用 var、let 还是 const 定义的，代码如下： 
function func(){var x=5};
x;  //引用错误:x未定义
局部作用域可以访问全局作用域中的变量和函数，也可以访问父级及以上作用域中的变量和函数，如果有同名的变量或函数，则子作用域会覆盖父作用域中的变量或函数，代码如下： 
let x=5;
function outerFunc(){
    let x=4;
    function innerFunc(){
        let x=7;
        console.log(x);
    }
    console.log(x);
    return innerFunc;
}
let innerFunc=outerFunc();
innerFunc();
console.log(x);
上方代码输出结果是：
4
7
5

首先，代码一开始定义了全局作用域的 x，其值为 5，而在 outerFunc() 函数中，定义了同名变量 x，它的值为 4，这时 x 的值在 outerFunc() 中是 4，覆盖了全局中的 5。

后面又在 outerFunc() 中定义了 innerFunc() 函数，并且在里边再次覆盖了 x 的值，变成了 7，而 7 这个值只会在 innerFunc() 中有效，在 innerFunc() 大括号结束的时候就会失效，因此在 innerFunc() 定义的下方打印 x 的值仍然是 4。

当 outerFunc() 结束时，它里边的 x 也失效了，所以最外边使用 console.log(x) 时打印出的是全局作用域中的 x，其值为 5。

块级作用域

在局部作用域中，还有一个块级作用域（Block Scope）的概念。像 {} 语句块、if 语句、循环语句等会形成块级作用域，使用 let 或 const 定义的变量具有块级作用域，它们只在定义的大括号语句块中生效，离开大括号之后就不能访问了，代码如下： 
{
    let i=10;
}
console.log(i);  //引用错误,i未定义
for(let j=0;j<10;j++){}
console.log(j);  //引用错误,j未定义
不过对于 var 定义的变量，则没有块级作用域的概念，在上述语句块中使用 var 定义变量之后，在语句块之外还是可以访问的，它的作用域跟语句块所在的作用域是同级的。

例如，使用 var 定义循环的变量，如果循环被定义在全局作用域中，则 var 定义的变量也属于全局作用域，在 for 循环结束后仍然可以访问它的值，代码如下： 
for(var j=0;j<10;j++){}
console.log(j);  //10
这里的 j 最后运行 j++ 之后会变成 10，在循环结束之后仍然可以访问它的值。

JavaScript 的作用域属于静态作用域，称为词法作用域（Lexical Scope），它的意思是，作用域在编写代码的时候就已经确定了，而动态作用域是程序在运行的时候，才去动态地判断作用域。

词法作用域可以让理解作用域变得更简单，只需看代码就能够知道某个变量的作用域了，例如在函数中定义的作用域只需看该函数的大括号在哪里结束，那么变量的作用域就会在哪里结束。

JS 提升机制

这里需要区分一下声明和定义，声明指的是只指定变量名但不赋值，例如 var a，定义这里指的是指定变量名并赋值，例如 var a=1。

在 JavaScript 中，函数和使用 var 声明的变量有提升（Hoisting）机制，可以先使用后声明。JavaScript 编译器会提前检查代码中的函数及 var 变量，把它们提升到当前作用域的顶部，这样就能保证代码的正常运行了。

例如，测试使用 var 声明的变量的提升机制，代码如下： 
x=5;
console.log(x);  //5
var x;
上边代码中的 var x 声明被提升到了 x=5 的上方，作为第一行代码，然后才给 x 赋值为 5，这样打印出来的值就是 5。

需要注意的是，变量在提升的时候，因为只有声明部分被提升，所以如果在声明变量的同时进行了定义，再在上方访问该变量就会返回 undefined，代码如下： 
console.log(x);  //undefined
var x=5;
console.log(x);  //5
它相当于如下代码： 
var x;
console.log(x);  //undefined
x=5;
console.log(x);  //5
代码中的 var x 被提升到最顶部，剩下的赋值语句则保持在原位。

而如果使用 let 或者 const 关键字定义变量，则不能提前使用它们定义的变量，而是会直接抛出异常，代码如下： 
a=5;
console.log(a); //引用错误,不能在初始化之前访问a
let a;
对于函数，使用 function 关键字定义的普通函数全部都会被提升到作用域的顶部。例如下方代码中，函数的定义会移动到 printValue() 上方，代码如下： 
printValue();  //10
function printValue(){ console.log(10) }
但是，对于保存在变量中的函数表达式则不会有提升机制，因为只有声明部分被提升了，而使用函数表达式进行赋值的部分并未被提升，代码如下： 
printValue();
var printValue=function(){console.log(10)}  //类型错误:printValue不是函数
利用函数的提升，可以把函数定义的细节放到代码后边，把函数的调用放到前边，以便关注代码所执行的操作，屏蔽具体的实现细节，这样可以增强代码的可读性。

对于变量的提升机制，并不推荐使用，因为这样很难看出来变量是在哪定义的，从而容易引发问题，尤其是当有同名变量和函数名覆盖的时候，最难理解，代码如下： 
function func(){
    return x;
    x=5;
    function x(){}
    var x;
}
console.log(func());
代码输出的结果如下：
function x(){}

可以看到 func() 函数最后返回的 x 值为函数 x()，而不是 5。

这是因为 function x(){} 的定义首先被提升到了 func() 函数的第1行，var x 则按顺序提升到了第2行，由于声明变量x的时候并没有赋值，它不会覆盖掉函数 x() 的定义，之后就直接运行到 return x 语句了，返回了函数 x()，而 x=5 并没有机会被执行，代码如下： 
function func(){
    function x(){}
    var x;
    return x;
    x=5;
}

JS 临时隔离区

使用 let 关键字定义的变量，不能在初始化之前访问的原因是，它的声明被放到了临时隔离区（Temporal Dead Zone，TDZ）。临时隔离区会在执行块级作用域的第1行代码前生效，在变量初始化完成之后才会把变量从隔离区里释放出来。

来看一个例子，代码如下： 
let a=5;
function test(){
    console.log(a);  //引用错误,不能在初始化之前访问  'a'
    let a=6;
}
test();
在代码中，函数 test() 的外部和内部定义了同名的变量 a，但是在函数中打印a的值时却抛出了错误。

这就是临时隔离区的作用，虽然 test() 函数的外部作用域中有 a 变量，但是在函数内部这个块级的作用域中，它会在一开始把最后边 a 变量的声明放到临时隔离区中，只有在执行完 a=6 时才会从隔离区释放出来，在此期间，是不能访问隔离区中的变量的，所以打印 a 的值抛出了引用错误。

之所以称它为临时隔离区，是因为它只短暂地存在于变量初始化的过程中，而不是按代码的位置来判断是否放入隔离区，例如下方示例是可以正常执行的，代码如下： 
let a=5;
function test(){
    const inner=()=>console.log(a);
    let a=6;
    inner();
}
test();  //6
这是因为在 inner() 函数调用前，临时隔离区在 let a=6 这行代码之后就已经结束了，a 在 test() 函数这个作用域中已经成功被初始化为 6，再在 inner() 中就可以访问它的值了。

推荐阅读