变量提升示例

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 is undefined
x2 is 30
x3 is 50

如果我将此代码更改为：

        
var x = 10;

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

main();

输出为：

x1 is 10

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);

看到它的反应非常有趣。

Answer 2

所有变量和函数声明都 "hoisted" 或移至其范围的顶部。 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 Scoping and Hoisting

变量提升示例

Variable hoisting examples

javascript

variables

lexical-scope

hoisting