Как работает JavaScript: наглядное руководство🔥 🤖

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

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

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

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

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

В этом контейнере два компонента: 1. Компонент памяти. 2. Компонент кода.

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

Компонент кода - это место в контейнере, где код выполняется по одной строке за раз. У этого компонента кода также есть причудливое имя, а именно «Thread of Execution». Я думаю, это круто звучит!

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

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

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

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

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

Что касается функций, он сохранит всю функцию в памяти.

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

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

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

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

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

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

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

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

Стек вызовов

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

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

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

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

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

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

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

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

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

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

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

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

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

Ссылка

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

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

Чтобы узнать больше, посетите мой блог-сайт blog.webdrip.in.

Первоначально опубликовано на https://dev.to 14 декабря 2020 г.

Больше контента на plainenglish.io