变量提升示例

Question

你好，我有一段代码片段。当我删除同一代码的无关部分时，我对x1值的更改感到困惑。我搜索了一下，发现这与提升有关。但是，即使使用提升概念，x1的值仍然不清楚。请问有人能够帮我理清楚吗？

var x = 10;               
    
function main() {
  document.write("<br>x1 is " + x);
  x = 20;
  if (x > 0) {
    var x = 30;
    document.write("<br>x2 is " + x);
  }
  var x = 40;
  var f = function(x) { 
    document.write("<br>x3 is " + x); 
  }
  f(50);
}

main();

这段代码的输出结果是：

x1未定义
x2为30
x3为50

如果我将此代码更改为：

        
var x = 10;

function main() {
  document.write("<br>x1 is " + x);  
}

main();

输出结果如下：

x1的值为10

- amulamul

Answer 1

所发生的事情是一个常见的陷阱。

最简单的解释是，当您在main函数内设置var x = 30时，实际上正在重新定义var x = 10在此函数内部使用的范围。这与Javascript的执行方式和范围有关。

通过在函数内定义x，您的x范围已更改。以下是我所指的示例及代码版本，可以正常工作。

var test = 'test';
function run(){
    console.log(test);
    var test=1;
}

您的代码已更新：

var x = 10; 
        function main() {
            console.log("<br>x1 is " + x);
            x = 20;
            if (x > 0) {
                x = 30;
                console.log("<br>x2 is " + x);
            }
            x = 40;
            var f = function(x) { console.log("<br>x3 is " + x); }
            f(50);
        }
        main();

顺便问一句，不错的问题。

由于这涉及到Javascript执行的一个非常有趣的范围，考虑以下代码及其输出以获得完整的想法。

var test = 'test';

function run(){
  console.log(test);
  test=1;
  console.log(test);
  var test=2;
  console.log(test);
}

console.log(test);

run();

console.log(test);

非常有趣的是观察它的反应。

- Jesse

---

他们实际上重新定义了变量x的作用域，将原始的x赋值为20。 - EasyBB

不确定您是否正确地理解了“杀死作用域”的含义。至少，“删除它的作用域”是错误的，如果不是极其误导人的话。简单来说，存在多个作用域，现在在不同的作用域中有两个具有相同名称的变量。 - Bergi

@Bergi - 你是正确的，已编辑为了未来的访问者。 - Jesse

@Jesse 在“你的更新代码”部分中，我可以看到你从var x = 30中删除了var。我认为你这样做是为了使x的作用域变成全局，这样它就不会在函数作用域内被提升。这很有道理，但是x1的输出仍然是未定义的，这意味着无论有没有var，它对输出都没有任何影响。 - amulamul

Answer 2

所有变量和函数声明都会被“提升”或移动到其作用域的顶部。对于变量x，它的值为undefined是因为var x语句被移动到main的顶部，但赋值= 30没有被移动。因此，您的代码将更像这样：

var x = 10;                             // x is 10
function main() {
    var x;                              // x declaration is "hoisted"
    document.write("<br>x1 is" + x);    // x1 is undefined
    x = 20;                             // x is 20
    if (x > 0) {
        x = 30;                         // x is 30
        document.write("<br>x2 is" + x);// x2 is 30
    }
    x = 40;                             // x is 40
    var f = function(x) {               // x is 50
        document.write("<br>x3 is" + x);// x3 is 50
    }
    f(50);
}
main();

你可以在这里阅读更多关于提升的内容：JavaScript作用域和提升

- jungy