В этой статье мы поговорим о JS Hoisting и о том, как он работает с функциями и ключевыми словами var, let, и const.
Контент
- Что такое подъем
- Поднятие с помощью let и const
Что такое подъем
JS является однопоточным языком и выполняется построчно (с парадигмой JIT-компиляции).
Не вдаваясь в это направление, подъем в JS — это поведение, при котором переменные/функции объявляются в памяти еще до того, как переменные/функции будут инициализированы/объявлены, или, можно сказать, даже до выполнения первой строки кода. Рассмотрим код ниже:
console.log(a); // this logs the keyword "undefined" on the console var a = 10;
Здесь естественно должно произойти то, что, поскольку мы регистрируем a
ещё до его объявления, он должен выдать RefenceError.
ПРИМЕЧАНИЕ.undefined
является заполнителем по умолчанию до тех пор, пока переменная не будет инициализирована.
Интересно правда!!!. Давайте немного углубимся в это….
Создайте базовый проект JS и HTML, запустите его в Chrome и включите в файл JS следующий код:
console.log(a); var a = 10; function b() { console.log("calling function b") } b();
Теперь, когда вы закончите настройку, откройте dev-tools в chrome. После этого перейдите на вкладкуsource
и поместите отладчик в первую строку и обновите браузер, как показано на рисунке ниже:
в этот момент вы увидите, что на самом деле происходит за сценой в JS Engine, щелкните раскрывающийся список Scope
, как показано ниже:
Здесь, под кнопкой раскрывающегося списка Globe
, вы можете увидеть, что переменная a
и function b
уже выделила место в области Global
еще до того, как line 2
и line 4
были выполнены.
Интересно правда...??
Вы можете попробовать изучить, что произойдет дальше, с помощью обхода в отладчике.
Поднятие с помощью let и const
Переменные, объявленные с ключевыми словами let
и const
, также поднимаются, но в отличие от var
они не инициализируются значением по умолчанию (т.е. undefined
), и мы получим следующий ответ из приведенного ниже блока кода:
console.log(a); // Throws RefferenceError as the variable is not yet initialised let a = 10;
здесь a
недоступен до тех пор, пока он не будет инициализирован и находится в Временной мертвой зоне.
Но есть кое-что интересное, что можно наблюдать в движке Google V8:
здесь вы можете видеть, что в отличие от b
переменная a
не находится внутри области Global
.
В двух словах это подъем JS.
Надеюсь, вам понравится прочитанное.
Огромный привет этому плейлисту
Свяжитесь со мной в Twitter