LET vs VAR и Подъем от блочной области до глобальной области

Question

В свете вопросов:

Понимание let против подъема var и

Объявлены ли переменные с let или const в ES6?

Я не понимаю, что происходит, когда поднятие поднимает переменную из области видимости в глобальную область видимости.

В моем коде у меня есть:

<script>

    "use strict";

    let PageInit = null;

    document.addEventListener("DOMContentLoaded", () => {

        PageInit = new IPageInit();

        doSomething();

    });

    function doSomething() {
        alert(PageInit.RefreshCounter); // 60 //correct
    }

</script>

PageInit создаваемое в глобальной области видимо для doSomething().

Однако, если я сделаю это:

<script>

    "use strict";

    document.addEventListener("DOMContentLoaded", () => {

        var PageInit = new IPageInit();

        doSomething();

    });

    function doSomething() {
        alert(PageInit.RefreshCounter); // referenceError
    }

</script>

Я не понимаю подъема должным образом. Я ожидал, что var PageInit внутри области видимости попадет в глобальную область, в первую очередь внутри тега <script>.

Но это не так.

Кто-нибудь может объяснить, почему нет? Или куда его поднимают?

Answer 1

У меня проблемы с выяснением ваших намерений в сценарии. однако и в любом случае ....

нет, var допустимо в пределах его " общего назначения " so " в дереве его функций и подфункции". Таким образом, вы не найдете его, потому что создаете новую ситуацию, и эта переменная будет потеряна, если не будет передана между параметрами.

Если вы используете let , это еще хуже, потому что действует только в этой функции и не имеет доступа к подфункциям, если не передан в качестве параметра.

Во всем этом вы действуете в системе событий ... события аналогичны ajax (создаются только в момент и теряют это событие). их трудно обработать, извлекая данные, не сохраняя их где-либо или не передавая их из функции в другую.

это полезно для понимания: https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e

более правильно версия будет выглядеть так:

простая идея (я не проверял ее, но логика c такова)

var XXX;

document.addEventListener("DOMContentLoaded", XXX => {

    XXX = new IPageInit();

    doSomething(XXX);

}, false); 

function doSomething(myval) {
    alert(myval); // now have XXX here 
}

Итак ... ххх перешел в успех события => и передано doSomethig.

или ...

document.addEventListener("DOMContentLoaded", () => {

    var XXX = getaval();

    doSomething(XXX);

}, false); 

function getaval() {
     return IPageInit(); // now have XXX here 
}

function doSomething(myval) {
    alert(myval); // now have XXX here 
}

Итак ... при событии => получить или сделать то, что у вас есть. если у вас ничего нет ... получите.

Надеюсь, я был вам полезен хоть немного.

Answer 2

Область действия в JavaScript

Область действия в JavaScript определяет доступность переменных, объектов и функций.

Существует два типа области действия в JavaScript .

1. Глобальная область
2. Локальная область

Глобальная область

Переменные, объявленные вне какой-либо функции, становятся глобальные переменные. Глобальные переменные могут быть доступны и изменены из любой функции.

Local Scope

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

Мы все знаем, что let - это область блока, а var - это текущий контекст выполнения.

Заключение

В вашем первом примере let может иметь доступ, поскольку его область действия является глобальной, и он находится в основном блоке. Во втором примере var находится в локальной области видимости, поэтому не может вывести его значение

Answer 3

document.addEventListener("DOMContentLoaded", () => {

    var PageInit = new IPageInit();

    doSomething();

});

var имеет функциональную область применения. Это означает, что независимо от того, где вы объявляете переменную в функции, она доступна для всей функции.

function fn () {
  console.log(b)
  var b = 10
}

fn()

/* this is same as writing
function fn () {
  var b ======================> hoisted
  console.log(b)
   b = 10
}
*/

Это не означает, что переменная, объявленная внутри функции, будет доступна вне ее. И именно поэтому функция PageInit в doSomething выдает ошибку ссылки. Вам придется инициализировать переменную вне функции, чтобы не получить эту ошибку

Answer 4

Я не понимаю, что происходит, когда подъем поднимает переменную из области видимости в глобальную область.

Этого никогда не происходит.

Хостинг влияет когда появляется переменная, а не , где .

document.addEventListener("DOMContentLoaded", () => {

    PageInit = new IPageInit();

Это неявно объявляет глобальную переменную. Это не размещено. Переменная не существует, пока функция не будет запущена. Попытка прочитать переменную до этого приведет к исключению.

document.addEventListener("DOMContentLoaded", () => {

    var PageInit = new IPageInit();

var объявляет переменную в области действия функции, в которой она объявлена. Так что не будет создавать глобальное.

Это - поднято ... но поскольку это первая строка в функции, это не имеет никакого практического значения.