Как работает JavaScript🔥 🤖 [Визуальное объяснение]

JavaScript — один из самых любимых и ненавидимых языков в мире. Его любят, потому что он мощный. Вы можете создать полнофункциональное приложение, просто изучив JavaScript и ничего больше. Его также ненавидят, потому что он ведет себя неожиданным и расстраивающим образом, что, если вы не заинтересованы в понимании языка, может заставить вас его ненавидеть 💔.

В статье выясним, как JavaScript выполняет код в браузере с помощью анимированных гифок 😆. Прочитав данный материал, вы станете на один шаг ближе к тому, чтобы стать супер разработчиком 🎸😎

Контекст выполнения

«Все в JavaScript происходит внутри контекста выполнения».

Необходимо запомнить это утверждение, так как оно важно. Вы можете предположить, что этот контекст выполнения является большим контейнером, вызываемым, когда браузеру нужно выполнить какой-либо код JavaScript.

В этом контейнере есть два компонента

1. Компонент памяти

2. Компонент кода

Компонент памяти также известен как переменная среда. В этом компоненте памяти переменные и функции хранятся в виде пар ключ-значение.

Компонент кода — это место в контейнере, где код выполняется построчно. Этот компонент кода также имеет причудливое название, а именно «Поток выполнения». 

JavaScript — это синхронный однопоточный язык. Это потому, что он может выполнять только одну команду за раз и в определенном порядке.

Выполнение кода

Возьмем простой пример,

В этом простом примере мы инициализируем две переменные, a и b, и сохраняем 2 и 4 соответственно.

Затем мы добавляем значения a и b и сохраняем их в переменной sum .

Посмотрим, как JavaScript будет выполнять код в браузере 🤖

Браузер создает глобальный контекст выполнения с двумя компонентами, а именно компонентами памяти и кода.

Браузер выполнит код JavaScript в два этапа.

1> Фаза создания памяти

2> Этап выполнения кода

На этапе создания памяти JavaScript просматривает весь код и выделяет память для всех переменных и функций в коде. Для переменных JavaScript будет хранить undefined на этапе создания памяти, а для функций — весь код функции, который мы рассмотрим в следующем примере.

Теперь, на втором этапе, т.е. выполнении кода, он начинает выполнять весь код построчно.

Когда он встречает var a = 2, он присваивает 2 ‘a’ в памяти. До сих пор значение «а» не было определено.

Точно так же он делает то же самое для переменной b. Он присваивает 4 ‘b’. Затем он вычисляет и сохраняет в памяти значение суммы, равное 6. Теперь, на последнем шаге, он выводит значение суммы в консоль, а затем уничтожает глобальный контекст выполнения по завершении нашего кода.

Как функции вызываются в контексте выполнения?

Функции в JavaScript, если сравнивать с другими языками программирования, работают по-другому.

Возьмем простой пример,

В приведенном выше примере есть функция, которая принимает аргумент типа число и возвращает квадрат числа.

JavaScript создаст глобальный контекст выполнения и выделит память для всех переменных и функций на первом этапе, когда мы запустим код, как показано ниже.

Для функций он будет хранить всю функцию в памяти.

А вот и захватывающая часть. Когда JavaScript запускает функции, он создает контекст выполнения внутри глобального контекста выполнения.

Когда он встречает var a = 2, он присваивает 2 ‘n’ в памяти. Строка номер 2 — это функция, и поскольку функции была выделена память на этапе выполнения памяти, она сразу перейдет к строке номер 6.

Square2 вызовет квадратную функцию, а javascript создаст новый контекст выполнения.

Этот новый контекст выполнения для квадратной функции назначит память всем переменным, присутствующим в функции на этапе создания памяти.

После выделения памяти всем переменным внутри функции она будет выполнять код построчно. Он получит значение num, равное 2 для первой переменной, а затем рассчитает an. После того, как ответ будет рассчитан, он вернет значение, которое будет присвоено квадрату2.

Как только функция вернет значение, она уничтожит свой контекст выполнения, поскольку завершила работу.

Теперь он будет следовать аналогичной процедуре для строки номер 7 или переменной Square4, как показано ниже.

Как только весь код будет выполнен, глобальный контекст выполнения также будет уничтожен, и именно так JavaScript будет выполнять код за сценой.

Стек вызовов

Когда функция вызывается в JavaScript, JavaScript создает контекст выполнения. Контекст выполнения будет усложняться, поскольку мы вкладываем функции внутрь функции.

JavaScript управляет созданием и удалением контекста выполнения кода с помощью стека вызовов.

Стек (иногда называемый «стеком выталкивания вниз») представляет собой упорядоченный набор элементов, в котором добавление новых элементов и удаление существующих элементов всегда происходит на одном и том же конце, например. стопка книг.

Стек вызовов — это механизм для отслеживания своего места в сценарии, вызывающем несколько функций.

Возьмем пример

Мы создаем функцию «a», которая вызывает другую функцию «insideA», которая возвращает true. Код тупой и ничего не делает, но он поможет нам понять, как JavaScript обрабатывает функции обратного вызова.

JavaScript создаст глобальный контекст выполнения. Глобальный контекст выполнения назначит память функции «a» и вызовет «функцию a» на этапе выполнения кода.

Для функции a создается контекст выполнения, который помещается над глобальным контекстом выполнения в стеке вызовов.

Функция a назначит память и вызовет функцию внутри A. Контекст выполнения создается для функции внутри A и помещается над стеком вызовов «функции a».

Теперь эта функция insideA вернет true и будет удалена из стека вызовов.

Поскольку внутри «функции» нет кода, контекст выполнения будет удален из стека вызовов.

Наконец, глобальный контекст выполнения также удаляется из стека вызовов.

Ссылка

• Плейлист Namaste JavaScript на YouTube

Надеемся, что этот пост был информативным. 💪🏾 Практикуйтесь!!!

Источник статьи: http://dev.to/