Прежде чем мы начнем поднимать, обратитесь к контексту выполнения. Это даст представление о том, как создаются и выполняются переменные/функции. Что происходит на этапе создания и выполнения в контексте выполнения.

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

Ссылки

https://developer.mozilla.org/en-US/docs/Glossary/Подъем