Javascript является обязательным языком для всех, кто хочет шагнуть в гигантский мир веб-разработки. Многие разработчики уже хорошо разбираются в Javascript (JS), а некоторые хотят освоить его, но не знают, с чего начать. Тогда это первое, что нужно знать о JS, это за кулисами.
Знание того, как JS работает в фоновом режиме, очень поможет вам на этапе изучения JS и на этапе отладки.
JS-движки
Всякий раз, когда вы пишете JS-код, то либо запускаете его в браузере, либо в терминале с помощью nodeJS и больше нигде.
Что делает эти браузеры и nodeJS особенными, так это то, что у них есть собственный движок JS. Chrome и nodeJS используют движок V8, Firefox работает с обезьянкой-пауком, а Safari использует движок nitro.
Мы пишем JS-код на простом английском языке, подобно тексту, который не может быть выполнен компьютером напрямую, поэтому его необходимо сначала преобразовать в машинный код, что выполняется парсерами, присутствующими внутри JS-движка.
JS-движок берет ваш JS-код и с помощью синтаксического анализатора сначала проверяет синтаксис, и если он находит что-то не так в вашем коде, то выдает ошибку. И, если все верно, то синтаксический анализатор создаст структуру данных с именем Абстрактное синтаксическое дерево(AST ), а затем она будет преобразована в машинный код, который выполняется компьютером напрямую.
Каждый код JS выполняется в среде, известной как контекст выполнения.
Глобальный контекст выполнения (GEC)
GEC — это контекст выполнения по умолчанию в движке JS, который также упоминается как объект окна в браузерах.
GEC выполняет код, который определяется глобально, а не внутри какой-либо функции.
ПРАВИЛО. Должен быть только один GEC.
В строках 1 и 2 переменные a и b определены глобально и выполняются GEC.
В случае браузеров GEC — это объект окна. Все, что объявлено глобально, будет прикреплено к объекту окна в браузере.
Но как насчет неглобального объявления или того, что объявляется внутри функции. Если код находится внутри функции, он создаст свой собственный новый контекст выполнения.
Контекст выполнения:
Стек выполнения (ES) — это структура данных стека, в которой новый стек выполнения размещается поверх GEC.
Если функция объявляется внутри другой функции, тогда контекст выполнения вложенной функции будет располагаться поверх внешней функции.
Но как насчет выталкивания из стека? Всякий раз, когда самый верхний контекст выполнения завершает свое выполнение, он выскакивает.
В строке 1 файл console.log будет отправлен в GEC. В строках 3 и 4 обе переменные определяются внутри функции, поэтому функция first() создаст свой собственный контекст выполнения. В строке 5 внутри функции first() объявляется другая функция, которая создает новый стек выполнения, который будет размещаться поверх стека выполнения функции первый(). И он будет удален после возврата a + b.
Контекст выполнения в деталях
До сих пор мы выясняли, что делает Execution Context, но теперь мы увидим, как работает EC.
Контекст выполнения можно рассматривать как объект. В основном контекст выполнения имеет три свойства:
- Переменный объект
- Цепочка областей
- «эта» переменная
Объект Variable содержит аргументы функции, объявление функции, объявление внутренней функции и объявление переменной.
Когда функция вызывается внутри функции, ее контекст выполнения складывается до предыдущего контекста выполнения внешней функции, как мы обсуждали ранее. Этот шаг состоит из двух этапов: Этап создания и Этап выполнения.
Все эти три свойства, переменный объект, цепочка областей действия и т. д., выполняются на этапе создания, а затем передаются на этап выполнения, где сгенерированный код в текущем контексте выполнения выполняется построчно.
Подъем
Функции и переменные доступны до начала выполнения. Функции уже определены до начала этапа выполнения, но переменные установлены как неопределенные и будут определены только на этапе выполнения.
В приведенном выше коде сначала мы объявили функцию, которая будет храниться в переменном объекте (VO), который будет находиться на этапе создания. И когда мы входим в фазу выполнения, функция addition() уже доступна. Таким образом, мы можем объявить функцию позже и сначала использовать ее в нашем коде.
Давайте попробуем то же самое и с переменными.
Приведенный выше код напечатает undefined. Это происходит потому, что на этапе создания переменная a ищет объявление, но не может его найти.
В приведенном выше коде результатом будет 34, а не 3. Потому что функция имеет свой собственный контекст выполнения.
Преимущество подъема в том, что мы можем объявить функцию перед ее использованием в коде.
Обзор
Область видимости — это место, где можно получить доступ к переменным.
В JS у нас есть лексическая область видимости, при которой функция внутри функции будет обращаться к своей внешней функции, но обратное невозможно.
Мы объявили a в GEC. b объявляется в контексте выполнения функции first(), а затем после вызова функции two() мы объявили ее внутри функцию first(), а затем мы объявили переменную c, внутри которой мы перейдем в Execution Context функции two(), который будет располагаться над контекстом выполнения функции first(), а затем мы вернули все переменные. В этом случае функция two() находится внутри функции first(), что в соответствии с лексической областью видимости позволяет внутренней функции иметь доступ к внешней функции.
«эта» переменная
Каждый новый контекст выполнения получает переменную эту. В обычном вызове функции функция this указывает на объект окна, который также является глобальным объектом.
Следует помнить, что ключевое слово «this» всегда указывает на ближайший метод.
В приведенном выше коде строка 1 указывает на объект окна, потому что это глобальное объявление. В строке 3 он снова будет указывать на объект окна, потому что ключевое слово this указывает на ближайший метод, но не на функцию. В строке 9 ключевое слово this будет указывать на obj_met, так как это метод.
Вывод
Итак, вот как Javascript работает за кулисами. В этой статье вы многое узнали о том, как работает движок JS и что внутри него. Теперь, когда вы будете кодировать на JS, тогда вы сможете представить себе все эти закулисные дела, которые помогут вам писать хороший код и даже в его отладке.
Надеюсь, вам понравится эта статья. Я активен на моем связанном. Вы можете обратиться ко мне там, если у вас есть какие-либо сомнения, связанные с этой темой.
