Все в js происходит внутри контекста выполнения.
Теперь, что такое контекст выполнения?
Это среда, которая запускает и хранит ваш код javascript. Он создается при выполнении вашего кода. Эта среда имеет доступ к «this», объектам переменных и функциям вашего кода javascript. Всякий раз, когда какой-либо код запускается в javascript, он происходит внутри контекста выполнения.
Это первое, что создается, когда мы пишем код javascript.
Типы контекста выполнения:
- Глобальный контекст выполнения (GEC)
- Контекст выполнения функции (FEC)
Поэтому рассматривайте этот рисунок как контекст выполнения, который разделен на две части.
Первая часть известна как компонент памяти или среда переменных. Это место, где все ваши функции и переменные хранятся в ключе. пары значений. Вторая часть контекста выполнения известна как поток выполнения, или вы можете рассматривать ее как свой компонент кода, это место, где ваш код javascript выполняется [одна строка за раз].
Здесь важно знать, что javascript является однопоточнымисинхронным языком. Это в основном означает, что javascript может выполнять одну строку кода за раз в определенном порядке.
Давайте углубимся в этот пример кода, чтобы понять, как работает этот контекст выполнения.
Здесь у нас есть две переменные l и w (сокращение от length и width) в строке 1 и 2, а затем у нас есть эта функция вычислить, которая принимает длину и ширину в качестве своих параметров, который вычисляет площадь прямоугольника и возвращает ее. А в строке 9 у нас есть переменная rectangle1, которая вызывает функцию вычисления, предоставляющую аргументы (l и w).
Теперь давайте разберемся, как этот код javascript работает за кулисами.
Как мы знаем, этот контекст выполнения создается в два этапа:
- Этап создания памяти
- Этап выполнения кода
Фаза создания памяти:
Теперь первый случай, который является фазой создания памяти, javascript здесь будет выделять память всем переменным и функциям.
В строке 1 и 2 у нас есть две переменные l и w, как только javascript встречает их, выделяется память к обоим из них в фазе памяти, и им обоим присваивается значение undefined.
В строке 4 javascript видит эту функцию вычисления, поэтому выделяет некоторую память для вычисления и сохраняет весь код функции вычисления в качестве ее значения.
В строке 9 у нас есть переменная rectangle1, javascript выделит для нее память и сохранит undefined в качестве ее значения.
Таким образом, на первом этапе [фаза создания памяти] javascript выделяет память. Обратите внимание, что он сохраняет весь код в случае функции и сохраняет undefined для переменной в качестве их значения. Мы обсудим, почему эти переменные имеют значение undefined в моих будущих блогах, а пока давайте не будем усложнять ситуацию.
Этап выполнения кода:
Теперь давайте поговорим о второй фазе, фазе выполнения кода. Итак, еще раз javascript проходит через эту программу строка за строкой, и это фаза выполнения, на которой выполняется вся логика и вычисления. .
В строке 1 идентификатор l теперь будет иметь значение 2, а в строке 2 идентификатор w будет иметь значение 3. .
Затем Javascript пропускает строки [4 -7], так как нам нечего там делать и выполнять.
Вот где становится интересным в строке 9, когда мы вызываем или вызываем функцию. теперь мы должны понимать, что сами функции являются мини-программами, и когда функция вызывается, создается совершенно новый контекст выполнения, известный как контекст выполнения функции (FEC).
В строке номер 9 будет создан отдельный функциональный контекст выполнения, который снова имеет две фазы: фазу памяти и фазу выполнения кода. Теперь нам нужно выполнить часть кода внутри функции.
Итак, давайте посмотрим, как здесь распределяется память, на первом этапе мы выделяем память для переменных и функций, и этот фрагмент кода не имеет функций, поэтому нам не нужно об этом беспокоиться.
FEC: фаза памяти
поэтому, начиная с параметров, мы назначим память переменным length и width, а в строке 5 мы также выделим памяти в область. Все эти переменные будут иметь значение undefined, как обсуждалось ранее.
FEC: этап выполнения кода
мы будем выполнять каждую строку с точки выполнения, то есть там, где вызывается функция.
где l и w передаются в качестве аргументов параметрам length и width со значениями 2 и 3. Таким образом, значения длины и ширины будут изменены на 2 и 3 вместо неопределенных.
в строке 5 javascript выполнит/вычислит эту область, которая имеет длину * ширину, и сохранит вычисленное значение в области в блоке памяти. Итак, теперь область будет 6.
в строке номер 6 javascript встречает ключевое слово return, где мы возвращаем область, которая, по сути, сообщает javascript, что мы закончили с этой функцией **** и теперь мы должны вернуть весь контроль обратно в контекст выполнения, в котором была вызвана функция. В нашем случае это глобальный контекст выполнения (GEC).
В строке номер 6, как только мы встречаем ключевое слово return с областью, javascript будет искать эту переменную области в локальной памяти и возвращать ее значение. значение, т. е. 6, обратно в контекст выполнения, в котором была вызвана функция.
Таким образом, возвращая управление GEC, мы будем хранить значение 6 внутри переменной rectangle1 вместо >undefined в строке номер 9.
💡 необходимо помнить одну важную вещь: при выполнении всей функции контекст выполнения функции, созданный для этого экземпляра функции, будет удален.
Фу! Итак, теперь выполняется строка номер 9! javascript завершен с выполнением, и программа завершена, что означает, что весь глобальный контекст выполнения теперь удален.
Итак, теперь вы знаете, как работает javascript за кулисами. Если вам понравилась статья или вы что-то узнали и хотите следить за обновлениями:
LinkedIn: linkedin.com/in/farrukhayaz/
Гитхаб: github.com/farrukhayazqazi
или напишите мне на: farrukhayazqazi.github.io
