Просматривая Интернет, вы можете найти следующее определение подъема:

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

Несмотря на то, что это определение хорошо помогает развить поверхностное понимание того, как работает подъем, в нем отсутствуют некоторые детали, которые помогли бы вам понять, как движок JavaScript работает под капотом.

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

Этапы создания и выполнения.

Этап создания

Перед выполнением кода движок JavaScript сначала «просматривает» код:

Он выбирает все объявления функций и сохраняет их в специальном месте своей памяти вместе с их ссылкой. Он также сохраняет все переменные в этой памяти со значением undefined.

Этап выполнения

На этапе выполнения переменным присваиваются их фактические значения, и функции выполняются.

Это означает, что еще до того, как движок JavaScript фактически достигнет строки кода, где функция или переменная объявлены лексически(фактическая строка кода с объявлением переменной) , он уже «знает», что существует в программе, и сохраняет их в своей памяти.

Примечание.JavaScript поднимает только объявления, а не инициализации.

Звучит довольно запутанно до сих пор, не так ли? Давайте перейдем к практическим примерам, чтобы лучше понять это:

Переменные:

var:

Этот пример выше демонстрирует нам легко предсказуемое поведение. Сначала определяется a, а затем его значение записывается в консоль.

Но учтите это:

В этом примере a сначала регистрируется в консоли, а затем объявляется и инициализируется. Но почему у нас нет ошибки? Это связано с тем, что до выполнения этого кода движок JS уже нашел эту переменную и сохранил ее в своей памяти со значением undefined на этапе создания. Это подъем в действии!

Примечание. Когда движок достигает строки кода, где переменной присваивается значение (инициализируется), он заменяет undefined этим значением.

const и let:

Но как насчет переменных, объявленных с помощью const и let? Что ж, хотя эти переменные тоже поднимаются, к ним нельзя получить доступ, пока движок не достигнет строки кода, где они инициализированы. Если мы попытаемся получить к ним доступ до инициализации, мы получим Reference Error.

Рассмотрим примеры ниже:

Функции

Когда дело доходит до функций в JavaScript, объявления функций поднимаются, а выражения функций — нет (на самом деле это немного сложнее, и я объясню подъем выражений функций ниже). Как описано выше, на этапе создания JavaScript будет хранить ссылку на функцию в своей памяти. На практике это означает, что мы можем вызывать функцию до того, как она будет лексически объявлена ​​в нашем коде.

Давайте посмотрим на пример ниже:

Здесь мы видим стандартное предсказуемое поведение функции. Сначала он был объявлен, а затем вызван внизу, и мы можем увидеть ожидаемый результат.

Теперь давайте посмотрим на следующий пример:

В приведенном выше коде функция вызывается первой и только затем объявляется под вызовом. Однако мы видим точно такой же вывод, как и в предыдущем примере. Опять же, как описано ранее, поскольку механизм JS сохранил ссылку на эту функцию до выполнения, мы можем получить к ней доступ до того, как она будет фактически лексическиопределена в нашем коде.

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

Рассмотрим примеры ниже:

Как видно выше, мы получаем тот же результат, что и при поднятии const или let с другими типами данных. . Доступ к const и letневозможен до их инициализации.

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

Перед инициализацией func ее значение равно undefined, что не является функцией и, следовательно, не может быть называется.

Вот как работает подъем функций в JavaScript!

Заключение

Теперь мы понимаем, что подъем в JavaScript не просто перемещает ваши объявления переменных и функций в начало файла. Он фактически выделяет место в своей памяти для всех функций и переменных в вашем коде и сохраняет их там. Хотя объявления функций полностью хранятся в этом пространстве (ссылка на функцию), всем переменным в вашем коде изначально присваивается значение undefined, до того, как обработчик достигнет строки кода, где они инициализируются, и обновит их новым значением.

Важно понимать, как работает подъем, чтобы предотвратить ошибки и неожиданные результаты.

Надеюсь, вы нашли эту статью полезной и узнали немного больше о подъеме и о том, как работает JS внутри.

Спасибо за прочтение!