Все в JavaScript происходит внутри контекста выполнения. Контекст выполнения подобен контейнеру, в котором выполняется весь код JavaScript. Контекст выполнения состоит из двух компонентов:
- Компонент памяти (переменная среда): это место, где все функции и переменные хранятся в виде пар ключ-значение.
- Компонент кода (поток выполнения): это место, где весь код выполняется по одной строке за раз.
Теперь мы знаем, что когда мы запускаем программу, формируется контекст выполнения. Давайте рассмотрим контекст выполнения на примере:
Когда мы запустим эту программу, будет создано глобальное выполнение. Существует две фазы создания контекста выполнения: первая фаза — это фаза создания памяти, а вторая — фаза выполнения кода. На этапе создания памяти JavaScript просматривает программу и выделяет память для всех переменных и функций. В случае переменной, объявленной с помощью var, движок JavaScript инициализируется значением undefined, а в случае функции движок JavaScript сохранит всю функцию. В случае переменной, объявленной с помощью let или const, JavaScript выделил память для переменных, но не инициализировал их каким-либо значением.
После фазы выполнения памяти наш компонент памяти будет выглядеть так:
n: undefined
square: {
var answer: num * num;
return answer;
}
square2: undefined
square4: undefined
После фазы создания памяти будет выполняться код. На этапе выполнения кода движок JavaScript еще раз просматривает код и выполняет программу. Поскольку JavaScript является однопоточным синхронным языком, он может выполнять только одну команду за раз и может выполнять следующую команду после завершения текущей.
Когда JavaScript запустит первую строку, он изменит значение number с undefined на 2. После первой строки движок JavaScript перейдет к строке 6, так как там нечего выполнять. В строке 7 у нас есть вызов функции, и при выполнении функции механизм JavaScript создает локальный контекст выполнения или функциональный контекст выполнения. Как и глобальный контекст, локальный контекст также будет двухкомпонентным (компонент памяти и компонент кода), а также будет проходить двухэтапное выполнение (выполнение памяти и выполнение кода). Когда создается новый контекст выполнения, движок JaveScript сначала обрабатывает этот вновь созданный локальный контекст выполнения и возобновляет предыдущий контекст выполнения там, где он был остановлен, в этом случае новый контекст выполнения формируется в строке 7, поэтому, как только локальный контекст выполнения завершает выполнение JavaScript Engine возобновит предыдущий контекст выполнения со строки 8.
Обратите внимание, что, поскольку это локальный контекст выполнения, нас будет интересовать только функция square, то есть код, о котором мы будем беспокоиться:
(num) {
var answer = num * num:
return answer;
}
Теперь на этапе выполнения в памяти локального выполнения JavaScript-движок просматривает код и присваивает значение переменной и функции, поскольку здесь у нас нет никакой функции, поэтому значение будет присвоено только переменной. Здесь у нас есть две переменные num и answer, которые будут значением undefined на этапе выполнения памяти.
После этапа создания памяти начнется этап выполнения кода. В строке 2 JavaScript установит значение num в 2, так как значение number равно 2 в глобальном контексте. Затем движок JavaScript перейдет к строке 3, где он присвоит значение answer 4, то есть 2 * 2. В следующей строке, то есть в строке номер 4, у нас есть return, теперь, когда движок JavaScript встречает ключевое слово return, он передает управление со значением контексту, в котором была выполнена функция, и экземпляр локального контекста будет удален.
Поскольку элемент управления переместился в глобальный контекст, для строки 7 значение square2 будет присвоено 4 из undefined. Теперь мы перейдем к глобальному контексту, в строке 8 у нас есть функция, поэтому, как и в строке 7, снова будет сформирован локальный контекст выполнения, который пройдет две фазы контекста выполнения, и мы получим значение square4 . Теперь в глобальном контексте нечего выполнять, наш глобальный контекст также будет удален.
Чтобы отслеживать все контексты выполнения, механизм JavaScript использует структуру данных с именем Call Stack. Стек вызовов работает по принципу LIFO, т. е. «последним пришел — первым ушел». Итак, когда мы запускаем программу, движок JavaScript создает глобальный контекст выполнения и помещает его на вершину стека вызовов, теперь, если в нашей программе есть функция, движок JavaScript создает локальный контекст выполнения и помещает его на вершину стека вызовов. и начать выполнение функции, если внутри функции есть другая функция, движок JavaScript создаст другой локальный контекст, поместит его на вершину стека и начнет выполнение. Механизм JavaScript сначала завершит контекст, который находится на вершине стека, и извлечет его из стека, а затем выполнит следующий контекст и вытолкнет его из стека после завершения. Механизм JavaScript будет продолжать делать это до тех пор, пока стек вызовов не опустеет.
Это был контекст выполнения в JavaScript, большое спасибо, что нашли время прочитать этот блог. 👊🏻 До встречи!
Ресурсы: JavaScript Tutorial Akshay Saini
