Что такое контекст выполнения в JavaScript? Контекст выполнения (EC) — это среда, в которой выполняется часть кода.

Чтобы понять, как все работает в JavaScript, необходимо сначала понять контекст выполнения, потому что все, что происходит в JavaScript, происходит в контексте выполнения.

Основной обзор

Execution Context (EC) — это среда, в которой выполняется часть кода, содержащая всю необходимую информацию для выполнения этой части кода.

Внутри контекста выполнения есть три вещи:

  1. Объявления переменной Environment, const и var, функции и объект аргументов
  2. Цепочка областей
  3. это ключевое слово

После завершения компиляции кода механизм JavaScript создает глобальный контекст выполнения (GEC) для кода верхнего уровня (кода, который не находится ни в одной функции). Выполнение кода верхнего уровня начинается в GEC, всякий раз, когда строка кода вызывает функцию, создается код выполнения для этой функции. Существует только один глобальный контекст выполнения, но каждый вызов функции имеет свой собственный контекст выполнения.

Фазы в контексте выполнения

В контексте выполнения в основном есть 2 фазы:

  1. Этап создания
  2. Этап выполнения

Мы также можем интерпретировать это таким образом, что контекст выполнения состоит из двух частей: памяти (переменная среда) и кода (поток выполнения).

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

И на следующем этапе начинается выполнение кода. Поскольку Javascript является синхронным однопоточным языком, выполнение кода происходит по одному оператору за раз и в определенном порядке.

Я буду использовать приведенный ниже фрагмент кода для дальнейшего объяснения фаз в контексте выполнения.

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

Этап создания

На этапе создания все переменные в коде верхнего уровня будут храниться в среде переменных. Переменные, отличные от функции, т.е. name , marksInMaths , marksInScience , marksInEnglish , marksInArts , averageMarks получают неопределенное , назначенное им, тогда как переменные для функции, т.е. calculateAverageMarks , calculateTotalMarks, содержат соответствующие функции.

Фаза выполнения

На следующем этапе код начинает выполняться сверху вниз по одному оператору за раз, только функции не выполняются, поскольку функции выполняются только после того, как какой-либо оператор вызывает их. Таким образом, если мы снова увидим код, строка номер 18 будет выполнена непосредственно после строки номер 5.

Во время выполнения значение переменных изменяется в среде переменных в соответствии с оператором в коде. Таким образом, для строки номер 1, т.е. const name = "Joy", значение имени изменяется на "Joy" из неопределенного, аналогичным образом изменяются все значения.

Поток выполнения — создание нового контекста выполнения для вызываемой функции.

Когда выполняется строка номер 18, то есть const averageMarks = calculateAverageMarks(marksInMaths, marksInScience,... ); , создается новый контекст выполнения для вызываемой функции calculateAverageMarks(). Поскольку JavaScript имеет один поток выполнения, одновременно может выполняться только один контекст выполнения (EC), поэтому выполнение предыдущего EC, т. е. GEC, останавливается и начинается выполнение нового EC.

Новый контекст выполнения также имеет те же две фазы, что и в GEC. Во время фазы выполнения этой функции, когда выполняется строка const totalMarks = calculateTotalMarks(maths, science, english, arts);, создается новый контекст выполнения. Как только обе фазы фазы calculatTotalMarks() заканчиваются, возвращаемое значение этой функции отправляется в контекст выполнения, откуда она была вызвана, т. е. calculateAverageMarks(), и значение сохраняется в переменной среды ( значение totalMarks изменяется на возвращаемое значение с начального значения undefined) этого контекста выполнения, и выполнение этого EC продолжается с возвращенным значением.

Точно так же, как только выполнение всех строк функции calculateAverageMarks() завершено, возвращаемое значение заменяет значение переменной AverageMarks в среде переменных глобального контекста выполнения, и выполнение GEC продолжается со значением, с которого оно было остановлено до этого. .

Стек вызовов

Для приведенного выше фрагмента кода с двумя вызываемыми функциями было создано два контекста выполнения (по одному для каждого) вместе с глобальным контекстом выполнения. Это означает, что для реального приложения существуют сотни контекстов выполнения (EC), созданных для каждого приложения. Но как управлять последовательностью контекстов выполнения? Это управляется стеком вызовов в движке JavaScript.

Стек вызовов отслеживает контексты выполнения. Как только функция вызывается, для нее создается новый EC и помещается на вершину стека вызовов, EC наверху контролирует выполнение, и его выполнение происходит первым.

И как только выполнение этого EC заканчивается, EC удаляется из стека и управление возвращается к предыдущему EC.

Стек вызовов играет важную роль в движке JavaScript, управляя всем потоком выполнения.

Краткое содержание

Контекст выполнения (EC) — это среда, в которой выполняется часть кода. Для приложения создается один глобальный контекст выполнения, а также несколько контекстов выполнения (по одному для каждого вызова функции). В контексте выполнения в основном есть две фазы: фаза создания и фаза выполнения. Для каждого вызова функции создается новый EC, и управление переходит к новому EC, после завершения выполнения этого EC управление переходит к предыдущему EC. Эта последовательность смены управления и выполнения управляется стеком вызовов.

Ресурсы

https://www.udemy.com/course/the-complete-javascript-course



Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.