В этом блоге давайте попробуем понять, как движок JS выполняет код. JavaScript — самый сложный и запутанный язык. Попытка понять, что происходит в бэкенде, может изменить наше представление о кодировании. Знакомство с процессом может изменить наше выражение лица с «трепета» на «ах».
ЧТО ТАКОЕ JAVASCRIPT?
Справедливо понять, что такое JavaScript, прежде чем узнать, как он работает.
«JavaScript — это объектно-ориентированный интерпретируемый интерактивный язык сценариев для создания и поддержки веб-приложений».
- Объектно-ориентированный — JavaScript не является объектным языком на основе классов, поскольку он не соответствует основным критериям ООП, то есть полиморфизму, инкапсуляции и наследованию. Тем не менее, у JavaScript есть свои способы использования объектно-ориентированного программирования.
- Интерпретируемый — компилятор преобразует исходный код в машинный код. В отличие от компилятора, интерпретатор считывает каждую строку кода и выполняет ее в момент выполнения. JS просматривает код и пытается собрать необходимую информацию.
- Интерактивность. Без сомнения, JavaScript является сердцем веб-разработки, поскольку он делает веб-страницы интерактивными, позволяя пользователям редактировать, публиковать и загружать информацию.
Это была одна из основных причин, по которой был создан JS, чтобы уйти от скучных статических веб-страниц и сделать их привлекательными и привлекательными.
Как JS выполняет код?
«JavaScript — это синхронный однопоточный язык»
Приведенное выше утверждение, кажется, ограничивает JS, да, это так. JS не является полностью синхронным, иногда он работает асинхронно, но сейчас это не обсуждается. Давайте углубимся в то, что представляют собой эти сложные термины,
- Синхронный. Каждый оператор выполняется последовательно.
- Однопоточный. Имеет только один стек вызовов для выполнения всех функций.
Концепция одного потока доминирует в Node.js, где только один стек может обрабатывать все запросы и ответы. По этой причине Node.js сталкивается с трудностями при выполнении интенсивных вычислительных программ, поскольку они блокируют этот единственный стек.
Рассмотрим следующий код, давайте разберемся, как все работает за кулисами.
Здесь мы стремимся получить удвоенный показатель степени, используя Math.pow(), где мы передаем два аргумента параметру функции.
После написания этого фрагмента кода и нажатия кнопки запуска за эти миллисекунды происходит так много всего. Я разделил весь процесс на два этапа, чтобы сделать его привлекательным и последовательным.
Этап 1
За кулисами JS-движок создает среду для выполнения выполнения. Эта среда называется «Контекст выполнения». Контекст выполнения обрабатывает выполнение нашего кода.
Он содержит компонент памяти и компонент кода. Как следует из названия, память сохраняет назначенные значения и значения результатов после выполнения вычислений.
Компонент кода — это место, где выполняется вся логическая часть, он не хранит никаких значений, его задача — просто вычислить и возвратить результат обратно в компонент памяти.
Контекст выполнения выглядит примерно так:
Это просто для визуализации, ничего подобного в движке JS не формируется.
Я использую JavaScript Visualizer для демонстрации каждого шага. Внимательно наблюдайте за тем, что происходит на каждом этапе, и старайтесь отображать изменения вместе с концепцией.
На начальном этапе JS просматривает всю программусинхронно и выделяет память всем переменным и функциям, не присваивая им фактическое значение, вместо этого назначает специальный заполнитель «undefined».
Это ничего не делает для работы. Функции настолько сильны в JS. JS уважает их силу, и на этом этапе сканирования функции замечаются и буквально копируются такими, какие они есть, не вникая в них.
Этап 2
На следующем этапе JS снова синхронно просматривает код и фактически выполняет его сейчас. На этом этапе выполняются задания, расчеты и расчеты.
- Как только JS встречает n=2, он заменяет n=undefined на n=2.
- Во время синхронного перемещения функция полностью игнорируется, поскольку она еще не запущена.Функции анализируются только при их запуске.
В следующей строке при вызове функции создается новый контекст выполнения, поскольку функция действует как мини-программа в JavaScript. Этот контекст выполнения похож на глобальный контекст выполнения, но не полностью, поскольку он ограничен только той конкретной вызываемой функцией. Визуально это выглядит примерно так.
Если функция содержит другую функцию, внутри текущего контекста выполнения создается другой контекст выполнения. Сбивает с толку, визуально напоминает спираль.
Снова повторяется вся последовательность от создания памяти до присваивания и так далее…
Так же, как это происходило на начальных этапах.
Вычислительная часть выполняется в компоненте кода. Результат сохраняется в res, как только JS встречает "return", он завершает функцию, возвращая значение, и сохраняет результат в объявленной переменной Function1. Когда JS получает вычисленное значение, он немедленно передает это значение компоненту памяти.
twiceOfExp() Контекст выполнения Function1 исчезает (давайте расширим стек вызовов) после того, как сыграл свою роль.
Фаза 2.1
На следующем этапе JS сталкивается с Function2. Здесь мы передали аргументы n,n, которые не являются числовыми и имеют ссылку где-то выше в программе. JS пересматривает значение n и присваивает его параметрам функции.
Снова создается совершенно новый контекст выполнения, и все вычисления функции выполняются так же, как Function1.
Наконец, мы достигли того, к чему стремились, движок JS заполняет все значения, которые были выделены и присвоены «неопределенные».
Программа завершается, когда JS убеждается, что больше нет кода для выполнения. Результат возвращается при входе в окно.
Стек вызовов:
Стек вызовов является основой контекста выполнения, он действует как указатель пути. Стек вызовов тщательно записывает, какая часть программы требует внимания в данный момент. Только когда эта часть выполнена, она переходит к следующей части программы.
JavaScript имеет единый стек вызовов, в котором он управляет всеми вычислениями.
Когда мы запускаем код, создается глобальный контекст выполнения, который помещается в стек вызовов.
Когда JS встречает функцию, которая действует как мини-программа, он создает еще один компонент Function1 и помещает его в стек.
Как только Function1 выполняется, Function1 выскакивает. Это дает ощущение исчезновения из контекста.
То же самое происходит с Function2: как только Function1 выталкивается, Function2 помещается в стек. Пришло время выполнить функцию Function2.
Наконец, когда код завершается, GEC выталкивается из стека вызовов, возвращаясь в режим пустого стека вызовов.
Заключение:
JS выполняет весь процесс за милли/микросекунды благодаря мощному движку JavaScript. Контекст выполнения — это всего лишь один из аспектов того, как выполняется код, многие объекты совместно работают над тем, чтобы сделать его высокоэффективным, точным и быстрым.
Основные выводы из блога:
- Контекст выполнения обрабатывает выполнение.
- JavaScript — это синхронный однопоточный язык.
- Функции — это сердце JavaScript, которое действует как мини-программа внутри программы.
- JavaScript имеет один стек вызовов, также известный как стек контекста выполнения. Стек вызовов поддерживает порядок выполнения в контексте выполнения.
