javascript - JavaScript 如何解释作用域中的变量？

Question

我有点怀疑javascript解释器的工作原理！特别是我在这里提到的情况。

var a = 5;
function foo(){
debugger
a = 100;

if(false){
var a = 10;
}

a = 1000;
}

foo();
console.log(a);

只需将上面的代码复制并粘贴到浏览器的控制台中，预期的答案是 1000。它返回的是 5。

我已经故意放置了调试器，当它命中调试器时，SCOPE 部分显示变量a在未定义的范围内。因此，对局部变量 a 进行了进一步的分配，它根本不应该被创建，因为它位于 false 块中。

我知道变量的范围不限于{}，但仅限于函数。但是这个案例是一个惊喜！

谁能解释一下？

score 3 · Accepted Answer

var 声明涵盖整个范围。

function() {
  a = 5;
  var a = 10;
}

相当于：

function() {
  var a;
  a = 5;
  a = 10;
}

函数范围内的局部变量也是如此a，而不是第一部分的全局变量和之后的局部变量（这太复杂了！）。

score 1 · Accepted Answer

这是因为您在代码中有一个 var a 。函数中的所有声明都被提升到顶部，即使它看起来像 var a = 10; 永远不会执行。删除 var ，它将按预期运行。

score 1 · Accepted Answer

对您的代码进行少量格式化。

var a = 5;
function foo(){
   debugger
   a = 100;

   if(false){
       var a = 10;
   }
   a = 1000;
}

foo();
console.log(a);

提升是您正在寻找的关键字。Javascript提升变量。意味着它将局部变量的声明放在函数的顶部，而不管它是否会被执行。因此，在解释后，您的代码如下所示。

var a = 5;
function foo(){
   var a;
   debugger
   a = 100;

   if(false){
       a = 10;
   }
   a = 1000;
}

foo();
console.log(a);

所以 a 成为函数内部的局部变量，因此函数内部值的变化只会改变局部变量而不是全局变量。因此控制台打印 5，全局变量，其值从未改变。

3 回答 3