Просматривая Интернет, вы можете найти следующее определение подъема:
Подъем 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 внутри.
Спасибо за прочтение!