Вы знаете? Когда вы запускаете программу JavaScript, за кулисами внутри движка JavaScript происходит множество вещей. мы рассмотрим все прямо сейчас.
Помните, в последней статье мы обсуждали, что все в JavaScript происходит внутри контекста выполнения.
Что происходит, когда вы запускаете программу JavaScript?
Создается контекст выполнения.
Пример кода для создания контекста выполнения
var n = 3;
function square (num){
var output = num * num;
return output;
}
var square3 = square(n);
var square4 = square(4);
Итак, у нас есть эта переменная n, равная 3, и функция square, которая возвращает квадрат числа, которое передается внутри этой функции, и есть две другие переменные square3 и Square4, которые просто вызывают эту уже созданную функцию.
Итак, теперь давайте посмотрим, как весь этот код JavaScript выполняется за кулисами.
Создание глобального контекста выполнения 🤔
На первом этапе создания памяти JavaScript выделяет память для всех переменных и функций.
Поэтому, как только JS встречает эту строку 1, он выделяет память для n. Итак, давайте теперь выделим память для n. Как будет распределять? Здесь будет зарезервировано место в памяти для n. Точно так же теперь JavaScript переходит к строке 2. Он видит, что есть функция с именем Square. Таким образом, он выделит память в квадрате.
На первом этапе и в случае функций он буквально хранит весь код функции внутри этого пространства памяти.
И теперь он также будет выделять память для квадрата2 и квадрата4 и так как есть другие переменные, он снова будет хранить для них undefined
поэтому на первом этапе JS просматривает всю программу
Посмотрим, что будет на втором этапе
Второй этап – этап выполнения кода.
Итак, давайте посмотрим, как этот код выполняется после выделения памяти. Таким образом, JavaScript снова проходит через всю эту JS-программу строка за строкой и теперь выполняет код. Итак, это тот момент, когда все эти функции и все вычисления в программе выполнены. Хорошо? Поэтому, как только обнаружена эта первая строка, n=3, она фактически помещает "3" внутрь "n". Итак, до сих пор значение n было не определено, теперь 3.
Итак, строки со второй по пятую буквально выполнять нечего. Таким образом, он переходит к строке номер 6
Вызов функции и создание контекста выполнения
Здесь мы вызываем функцию
var square3 = square(n);
Что вы подразумеваете под вызовом функции?Всякий раз, когда вы видите имя функции с этими круглыми скобками, это означает, что функция сейчас выполняется.
Итак, функции здесь похожи на мини-программу, и всякий раз, когда вызывается новая функция, вы знаете, вызывается мини-программа, создается совершенно новый контекст выполнения 😃
Итак, теперь мы снова пройдем через создание этого контекста выполнения, и снова будут задействованы две фазы.
На этапе создания памяти нас будет интересовать только этот фрагмент кода. Когда мы выполняем этот square(n),
function square (num){
var output = num * num;
return output;
}
Итак, теперь давайте посмотрим, как здесь выделяется память на первом этапе.
В первой фазе, прежде всего, не забывайте, что память выделяется под переменные и функции внутри этой функции. И когда я говорю переменные и функции, это включает в себя параметры, такие как «число», и другие переменные, и у нас нет функции, поэтому в этом нет необходимости. поэтому мы будем выделять память для num и output.
Теперь наступает часть второй фазы. Хорошо? Итак, вторая фаза — это фаза выполнения кода. В этом мы будем выполнять каждую строку.
Что происходит при выполнении оператора return?🤔
Это ключевое слово return указывает, что теперь верните управление программой в то место, где была вызвана эта функция.
Еще одна вещь, которая происходит, когда выполняется вся функция, заключается в том, что весь этот контекст выполнения для этого экземпляра этой функции будет удален. И элемент управления переместится на строку номер 6.
После этой замены мы перейдем к строке номер 7. Итак, в строке номер 7 мы снова вызываем функцию, правильно, и разница лишь в том, что теперь мы передаем сюда 4 напрямую в качестве аргумента. Вот и все.
Как только произойдет вызов этой функции👇
- Опять же, будет создан совершенно новый контекст выполнения.
- Снова у него будет эта память
- Опять же, у него будет компонент кода, помните?
- И теперь он снова пройдет через эти две фазы.
- Во-первых, память выделяется для num, хорошо?
- num сохранит значение undefined. Помнить?
- И еще одна вещь: мы выделяем память для вывода, которая снова не определена.
- Наш первый этап завершен.
- Теперь на втором этапе, на этапе выполнения кода, произойдет следующее: num получит этот аргумент из вызова в строке номер 7,
- num получит это значение 4.
- При выполнении кода undefined будет заменено (на этапе выполнения кода) 4.
- Он выполнит num*num, что равно 4*4, 16, и теперь это 16 заменит это неопределенное значение внутри вывода. Верно?
- Управление перемещается на строку номер 4. После 3 делается.
- Итак, теперь этот оператор return возвращает управление в строку номер 7, где функция была фактически вызвана.
- Теперь значение 16 заменит undefined в переменной square4. Хорошо?
Как только мы закончим выполнение функции, весь этот контекст выполнения будет удален.
Итак, JS выполнил всю свою работу.
Но вам не кажется, что все это слишком сложно для движка JS?🤔 Стек вызовов — ответ на это.
Спасибо за прочтение статьи ❤️.
Я хотел бы связаться на LinkedIn
