JavaScript基础混乱

Question

嗨,我想了解JavaScript的基本原理,并陷入一个条件.

    var foo = 1;
    function bar(){
        foo = 10;       
        return;
        function foo(){}
    }
    bar();
    alert(foo);

在这里alert(foo),会给我1,并且我知道在return语句之后,函数foo()将不会执行.但是现在如果改变代码:

    var foo = 1;
    function bar(){
        foo = 10;       
        return;
    }
    bar();
    alert(foo); 

在条形函数中,如果我将删除函数foo().然后alert(foo)会给我10

请帮忙,如果有人能解释我为什么？

Answer 1

这称为Javascript提升

我将尝试详细解释它.这就是我们所拥有的

var foo = 1;

function bar(){
  foo = 10;       
  return;
  function foo(){}
}

bar();
alert(foo);

解释器会将其重写为

var foo = 1;

function bar(){
  function foo(){}  // this is also equal to var foo = function(){};
  foo = 10;       
  return;      
}

bar();
alert(foo);

所以现在向你解释提升的代码.

var foo = 1; // global variable; 

function bar(){
  var foo = function(){};  // foo is local variable of type function
  foo = 10;                // foo is changed to hold a number
  return;      
}

bar();
alert(foo);  // you alert global variable.

正如您所看到的,如果代码function foo(){}存在,它将被视为bar()范围内的局部变量,并且对该代码的任何更改都将foo被视为局部变量更改.

• 当你有 function foo(){}你的bar(),你甚至没有触及全局变量..因此提醒1.

• 如果没有 function foo(){},则触摸全局变量,从而发出警报10.

  现在我希望你理解输出..

Answer 2

我知道在 return 语句之后，函数 foo() 将不会执行。

这不是真的。

函数声明被提升。

function foo(){}创建一个名为的局部变量foo（将新函数分配给它），然后foo = 10覆盖它。但你永远不会测试该变量的值foo。

在 bar 函数中，如果我将删除函数 foo()。然后alert(foo)会给我10

您不再调用局部变量，foo因此您将覆盖同名的全局变量。

比较：

(function() {
  console.log("Version 1");
  var foo = 1;

  function bar() {
    console.log("At top of bar, foo is " + foo);
    foo = 10;
    console.log("After assignment in bar, foo is " + foo);
    return;

    function foo() {}
  }
  bar();
  console.log("Global foo is " + foo);
}());

(function() {
  console.log("Version 2");
  var foo = 1;

  function bar() {
    console.log("At top of bar, foo is " + foo);
    foo = 10;
    console.log("After assignment in bar, foo is " + foo);
    return;
  }
  bar();
  console.log("Global foo is " + foo);
}());