Давайте начнем путешествие, чтобы выучить демонический язык.
Вы уже слышали о JavaScript и о том, для чего мы его используем. Но что удивительно, JavaScript (или JS) - это тип скриптового языка, который развивается день ото дня из-за активного взаимодействия с сообществом. Формируются новые модули и библиотеки, которые можно использовать внутри JS, чтобы сделать кодирование проще и быстрее. Поэтому иногда изучение JS для начинающих может быть немного сложным и трудным для понимания из-за регулярного обновления новых методов и отказа от старых методов. Существует огромная разница между JS, который мы видели в начале 2000-х годов, и текущей версией. В настоящее время в большинстве случаев разработчики используют самые разные JS-фреймворки без прямого использования ванильного JS для веб-разработки, потому что фреймворки упрощают их работу. Но чтобы войти в любую структуру JS, мы должны знать от базовых до глубоких концепций ванильного JS, потому что те же самые концепции применяются и в этих структурах. Итак, в этой статье я дам вам базовое введение в JavaScript, а также будут объяснены некоторые основные концепции, такие как однопоточная функция и асинхронное поведение. Эти термины очень важны, прежде чем переходить к какой-либо структуре JS. Некоторые другие концепции, такие как Замыкания, Обратные вызовы, Обещания, будут обсуждаться с подробным объяснением концепций в следующих статьях. Во-первых, давайте немного посмотрим на JavaScript и как он рождается.
Что такое JavaScript?
«JavaScript, также мы называем его JS, - это легкий, интерпретируемый, слабо типизированный (вам не нужно указывать, какой тип информации будет храниться в переменной), язык сценариев, который используется для веб-приложений на основе браузера, разработки приложений на основе Интернета вещей, создания веб-серверов, а также разработки серверных приложений и разработки игр ».
Но в настоящее время мы можем использовать JavaScript вне браузера, используя среду выполнения JavaScript, известную как NodeJS. JavaScript - это основанный на прототипах, многопарадигмальный, однопоточный , динамический язык, который также имеет асинхронное поведение. Он также поддерживает как объектно-ориентированное, так и функциональное программирование. JavaScript является производным от ECMAScript, который определяет все стандарты языка JavaScript. ECMAScript - это язык программирования общего назначения, который описывает все стандарты, необходимые JavaScript для обеспечения взаимодействия веб-страниц между различными браузерами. Стандарты ECMAScript выпускаются ежегодно, и в настоящее время последней версией ECMAScript является ECMAScript2020–11-е издание (ES11).
JavaScript - это язык с учетом регистра ( что означает, что имя переменной с именем «Пример» отличается от «пример»). JavaScript использует DOM (объектную модель документа), которая определяется соответствующим веб-браузером и содержит элементы HTML, которые могут использоваться и взаимодействовать с помощью JavaScript. JS использует эту DOM для добавления, изменения и удаления элементов HTML, изменения атрибутов элементов HTML, изменения CSS, а также реагирования на события страницы.
История JavaScript
Раньше, до появления JS, разработчики использовали LiveScript, который был представлен разработчиками Netscape примерно в сентябре 1995 года, чтобы сделать статические веб-сайты более интерактивными и придать некоторое динамическое поведение. Позже он был переименован в JavaScript. Название JavaScript происходит от Java, популярного в то время языка программирования. Компания Netscape использовала это как маркетинговый ход, чтобы сделать JS популярным. Подробнее об истории JS вы можете прочитать здесь.
ES5 vs ES6
ES - это язык сценариев, который определен международным стандартом ECMA. ES означает ECMAScript, поэтому ES5 (пятое издание ECMAScript) означает ECMASript5 (также известный как ECMAScript 2009), а ES6 (шестое издание ECMAScript) означает ECMASript2015. ES5 был выпущен в 2009 году, а ES6 был выпущен в 2015 году. Эта вещь ES была создана для поддержки стандартов в JavaScript, которые помогают ему развиваться дальше, не запутывая разработчиков с концепциями. Помимо JS, в ES есть много других реализаций. По сравнению с ES5, ES6, выпущенный в 2016 году, имеет некоторые важные улучшения в JS, которые позволяют разработчику писать сложные программы. В таблице ниже описаны некоторые ключевые различия между ES5 и ES6.
Почему JS считается однопоточным?
Возможно, вы встречали слово «однопоточный» в предыдущем разделе. Итак, что на самом деле означает «однопоточный». Обычно языки высокого уровня, такие как Java, используют многопоточный подход, который использует несколько потоков для запуска программы, придавая коду некоторую асинхронность (один код не ждет, пока предыдущий код не завершит свое выполнение). Языки программирования, такие как JavaScript, являются однопоточными, что означает, что JS имеет только один поток (один стек вызовов и одна куча памяти), поэтому он должен иметь синхронное поведение (следует подождать, пока предыдущий завершит свое выполнение). Но, как мы знаем, JS ведет себя асинхронно. Как возможно обеспечить асинхронное поведение на однопоточном языке, таком как JS? Что ж, благодаря движкам JavaScript, таким как V8 (Chrome), SpiderMonkey (Firefox), мы можем выполнять асинхронное поведение, даже если оно является однопоточным. Посмотрим, как это происходит.
Асинхронное поведение JavaScript
Как мы знаем ранее, даже несмотря на то, что JS является однопоточным, он демонстрирует асинхронное поведение. Это вот так.
Давайте возьмем простой пример сегмента кода.
Вышеупомянутая функция - это «setTimeout», которая является встроенной функцией, предоставляемой браузером. Эта функция принимает два аргумента, первый из которых - это функция, содержащая код, который нужно выполнить, а второй аргумент - время в миллисекундах. Итак, в приведенном выше примере оператор console.log внутри функции setTimeout выполняется через 1000 миллисекунд (1 секунду). Итак, прежде чем функция setTimeout завершит свое выполнение, вы заметите, что выполняется второй оператор console.log, который отображается как «Hello World 2». Итак, результат будет показан ниже.
Hello World 2 Hello World 1 <- this display after 1 second
Итак, здесь описывается асинхронное поведение в JavaScript, что просто означает, что console.log («Hello World 2») не дожидается завершения выполнения методов setTimeout. Итак, программа сначала отображает второй оператор console.log, а затем через 1 секунду (из-за 1000 миллисекунд) выполняется первый оператор console.log. Итак, поскольку JS является однопоточным, согласно теории, второй оператор console.log должен ждать, пока метод setTimeout завершит свое выполнение как синхронное поведение. Но этого не происходит. Итак, как это произошло. Все это управляется самим движком JavaScript. Давайте погрузимся в науку, лежащую в основе движка JavaScript.
Итак, на изображении выше вы можете увидеть три модуля или части внутри механизма JavaScript с именами Стек вызовов, веб-API и очередь обратных вызовов. Это основные три компонента. части в движке JS (возможно, движок Chrome V8, движок Forefox SpiderMonkey и т. д.). Итак, стек вызовов представляет собой стек (который использует подход последним пришел - первым обслужен), который временно хранит данные, пока они не будут выполнены (в данном случае до тех пор, пока он не будет напечатан в консоли). Что делает веб-API, так это то, что он хранит все встроенные методы, такие как setTimeout, и выполняет их внутри веб-API, а не отправляет их в стек вызовов. back Queue хранит данные, возвращаемые веб-API, а затем помещает их в стек вызовов, чтобы распечатать их в консоли. Итак, на видео ниже показано, как это происходит.
Для простоты я назвал функцию setTimeout №1, а второй оператор console.log №2 (# означает «число»). Сначала начинается выполнение setTimeout. Поскольку setTimeout - это метод, который находится в веб-API, его выполнение происходит внутри веб-API. Не в стеке вызовов. Итак, пока он выполняется в веб-API, второй оператор console.log помещается в стек вызовов для выполнения. После того, как он будет выполнен и напечатан в консоли как «Hello World 2», он будет удален внутри стека вызовов. (После завершения выполнения сегмента кода в стеке вызовов он автоматически удаляется из стека вызовов). Тем временем метод setTimeout завершает свое выполнение и ждет внутри очереди обратного вызова. Затем он помещается в стек вызовов и отображается в консоли. Вот почему мы сначала видим Hello World 2, а затем через 1 секунду (время выполнения setTimeout, как указано в методе как 1000 миллисекунд) мы видим «Hello World 1».
Вот как JavaScript приобретает асинхронное поведение, хотя и является однопоточным языком.
Итак, теперь у вас может быть краткое представление о JavaScript. Итак, в будущих статьях я хотел бы более подробно рассказать о таких концепциях, как обратные вызовы, обещания, асинхронное ожидание, замыкания и многие другие. Итак, ждите выхода следующей части и оставайтесь в безопасности.
Мир. 😉✌
