Прежде чем мы начнем поднимать, обратитесь к контексту выполнения. Это даст представление о том, как создаются и выполняются переменные/функции. Что происходит на этапе создания и выполнения в контексте выполнения.
Hoisting , в общем, относится к доступу к переменной/вызову функции до ее объявления. То есть выполнение переменной или функции перемещается на верхний уровень с того места, где объявлена переменная или функция.
Если вы посмотрели на этапы контекста выполнения, вы можете понять, что именно происходит при подъеме. Подъем позволяет безопасно использовать функции в коде до их объявления. Объявления переменных и классов также могут быть подняты, но их результат может быть не таким, как ожидалось, и не рекомендуется, за исключением функций.
Поднятие переменных
console.log(name); var name = "John"; // This would log the value as undefined
Как упоминалось ранее в контексте работы с выполнением, всякий раз, когда код выполняется, он проходит две фазы: creation
и execution
.
Всякий раз, когда на переменную ссылаются, она проходит две вышеуказанные фазы. На этапе создания память выделяется для переменной name
с начальным значением undefined
, поэтому значение для подъема переменной будет undefined
на этапе выполнения.
Итак, теперь мы знаем причину значения undefined
при подъеме переменной. Если на переменную ссылаются после объявления и присвоения значения, фаза выполнения будет иметь предоставленное значение (в нашем случае John
будет значением).
Подъем функций
Теперь поговорим о function hoisting
. Он похож на переменный подъем, но имеет некоторые преимущества.
Как вы могли заметить, функция вызывается в контексте выполнения, глобальный контекст помещает функцию непосредственно в память, и всякий раз, когда функция вызывается, новый контекст выполнения создается и уничтожается при выходе.
Обычно мы называем это «локальным контекстом или контекстом выполнения функции».
greetUser("John") function greetUser(user) { console.log(`Hello ${user}!`) } // Invoking the function would return : Hello John!
Что произошло при подъеме функции?
- Глобальный контекст выполнения создает память для функции и помещает в нее все объявление функции
greetUser
. - Затем функция создает свой собственный контекст выполнения при вызове. И функция запускается в их собственном контексте выполнения.
По сути, все объявление функции помещается в память на этапе создания.
Рекомендации
Давайте разберем несколько основных правил, которым необходимо следовать при использовании подъема.
- Всегда определяйте переменные и функции перед их использованием в коде. Это снижает вероятность непредвиденных ошибок и экономит время отладки.
- Подъем функции имеет преимущества только тогда, когда функция создается с использованием объявления функции.
greetUser(user) var greetUser = function(user){ console.log(`Hello ${user}!`) } // This would return undefined
В этом случае приведенный выше код будет рассматриваться как подъем переменной, и, следовательно, значение равно undefined
.
- Чтобы не ссылаться на переменные до их объявления, используйте
let
иconst
. Вместо возвратаundefined
это вернетReferenceError
.
ПочемуReferenceError
причина в том, что оно перейдет вTemporal Dead Zone
.
Вскоре будет создана статья о Temporal Dead Zone.
Я надеюсь, что вы нашли эту статью полезной и помогли понять основы контекста выполнения и подъема. Следуйте за мной для получения дополнительных статей о Javascript.
Не стесняйтесь ссылаться на некоторые из моих репозиториев GitHub