Конфликты областей JavaScript

Я пытался понять область действия в JavaScript. Если я объявляю переменную вне функции, она является глобальной. Поэтому я протестировал следующий код, чтобы понять последовательность выполнения. В следующем коде я ожидал, что "demo1" примет глобальное значение, которое является "Volvo", поскольку я отрисовываю этот текст перед объявлением локальной переменной с тем же именем внутри функции. Но, к моему удивлению, я вижу ценность быть "неопределенный".

<!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".

Может ли кто-нибудь объяснить мне это?
4 7
javascript html scope hoisting variable-declaration

4 ответа:

В JavaScript это называется переменный подъем, который определяется как:

Одним из самых сложных аспектов JavaScript для новых разработчиков JavaScript является тот факт, что переменные и функции "поднимаются"."

Вместо того, чтобы быть доступными после их объявления, они могли бы на самом деле будьте доступны заранее.

Значит второй ВАР декларации вашего carName переменная , исключая/исключая первый внутри функции.

Потому что если объявить переменную с ключевым словом var в глобальной области вашего кода (начало вашего кода) и затем повторно объявить ту же переменную с ключевым словом var в другой области(функция, ...) это второе объявление исключит первое и это значение переменной становится undefined.

Правка:

Вы можете увидеть В разделепеременная подъемная сила здесь влияние переменной подъемной силы и разница между переменной декларацией и переменная назначение:

Все объявления переменных поднимаются (поднимаются и объявляются) на вершину функции, если они определены в функции, или на вершину глобального контекста, если они находятся вне функции.

Важно знать, что только объявления переменных поднимаются до вершина, а не инициализация переменной или присвоения (когда переменная присваивается значение).

5

Это связано с поднятием декларации 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;
}

Во втором примере вы обходите это объявление

2

Рабочий код: вот демо 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;
}
0

Это происходит из-за переменной подъемной силы. Объявления переменной поднимаются на вершину функции, поэтому ваша функция работает следующим образом: 

    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 не определено.
0