Интересная история вызова функции перед ее объявлением
Поднятие — одна из немногих функций JavaScript, которые не имеют смысла без контекста. Важно понять, как это работает, потому что это часто всплывает в интервью. Изучая подъем, вы узнаете о том, как JavaScript выполняет код, выделяет память и о различиях в том, как создаются функции.
Согласно МДН:
«Подъем — это процесс, при котором интерпретатор перемещает объявление функций, переменных или классов в верхнюю часть их области видимости перед выполнением кода».
Подъем — это то, что позволяет этому произойти:
Возможность вызывать функции до того, как они будут объявлены, поначалу может показаться странной. Объяснение того, почему вы можете, довольно интересно. Это связано с тем, как выполняется код JavaScript.
В этой статье основное внимание будет уделено подъему функций, но я должен отметить, что JavaScript может выполнять подъем переменных и классов. По моему опыту, подъем функций встречается чаще.
Фон
Хорошее место для начала подъема — это ответ на вопрос: «В чем смысл?» Это ловкий трюк, который может сделать JavaScript, но почему это вообще возможно? Подъем недоступен, потому что сообщество призывало к этому как к функции. Это возможно из-за того, как JavaScript выполняет код. Давайте еще раз посмотрим на этот пример:
Когда я выполняю этот код, JavaScript создаст так называемый «глобальный контекст выполнения». Глобальный контекст выполнения — это место, где выполняется весь код, не находящийся внутри функции. Первым шагом в создании глобального контекста выполнения является то, что называется «этап выделения памяти».
На этапе выделения памяти JavaScript просканирует ваш код и выделит память для всех переменных и функций. Переменные, объявленные с помощью ключевого слова var, сохраняются со значением undefined, а функции сохраняются со всем кодом, необходимым для выполнения.
Следующий шаг — «этап выполнения кода». Как следует из названия, именно здесь ваш код JavaScript выполняется построчно. Таким образом, когда приведенный выше пример кода выполняется, строка 1 будет прочитана и будет ссылаться на функцию, уже хранящуюся в памяти, с кодом, необходимым для ее выполнения.
Вот что на самом деле происходит, когда мы говорим о подъеме. Мы можем вызвать функцию до ее объявления, потому что она будет присутствовать в переменной окружения перед выполнением.
Практическое использование
Я нашел подъем полезным, когда хочу сгруппировать функции и переменные вместе. Когда я пишу компоненты React, мне нравится, когда мои переменные объявляются вверху, а моя функция — внизу. По мне так просто лучше выглядит.
Без подъема мне пришлось бы объявлять свои функции вверху или смешивать функции и переменные вместе. Я также мог бы определить все функции во внешних файлах и импортировать их в свои компоненты. Некоторые функции настолько специализированы, что имеет смысл определять их внутри компонента, потому что они больше нигде не будут использоваться.
Сначала функции:
Смешанный:
Оба варианта работают, но я предпочитаю вариант с подъемом.
Исключения
Заметным исключением для подъема являются функциональные выражения. Если бы я обновил функцию из более ранней, чтобы она была функцией выражения или стрелкой, это выглядело бы так:
С этой структурой моя IDE выдаст мне ошибку.
Причина, по которой функциональные выражения нельзя вызывать раньше, восходит к фазе выделения памяти в нашем контексте выполнения. На этапе выделения памяти в памяти выделяются места для всех переменных, но с разными значениями.
Переменные с ключевым словом var сохраняются со значением undefined, а переменные с let и const сохраняются, но не инициализируются. let или const переменные, вызываемые до того, как их значения были установлены, существуют в так называемой «временной мертвой зоне». Вызов любого из них с ожиданием функции до назначения логики функции вызовет ошибку.
Подведение итогов
Я надеюсь, что эта статья была информативной для вашего понимания подъема. Как только вы узнаете, как выполняется JavaScript, становится намного проще понять подъем. Это важная концепция для изучения, потому что с ней связано очень много других концепций.
