JavaScript - еще одна прекрасная часть, которая заставляет нас любить язык.
Когда дело доходит до подъема, это большую часть времени сбивает нас с толку. Это один из любимых вопросов интервьюера. Итак, сегодня мы попытаемся понять подъем на простом языке непрофессионала.
Давайте начнем с некоторого JS-кода, чтобы понять подъем.
// JS Hoisting
var m = 10;
function miniScript() {
console.log(“miniScript is exploring JS”);
}
// Let's invoke the functions and variables
miniScript();
console.log(m);
Это простой JS-код, в котором мы объявили простые переменные и функции. Результат этого, как ожидалось
Так что это все, что мы знаем, но большой вопрос, что такое подъем?
Чтобы понять это, давайте изменим фрагмент кода, который мы написали выше.
//Call the function and variables even before we declaring them.
console.log(m);
miniScript();
function miniScript() {
console.log(“miniScript is exploring JS”);
}
var m = 10;
что вы должны думать о результатах этого?
Большая часть языка программирования выдаст здесь ошибку, потому что мы пытаемся запустить функции, которых к тому времени даже не существовало.
Но в этом прелесть JavaScript, которая заставляет нас любить его больше, когда мы исследуем его более глубоко.
Это результат приведенного выше фрагмента кода.
Результатом будет var m = undefined, и мы получим правильное значение для функции miniScript (). Это все из-за Hoisting. На непрофессиональном языке определение подъема будет выглядеть следующим образом:
Подъем в JavaScript - это доступ к переменным и функциям даже до их объявления или инициализации без каких-либо ошибок.
Итак, большой вопрос, как движок JavaScript это делает?
Давайте поместим отладчик в первую строку кода и остановим браузер, чтобы выполнить код и углубиться в него.
Я прилагаю запись экрана помещения отладчика в первую строку кода
Итак, как вы можете видеть в глобальной области видимости, если мы немного прокрутим вниз, мы сможем найти наши переменные и функцию.
Переменная была undefined, что означает, что движок JavaScript присвоил этой переменной память и дал ей заполнитель undefined.
Теперь, если мы console.log завершим нашу функцию, вы увидите, что произойдет что-то интересное.
// Let's see how our function will look in Global scope before executing.
console.log(miniScript);
function miniScript() {
console.log("miniScript is exploring JS");
}
JavaScript назначит память функциям и переменным еще до начала выполнения кода. Это называется подъемом.
Теперь давайте посмотрим, используем ли мы стрелочные функции, а затем что произойдет в глобальном стеке. Это не будет вести себя как традиционные функции.
// Arrow function behave like variables.
console.log(miniScript);
var miniScript = () => {
console.log("miniScript is exploring JS");
}
Вы можете видеть, что стрелочная функция ведет себя как переменные, поскольку ее значение undefined. Это означает, что функция назначает память в контексте выполнения и undefined - это заполнитель.
Подъем - это концепция JavaScript, в которой JS размещает все выражения функций и переменные в верхней части среды, и поэтому мы можем использовать переменную или функцию перед ее объявлением.
Все это происходит из-за Hoisting.
В следующий раз, если кто-то спросит вас о подъеме - подъем присваивает память переменным и функциям еще до их инициализации.
Давайте углубимся глубже и посмотрим, что произойдет в случае let и const?
// Use case for let or Const - I am using const console.log(m); const m = 'miniScript';
Как думаете, что будет на выходе? они будут вести себя так же, как var или функции?
посмотрим….
Ответ немного сложнее. Вы можете видеть, что мы получили ошибку «Uncaught ReferenceError: Невозможно получить доступ к« m »до инициализации». Это означает, что мы не можем получить доступ к переменной до инициализации, но, как вы можете видеть в областях, у нас есть еще одна локальная область, называемая Script, в которой наша переменная "m" и его значение не определено. Так что это значит?
Это означает, что let и const не относятся к глобальным областям действия. Они создают свою собственную локальную область поверх глобальной области.
Это называется временной мертвой зоной. Если вы попытаетесь получить доступ к этим переменным из мертвой зоны, вы получите эталонную ошибку. Но с точки зрения Подъема const и пусть память и заполнитель не определены. а это значит, что они тоже подняты.
Итак, это все о подъеме JavaScript. Я постарался сделать это простым и попытаться объяснить, что происходит под капотом. Как движок JavaScript выделяет память и поднимает переменные.
Если вам понравился этот пост, поставьте мне лайк. Это побудит меня написать еще один пост простым языком непрофессионала.
Написано с любовью ❤️ ‹miniScript /› на моем столе во время создания магазинов электронной коммерции с Anatta.
