JS 作用域

28 阅读3分钟

image.png

JavaScript 的作用域是指变量和函数的可访问范围。在 JavaScript 中,作用域有两种类型:词法作用域和动态作用域。

  • ::词法作用域::是指变量和函数的可访问范围由它们在代码中声明的位置决定。在 JavaScript 中,::词法作用域是静态的,即在代码编写/定义时就已经确定了::。

    函数的作用域在定义的时候就已经决定

  • ::动态作用域是::指变量和函数的可访问范围由它们在代码执行时所处的上下文决定。在 JavaScript 中,::动态作用域是通过 this 对象实现的::。

    函数的作用域在调用的时候才决定其作用域

总的来说,作用域是 JavaScript 中非常重要的概念,它决定了变量和函数的可访问范围,也决定了代码的执行顺序和结果。


var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

上面代码输出结果是1还是2,为什么

上面的代码输出结果是1,因为在函数 foo 中,变量 value 的查找是基于词法作用域的,即在函数定义时查找变量,而不是在函数调用时。因此,函数 foo 中访问的是全局变量 value 的值,而不是局部变量 value 的值。

具体来说,在函数 bar 中声明了一个局部变量 value,并将其赋值为2。然后,在函数 bar 中调用函数 foo,foo 函数中访问的变量 value 并没有在函数内部声明,因此 JavaScript 引擎会沿着作用域链向上查找变量 value,最终找到了全局变量 value 并输出其值为1。

需要注意的是,::在 JavaScript 中,变量的查找顺序是由作用域链决定的::。作用域链是一个由当前执行环境和所有包含它的父级执行环境所组成的链表,它决定了变量的查找顺序。当 JavaScript 引擎在当前执行环境中无法找到某个变量时,就会沿着作用域链向上查找,直到找到该变量或到达全局执行环境为止。


value 的作用域链如下:

foo函数作用域			foo函数作用域			bar函数作用域
	|					|				|
全局作用域作用域		           bar函数作用域			    全局作用域
						|
					    全局作用域
作用域链:value作用域->foo函数作用域,找不到->全局作用域,value=1

当在 foo 函数中访问变量 value 时,首先在 foo 函数作用域中查找,没有找到该变量,然后沿着作用域链向上查找,在 bar 函数作用域中找到了该变量并赋值为2,但是 foo 函数中仍然无法访问到该变量,因为 foo 函数的作用域链中没有 bar 函数作用域。最终,在全局作用域中找到了全局变量 value 并输出其值为1。