Что такое контекст выполнения, лексическое окружение и подъем?

Привет всем, давайте обсудим, как JavaScript Engine реагирует на функцию или переменную.

Мы вызываем функцию с ее именем и добавлением скобок в конце. Так,

function_name()

Как только JS Engine увидит эти скобки, он создаст что-то под названием Execution Context.

Контекст выполнения

Контекст выполнения содержит код, который в данный момент выполняется, и все, что помогает в его выполнении.

function one() {
   return 'Function one'
}
function two() {
   return one()
}
function three() {
    return two()
}
three()

Итак, когда JS Engine видит three() в приведенном выше коде, он запускает эту функцию и первое, что он делает, — создает для нее контекст выполнения и добавляет это контекст выполнения в стек, затем он пытается запустить эту функцию и видит, что она вызывает другую функцию two(), поэтому она собирается создать новый контекст выполнения и помещается в стек. В этой функции JS Engine видит другую функциюone(), после того как эта функция создаст свой собственный контекст выполнения, она вернет строку «Function one» для two() который возвращается к three(), и весь стек вызовов удаляется, и у нас остается строка «Function one».

Перед всем упомянутым выше, когда код запускается на JS Engine, создается глобальный контекст выполнения. И когда код начинает выполняться, новый контекст выполнения добавляется всякий раз, когда видна функция. Затем он начинает выполнять наш код до тех пор, пока все не выскочит из стека, и как только весь наш код будет запущен, глобальный контекст выполнения выскочит из стека.

Каждый раз, когда мы запускаем код в JS, он запускается внутри контекста выполнения.

Когда создается глобальный контекст выполнения, он дает нам глобальный объект (окно), ключевое слово this и действие подъема. Ну, они оба будут равны друг другу в глобальном контексте выполнения. Существует длинное объяснение ключевого слова «этот», но вкратце «это» относится к текущему объекту.

Итак, как только мы закончили со всем вышеперечисленным, который называется этапом создания в нашем JS Engine, у нас есть второй этап, который называется этапом выполнения, где мы фактически запускаем наш код.

Лексическое окружение

Лексическое окружение — это просто место, где мы что-то пишем. Вы можете думать об этом как о маленькой планете, которая создается каждый раз, когда мы создаем контекст выполнения. В приведенном выше примере все три функции можно назвать отдельной планетой, если у нас есть функция, скажем, four(), которая объявлена ​​внутри функции two()значит эта функция написана в другом мире и эта новая функция лексически находится внутри функции two(). Теперь мы можем сказать, что функцииone(), two() и three()имеют глобальное лексическое окружение, а Four() имеет лексическое окружениеtwo(). Контекст выполнения сообщает нам, какая лексическая среда запущена в данный момент. А термин «лексический анализ» означает, что компилятор проверяет, где находятся слова и их местонахождение, то есть частью какой планеты они являются.

Подъем

Подъем — это стандартное поведение JavaScript по перемещению объявлений наверх, которое мы имеем на этапе создания. При подъеме мы перемещаемся каждый раз, когда видим функцию или ключевое слово «var» в качестве первых элементов в строке, и компилятор выделяет для них место в куче, чтобы убедиться, что JS Engine готов к выполнению. Давайте посмотрим на пример,

console.log(apple)
console.log(eat())
var apple = 'red';
function eat() {
    console.log('apple')
}
// Output
> undefined
> apple
> undefined

Здесь мы запускаем код, и в первой строке мы получаем «неопределенное», что ожидается, поскольку эта переменная перемещается вверх, то есть добавляется в кучу и назначается неопределенной, но когда функция запускается еще до написания ее кода, она показывает правильное вывод, это из-за подъема (последний «неопределенный» присутствует, потому что функция eat () возвращает неопределенное значение). В случае переменных они частично поднимаются, что означает только правую часть, а не значение, поэтому мы получаем неопределенность, возможно, функции полностью поднимаются. Под капотом JS Engine выделяет память для переменных и функций на этапе создания перед выполнением.

Но подъем применяется только к объявлениям функций, а не к выражениям функций.

console.log(eatAgain())
var eatAgain = function() {
    console.log('orange')
}

Ошибка будет возникать в данном коде, потому что выражение функции будет выполняться только после того, как оно будет определено, поэтому мы не можем вызвать эту функцию до ее определения.

Спасибо, что нашли время, чтобы прочитать это! Надеюсь, вы найдете эту статью полезной, и мы будем признательны за одно нажатие кнопки «Подписаться».

Увидимся позже!! П-пока..👋