Это первый в серии статей о том, как работает JavaScript. Я постараюсь сделать это интересным и не утомлять вас, так как я знаю, что это иногда может стать действительно скучным!
Представьте, что вы пилот и не знаете, как летит самолет, каждый день мы запускаем наш код JavaScript, но знаем ли мы, как он работает?
Поговорим о ветке исполнения
ОК, давайте выбим простой код.
Приведенный выше код – это нечего, но будет хорошо служить нам, чтобы продемонстрировать поток выполнения.
Когда наш JavaScript выполняется, он проходит через строку (однопоточный), поэтому в нашем коде выше первой строки:
Следующий вопрос: что происходит, когда он входит на эту линию? Где это делает num хранить?
num Хранится в контексте глобальной памяти/выполнения, визуально выглядит так:
Итак, мы перейдем к следующей строке.
Важно отметить, что мы объявляем функцию здесь и не выполняем ее. Поэтому мы храним имя функции со значением всей функции.
- f - Выше – это просто сокращение для всей функции.
Теперь мы переходим к следующей строке, некоторые из вас могут подумать, что следующая строка – это тело функции, но, поскольку мы только объявляем функцию, а не запускаем ее, следующая строка для работы – это:
Подобно выше, мы отправляем этикетку вывод к памяти, но без значения, пока мы должны запустить нашу функцию.
Теперь приходит забавная часть! На самом деле выполнение нашего добавление функция
Когда функция выполняется, она добавляется в Звоните в стек Анкет Звоните в стек Всегда есть Глобал / главный Внизу, теперь мы будем настаивать на Добавление (3) Анкет
Мы также создаем Контекст исполнения для этой функции. Любая переменная, объявленная в функции, будет добавлена в контекст выполнения функции.
Первые переменные, которые будут добавлены, являются аргументы функции, в нашем случае x Анкет
Теперь мы переходим к следующей строке и храним результат в Контекст исполнения .
На следующей строке мы достигли возврат Ключевое слово, которое отмечает конец функции. Мы появляемся addone () из Звоните в стек и дать вывод Значение, которое 4 Анкет
Итак, первый поп добавление из стек вызовов .
Теперь наш последний шаг, присваивая значение 4 к вывод переменная.
Донзо
Вот и все! Я надеюсь, что это демонстрирует, как проходит наш код. Это была трудоемкая статья из-за создания всех GIF-файлов, так что дайте мне знать, нравятся вам или нет. Я знаю, что только отменил стек вызовов и Контекст исполнения В этой статье, но мы будем углубляться в них в будущем.
Вывод
Любые вопросы на вышеизложенном, не стесняйтесь обращаться ко мне в моих социальных сетях! ❣ ️
Оригинал: “https://dev.to/paulryan7/thread-of-execution-visually-explained-59hj”