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进行了进一步的赋值，这根本不是要创建的，因为它是在假块中。

我知道变量的范围不仅限于{}，而是仅限于函数。但这个案子令人惊讶！

任何人都能解释一下吗？

Answer 1

var声明包含整个范围。

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

相当于：

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

所以a是函数范围内的局部变量，第一部分不是全局变量，后面是局部变量（这将是如此复杂！）。

Answer 2

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

Answer 3

对代码的格式很少。

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

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

foo();
console.log(a);

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

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

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

foo();
console.log(a);

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