JavaScript 范围冲突

Question

我试图了解 JavaScript 中的范围。如果我在函数外声明一个变量，它就是 GLOBAL。因此，我测试了以下代码以了解执行顺序。在下面的代码中，我希望 "demo1" 取全局值 "Volvo" 因为我在函数内部声明具有相同名称的局部变量之前呈现该文本。但令我惊讶的是，我看到的值为 "undefined".

<!DOCTYPE html>
<html>

<body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        var carName = "Volvo";
        myFunction();
        document.getElementById("demo").innerHTML = carName;

        function myFunction() {
            document.getElementById("demo1").innerHTML = carName;
            var carName = "Volvo1";
            document.getElementById("demo2").innerHTML = carName;
        }
    </script>
</body>

</html>

结果：

Volvo

undefined

Volvo1

我进一步修改以查看如果在函数内声明另一个全局变量会发生什么，如下所示：

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>

    <script>
        var carName = "Volvo";
        myFunction();
        document.getElementById("demo").innerHTML = carName;

        function myFunction() {
            document.getElementById("demo1").innerHTML = carName;

            //declaring another global variable
            carName = "Volvo1";
            document.getElementById("demo2").innerHTML = carName;
        }
    </script>
</body>

</html>

结果：

Volvo1

Volvo

Volvo1

这次 "demo1" 假定在函数外部声明的全局变量，即 "Volvo"。

谁能给我解释一下？

Answer 1

工作代码：这里是演示 http://jsfiddle.net/patelmit69/qa34ky3z/

var carName = "Volvo";
myFunction();
document.getElementById("demo").innerHTML = carName;
function myFunction() {
    document.getElementById("demo1").innerHTML = carName;
    carName = "Volvo1";
    document.getElementById("demo2").innerHTML = carName;
}

Answer 2

这是由于 var 声明的提升。所以myFunction里面发生的事情实际上是这样的：

function myFunction() {
    // This declaration hides your carName from the outer scope
    var carName; // Var declared here by hoisting
    document.getElementById("demo1").innerHTML = carName; // undefined
    carName = "Volvo1"; // Assigned value
    document.getElementById("demo2").innerHTML = carName;
}

在第二个例子中，你规避了这个声明

Answer 3

它的发生是因为变量提升。变量声明被提升到函数的顶部，所以你的函数像下面的代码一样工作：

    function myFunction() {
        var carName; //declaration
        document.getElementById("demo1").innerHTML = carName; // here carName is not defined yet
        carName = "Volvo1"; //assignment
        document.getElementById("demo2").innerHTML = carName;
    }

这就是 #demo1 值未定义的原因。

Answer 4

在JavaScript中称为Variable hoisting，定义为：

One of the trickier aspects of JavaScript for new JavaScript developers is the fact that variables and functions are "hoisted."

Rather than being available after their declaration, they might actually be available beforehand.

这意味着 你的 carName 变量的第二个 var 声明 是 excluding/eliminating 里面的第一个 功能。

因为如果您在代码的全局范围中使用var关键字声明了一个变量（代码的开头) 和 然后在另一个作用域（函数，...）中使用 var 关键字 重新声明同一个变量第二个声明将排除第一个而这个变量值变成undefined.

编辑：

可以看到in the Variable Hoisting section here变量提升的影响和变量声明和的区别变量赋值:

All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.

It is important to know that only variable declarations are hoisted to the top, not variable initialization or assignments (when the variable is assigned a value).

JavaScript 范围冲突

JavaScript scope conflicts

javascript

html

scope

variable-declaration

hoisting

编辑：