Анализ поведения JavaScript при подъеме.
Одно из уникальных свойств JavaScript - это подъем переменных и функций, подъем позволяет нам использовать переменную или функцию до того, как они будут объявлены.
Независимо от того, где мы объявляем наши переменные и функции, JavaScript перемещает их в верхнюю часть области видимости на этапе компиляции. Здесь следует отметить, что JavaScript поднимает только объявления, а не инициализации. Также поднимаются переменные, объявленные с помощью ключевых слов var, а не те, которые объявлены с помощью ключевых слов let и const
Ниже мы увидим различные примеры, которые помогут нам лучше понять поведение JavaScript при подъеме переменных и функций.
Понимание на примерах:
Ниже мы рассмотрим различные сценарии и поймем, когда подъемник работает, а когда нет.
Регулируемый подъем 📌
Рассмотрим фрагмент кода ниже и посмотрим, каким будет результат?
name = ‘tony’ console.log(name); var name;
Вывод: Тони
Несмотря на то, что мы инициализировали переменную name до того, как мы ее объявили, наша программа отображает вывод как tony, поскольку JavaScript перемещает объявление в верхнюю часть области видимости, так что это как на самом деле ведет себя программа.
var name; name = ‘tony’ console.log(name);
Примечание📝: Хотя кажется, что объявление поднялось в программе при подъеме, на самом деле здесь происходит то, что объявления функций и переменных добавляются в память на этапе компиляции. .
Давайте посмотрим, что произойдет, если мы объявим и инициализируем переменную после console.
console.log(name); var name = ‘tony’
Вывод: не определен
Здесь мы получаем результат как undefined, потому что поднимаются только объявления, а не инициализация, поэтому наша программа фактически ведет себя, как показано ниже.
var name; console.log(name); name = ‘tony’
объявление переменной перемещено наверх, но инициализация все еще остается после оператора консоли, таким образом, переменная name объявляется, но не была инициализирована, и мы получаем результат как undefined.
Когда переменная объявлена внутри функции, она будет поднята вверху функции, см. Пример ниже.
var text = ‘Hello’; function sayHello() { name = ‘tony’; console.log( text + ‘ ‘ + name); var name; } sayHello(); console.log(name);
Вывод: Привет, Тони
ReferenceError: имя не определено
Мы получаем справочную ошибку, когда пытаемся получить доступ к переменной name в операторе консоли за пределами функции, потому что теперь переменная name поднимается вверху функции приветствия, а не в верхней части программы, и становится локальной переменной вместо глобальная переменная, как показано ниже
Функция Hoisiting 📌:
Так же, как объявления переменных поднимаются и перемещаются наверх, объявленные функции также поднимаются, см. Пример ниже:
sayHello(); function sayHello() { console.log( ‘Hi there, nice to meet you !!’); }
Вывод: Привет, приятно познакомиться !!
Мы вызвали функцию sayHello () перед ее объявлением и получили желаемый результат из-за подъема, программа выполняется следующим образом:
объявление функции перемещено вверх из-за подъема!
Однако если мы используем функции как выражение, оно не поднимается, потому что, будь то подъем переменной или функции, он работает только с ключевым словом var, см. Ниже.
sayHello(); let sayHello = function() { console.log( ‘Hi there, nice to meet you !!’); }
Вывод: ReferenceError: невозможно получить доступ к "sayHello" до инициализации.
Резюме📝:
Подъем - это стандартное поведение JavaScript, которое позволяет нам получать доступ к переменным и функциям до их объявления. Подъем работает с ключевым словом var, а не с ключевыми словами let и const, поднимаются только объявления, а не инициализация. Если переменная объявлена внутри функции, она будет поднята вверху функции, а не на уровне глобальной области видимости. Функции тоже поднимаются, но функции как выражения - нет.
Надеюсь, эта статья помогла вам разобраться в подъеме JavaScript. Если вам понравилась эта статья, похлопайте в ладоши 👏 и поделитесь своими знаниями.