Мы также собираемся узнать о стеке вызовов JavaScript, цикле событий, очередях задач, очереди микрозадач и различных других элементах, благодаря которым JavaScript в том виде, в каком мы его знаем, работает должным образом.
Коротко о JavaScript
JavaScript — это интерпретируемый язык. Это означает, что нам не нужно компилировать исходный код JavaScript перед его отправкой в браузер. Интерпретатор может взять необработанный код JavaScript и запустить его для вас.
JavaScript также является языком с динамической типизацией, в отличие от C и C++. Это означает, что переменные, объявленные с использованием var, могут хранить данные любого типа, такие как int, string, boolean, а также сложные типы данных, такие как object и array.
JavaScript во время выполнения
JavaScript является однопоточным языком. Этот поток широко известен как основной поток или основной поток выполнения, что означает, что он имеет только один стек вызовов и кучу, которая используется для выполнения программа.
Когда JavaScript запускается, он создает один стек вызовов и кучу памяти. Внутри стека вызовов создается глобальный контекст выполнения, который берет черновик кода и благодаря этому хостингу достигается. Теперь для каждой выполняемой функции создается контекст выполнения с ее лексическим окружением, контекст выполнения извлекается после завершения выполнения соответствующей функции.
Пока функция что-то не вернет (во время выполнения функции), она не будет извлечена из стека. Стек будет выталкивать записи одну за другой, как только эта запись (функция) вернет какое-то значение, и продолжит выполнение функции в ожидании.
Каждая запись в стеке называется фреймом стека. Фрейм стека содержит информацию о вызове функции, такую как аргументы вызова функции, локальные переменные функции, адрес возврата (где будет потребляться возвращаемое значение) и другую информацию о функции.
Как видно из приведенного выше снимка экрана, когда мы добавляем точку останова при вызове функции console.log, Chrome DevTools отображает стек вызовов (справа), который содержит кадры стека вверх. до выполнения текущей функции.
Если какой-либо вызов функции в данном фрейме стека приводит к ошибке, JavaScript выводит трассировку стека, которая представляет собой не что иное, как моментальный снимок выполнения кода до этого фрейма стека.
Теперь, если JavaScript является однопоточным, то как он обрабатывает асинхронные операции.
Среда выполнения JavaScript на самом деле состоит из еще двух компонентов, а именно. цикл событий и очередь обратного вызова. Очередь обратного вызова также называется очередью сообщений или очередью задач.
Помимо движка JavaScript, браузер содержит различные приложения, которые могут делать множество вещей, таких как отправка HTTP-запросов, прослушивание событий DOM, задержка выполнения с использованием setTimeout или setInterval, кэширование, хранение базы данных и многое другое. Эти функции браузера помогают нам создавать многофункциональные веб-приложения и улучшать взаимодействие с пользователем. Эти API известны как веб-API, поскольку они не являются частью спецификаций JavaScript.
Эти операции не блокируют основной поток выполнения JavaScript, поскольку они создаются в разных потоках, управляемых браузером, а JavaScript об этом не знает. Эти веб-API являются асинхронными.
При указании этим API выполнять какие-либо действия в фоновом режиме мы должны предоставить функцию обратного вызова. Ответственность функции обратного вызова заключается в выполнении некоторого кода JavaScript в основном потоке Javascript после завершения работы веб-API. Давайте разберемся, как все части работают вместе.
Теперь подумайте о сценариях, если функция содержит setTimeout Api. Теперь эта функция находится в стеке, когда она переходит к строке API. JavaScript делегирует управление ею веб-API с помощью функции обратного вызова и переходит к следующим строкам, пока функция не вернется. что-нибудь. Как только функция достигает оператора return, эта функция извлекается из стека и перемещается к следующему элементу стека.
Теперь функция обратного вызова связана с веб-API, который выполняет свою работу в отдельном потоке, отдельном от основного потока.
когда задание выполнено, веб-API привязывает результат этого задания к функции обратного вызова и публикует сообщение в очереди обратного вызова с помощью этой функции обратного вызова.
Теперь цикл событий постоянно следит за основным стеком и очередью обратного вызова, после того, как стек пуст, цикл событий помещает функцию обратного вызова в стек, он помещает одну функцию за раз, после того, как все выполнено в очереди обратного вызова, глобальное выполнение также выталкивается окончание программы.
Точно так же для получения данных функция отправляется в микроочередь задач.
Цикл событий и очередь обратного вызова — это кусочки одной и той же головоломки. Они не являются частью движка Javascript, а находятся вне движка JavaScript и обычно предоставляются средой выполнения, такой как веб-браузер или Node.js. Цикл событий использует API-интерфейсы движка JavaScript для связи с ним и предоставления функций обратного вызова для выполнения.
