Я программирую на JavaScript чуть больше года и за это время многое узнал об этом языке. Например, когда я впервые начал программировать на JavaScript, кто-то спросил меня: «О, это похоже на Java?» Я осторожно и небрежно ответил: «JavaScript для Java то же, что Ham для Hamster». Слава богу, они не задавали мне дополнительных вопросов, учитывая, что я только что процитировал учебник, который прочитал за несколько недель до этого. Сейчас это кажется таким глупым вопросом, но тогда он озадачил меня, и после многих часов исследований у меня, наконец, есть ответ (и многие другие), и, надеюсь, к концу этой статьи он будет и у вас.

История происхождения JavaScript

Я считаю, что для того, чтобы действительно понять что-то, нужно знать его корни. Еще в 1995 году Netscape (самый популярный браузер того времени) хотел сделать Интернет более динамичным, добавив анимацию, интерактивность и многое другое. В то время Java была королем урожая, и Netscape хотел использовать ее, учитывая ее популярность, но она была слишком сложной и многословной для повседневного использования. Из-за этого они хотели создать более универсальный язык, который мог бы выполнять эти задачи и выступать в качестве компаньона для Java. Netscape наняла Брендана Эйха для разработки указанного языка, и он сделал это всего за 10 дней…

Первоначально назывался Mocha, затем LiveScript, а позже JavaScript был объявлен официальным названием в декабре 1995 года исключительно по маркетинговым причинам, учитывая популярность Java. Вскоре после создания JavaScript Microsoft понадобилось противопоставить этому языку свой собственный язык, и она придумала чрезвычайно креативное название — JScript. JScript очень похож на JavaScript и поддерживается только Microsoft Internet Explorer. Это создало потребность в стандарте для языка сценариев общего назначения. По шагам ECMA International. На самом деле это сбивает с толку многих людей, начинающих изучать язык. Вы услышите такие термины, как ECMAScript, JavaScript и JScript, и вам может быть интересно, в чем разница. Что ж, теперь вы знаете разницу между JavaScript и JScript, но ECMAScript предоставляет правила, детали и рекомендации, которым должен следовать язык сценариев, чтобы считаться совместимым с ECMAScript. По сути, JavaScript — это язык сценариев общего назначения, соответствующий спецификации ECMAScript. Кроме того, если вы слышите термины ES1, ES2 и т. д., знайте, что они относятся к ECMAScript и версии, в которой они находятся. В настоящее время мы используем ES2017 (ES8) или восьмую версию ECMAScript, и если вы видите термин ES.Next, просто знайте, что это динамический термин и он ссылается на следующую версию ECMAScript, которая выйдет. Если вы хотите узнать больше об истории JavaScript, ознакомьтесь с этой статьей.

Клиент и сервер

Эти два термина часто используются вместе, но если у вас нет хорошего понимания, это может привести к большой путанице в будущем.

Клиент. Другой термин для обозначения любого устройства или программы, которая имеет доступ к Интернету, например настольного компьютера, ноутбука, смартфона и т. д. Наиболее распространенным примером является веб-браузер. Веб-браузер, как и Chrome, представляет собой компьютерную программу (также известную как программное приложение), которая может делать две вещи. Во-первых, веб-браузер знает, как перейти на веб-сервер в Интернете и запросить страницу. Браузер может загрузить запрошенную им страницу через сеть на ваш компьютер. Во-вторых, веб-браузер знает, как интерпретировать набор тегов HTML на странице, чтобы отобразить страницу на вашем экране с помощью механизма визуализации.

Сервер: устройство, предоставляющее услуги клиентским запросам. Например, веб-сервер — это часть программного обеспечения, которое может отвечать на запрос браузера о странице и доставлять страницу в веб-браузер через Интернет. Каждый день миллионы веб-серверов доставляют страницы в браузеры десятков миллионов людей через Интернет.

Подводя итог: клиент – это устройство или программа, которым требуются услуги через Интернет. сервер — это устройство или программа, которая отвечает на запросы клиентов, предоставляя им услуги.

Так при чем здесь JavaScript?

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

Все еще в замешательстве? Не бойтесь

По сути, наши компьютеры понимают то, что называется машинным кодом или то, что мы знаем как 1 и 0. Браузер (клиент) имеет три основные программы, которые запускаются, чтобы получить то, что мы хотим видеть. Анализатор DOM (преобразует HTML в структурированные страницы) и анализатор CSS (принимает CSS и обеспечивает правильность макета документа). Парсеры DOM и CSS обычно группируются вместе в так называемом макете или движке рендеринга. Затем идет JavaScript Engine, который принимает наш код JavaScript в удобочитаемой форме и в конечном итоге преобразует его в машинный код. Итак, это «клиентская сторона», потому что файлы загружаются и анализируются на клиентском компьютере и обрабатываются здесь. Таким образом, каждый раз, когда вы посещаете веб-сайт, вы, по сути, загружаете весь сайт на свой компьютер и сохраняете его локально. Сервер может сказать, как долго ваш браузер должен считать эти локальные копии действительными, что может контролировать, когда ваш клиент повторно загрузит страницу. Эти файлы попадают в вашу папку «временные файлы Интернета», и их нужно будет очищать вручную, а иногда и автоматически очищать редко используемые файлы. Это также иногда приводит к поломке некоторых веб-приложений, поэтому удаление кеша браузера может решить проблемы с некоторыми веб-сайтами, заставив клиент повторно загрузить все.

JavaScript

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

Язык высокого уровня:высокий уровень означает, что это язык программирования, который позволяет программисту писать программы, не зависящие от конкретного типа компьютера. Такие языки считаются высокоуровневыми, потому что они ближе к человеческим языкам и дальше от машинных языков. Помните, что наши компьютеры умеют читать только 1 и 0, и хотя вы могли бы технически разработать приложение, это было бы кропотливо сложно и заняло бы у вас вечность.

Например:

01001000 01100101 01101100 01101100 01101111 00100000 01010111 
01101111 01110010 01101100 01100100

> Hello World

console.log("Hello World")

> Hello World

Однопоточный:JavaScript — это однопоточный язык, что означает, что он может выполнять только одно вычисление за раз (вроде). При выполнении кода JavaScript на вашем компьютере выделяются две области памяти: стек вызовов и куча памяти.

Стек вызовов.Стек вызовов представляет собой высокопроизводительную непрерывную область памяти, используемую для выполнения ваших функций. Когда вы вызываете функцию, она создает фрейм в стеке вызовов, который содержит копию своих локальных переменных. Если вы вызываете функцию внутри другой функции, она добавит фрейм в стек, но если вы вернетесь из функции, она «вытолкнет» этот фрейм из стека. Стек вызовов соответствует стилю First In Last Out или FILO. Пример CallStack в действии можно увидеть ниже:

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

Сбор мусора:JavaScript имеет форму автоматического управления памятью, известную как сборка мусора. Цель сборщика мусора — следить за выделением памяти и определять, когда блок выделенной памяти больше не нужен, и освобождать его. Языки низкого уровня, такие как C, имеют примитивы ручного управления памятью, такие как malloc() и free(). Напротив, JavaScript автоматически выделяет память при создании объектов и освобождает ее, когда они больше не используются.

Интерпретировано:Что значит быть интерпретированным? Ну, чтобы понять это, мы должны знать разницу между интерпретатором и компилятором.

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

Переводчик.У вас есть друг, который знает этот язык, и когда вы готовы готовить, он садится рядом с вами и переводит рецепт построчно.

Компилятор —кто-то уже перевел рецепт для вас заранее. Теперь вы и любой другой можете прочитать это и приготовить это блюдо.

Точная компиляция:Вы только что прочитали об интерпретаторах и компиляторах. Компиляция Just-In-Time, или JIT, пытается использовать преимущества как интерпретатора, так и компилятора. Пока выполняется интерпретируемая программа (наш JavaScript), JIT-компилятор определяет наиболее часто используемый код и компилирует его в машинный код. Это помогает JavaScript работать быстрее, отслеживая код во время его выполнения и отправляя более используемые пути кода для оптимизации.

На основе прототипа:на основе прототипа — это еще один способ сказать, что используется прототипное наследование. Каждый объект в JavaScript имеет встроенное свойство, называемое его прототипом. Прототип сам по себе является объектом, поэтому прототип будет иметь свой собственный прототип, создавая так называемую цепочку прототипов. Цепочка завершится, когда вы достигнете прототипа, у которого есть нуль для собственного прототипа. Ключевым моментом здесь является то, что: все в JavaScript является объектом, каждый объект содержит ссылку на свой прототип, и это создает цепочку прототипов, в которой объекты могут наследовать поведение других объектов.

Мультипарадигма.Мультипарадигмальный язык программирования — это язык, который одинаково хорошо подходит для более чем одной парадигмы программирования. Парадигма программирования — это стиль написания и организация кода программы. Итак, каковы различные парадигмы программирования? Есть императивная и декларативная парадигмы. Декларативное программирование очень прямолинейно, что приводит к тому, что должно быть сделано. Императивное программирование состоит из ряда вычислительных операторов, которые фокусируются на том, как это должно быть сделано. Отличным примером является приглашение друга к себе домой. Используя декларативный подход, вы дали бы им свой адрес и позволили бы им выяснить, как добраться до вашего дома. При императивном подходе вместо того, чтобы давать им адрес, вы записываете пошаговую инструкцию, как добраться от их дома к вам.

Динамический язык. Когда вы слышите термин динамический язык, на самом деле это означает динамически типизированный. Что значит быть динамически типизированным? По сути, это просто означает, что типы данных становятся известными во время выполнения.

Цикл событий:Цикл событий — это процесс, который постоянно проверяет, пуст ли стек вызовов, и, если это так, он проверяет, есть ли событие в очереди обратного вызова, ожидающее вызова. . В самом простом смысле это просто цикл while, который ожидает сообщения из очереди, и как только эта очередь заполняется, он обрабатывает эти инструкции. Вы можете настроить какой-либо тип прослушивателя событий для получения данных при нажатии кнопки. Среда выполнения будет обрабатывать любой JavaScript, который вы определили как обратный вызов для этого события, что делает JavaScript неблокирующим. Единственное, что он когда-либо делает, — это прослушивает события и обрабатывает обратные вызовы, поэтому он никогда не ждет возвращаемого значения функции и может обрабатывать взаимодействия с пользователем. Вы можете быть сбиты с толку и задаться вопросом, как это не блокируется, если оно однопоточное. Ну, эти запросы выполняются веб-API (или библиотекой C++ для Node.js), каждый из которых имеет свой собственный поток, что делает возможным параллелизм в JavaScript.

Теперь вы немного знаете о JavaScript! Конечно, я затронул лишь несколько основ и даже не упомянул такие важные понятия, как Engine или Runtime Environment. Это всего лишь первая часть серии, которая, надеюсь, будет состоять из нескольких частей, поэтому я надеюсь, что вам интересно следовать дальше и продолжать узнавать больше! Следите за новостями и следите за новостями о том, что на самом деле такое JavaScript? (Цикл событий)!

Ресурсы:

Очевидно, я придумал все эти идеи самостоятельно и не был вдохновлен какими-либо видео на Youtube или другими статьями, но если бы и вдохновлял, то вот несколько запоминающихся:

Странная история JavaScript — https://www.youtube.com/watch?v=Sh6lK57Cuk4&t=432s

JavaScript: как это сделано — https://www.youtube.com/watch?v=FSs_JYwnAdI

Как работает JS? — https://www.youtube.com/watch?v=XQpZIEejKDY