В этой статье я расскажу о некоторых фундаментальных концепциях JavaScript. Мы уже знаем, что JS — это язык для браузера, а также язык сценариев.
01. Как работает JavaScript
Прежде всего, давайте разберемся, как работает JS. Самая простая JS-программа, которую мы можем написать, представляет собой пустой JS-файл, встроенный в HTML. Основным компонентом, отвечающим за работу JS, является движок JS, который выполняет нашу программу. Движок JS состоит из 2 основных компонентов:
- Куча памяти — неструктурированный пул памяти, в котором происходит выделение памяти. Здесь хранятся все объекты программы.
- Call Stack — где выполняются кадры стека.
Наши машины (браузер) не понимают JS-коды высокого уровня. Его нужно преобразовать в формат, понятный браузеру. Когда мы запускаем JS-программу, JS-движок создает специальную среду для выполнения JS-программы, которая называется Контекст выполнения. Создание контекста исполнения происходит в 2 стороны,
- Этап создания
Эта фаза делает 3 вещи,
- Создание объекта активации — просмотрите код JS и перечислите все переменные и объявления.
- Создание цепочки областей видимости — список всех переменных и объявлений текущей функции.
- Определить ключевое слово «это»
Давайте возьмем пример кода и посмотрим, как это происходит.
Когда мы сначала запускаем эту программу, она создает контекст выполнения в Куче памяти. Давайте посмотрим, что происходит на этапах создания и выполнения.
На этапе создания будут созданы переменные var a, var b, var ans и var ans2. Но пока не будут созданы переменные num1 и num2. Кроме того, он создает переменную из функции add() и присваивает сегмент кода этой переменной, как показано ниже. Этот процесс называется Глобальный контекст выполнения (GEC). Важно то, что другим созданным здесь переменным не будет присвоено значение. Вместо них присваивается значение null.
- Этап выполнения
Затем на этапе выполнения этим переменным присваиваются значения. Таким образом, var a присвоено значение 10, а var b присвоено значение 20. Когда дело доходит до строки 4, которую мы добавили ( ), он создаст контекст функции. Он также имеет этап создания и выполнения для функции add(). Он включает var num1 и var num2 как неопределенные, которые принадлежат функции.
Когда он увидит возврат в строке 5, он уничтожит вновь созданный контекст функции и вернет результат контекста в позицию вызова функции (в строку 8). так что теперь ans будет 30.
Примечание. Если мы вызовем другую функцию внутри функции добавления, она создаст другой контекст функции внутри этого вновь созданногоконтекста функции на этапе выполнения. Это происходит снова и снова, когда мы вызываем больше функций внутри.
Теперь давайте посмотрим, что происходит в стеке вызовов. Он уже имеет GEC. Когда мы выполняем функцию add() в строке 8, она создает новый кадр для функции add().
Как только мы выйдем из метода, он вытащит метод из стека и перейдет к GEC. Таким образом, стек вызовов отвечает за управление выполнением контекста.
Проблема переполнения стека
Когда он вызывает одну и ту же функцию (рекурсию) внутри функции, он снова и снова создает новые кадры стека. Если стек заполнен, он больше не может добавлять кадры стека в стек вызовов. Мы назвали это проблемой переполнения стека, которая вызовет ошибки в программе.
02. Подъем
Кажется, что процесс интерпретатора перемещает объявление функций, переменных или классов в верхнюю часть их области видимости перед выполнением кода. Это происходит потому, что на этапе создания он перемещает все глобально объявленные переменные наверх. Но он перемещает только переменное украшение, а не назначение.
Поднятие объявлений переменных и классов позволило ссылаться на них до того, как они будут объявлены. Кроме того, функции можно безопасно использовать в коде до их объявления из-за подъема.
Здесь мы регистрируем переменную a перед объявлением или инициализацией значения для нее. Вывод будет неопределенным. Но это не даст нам ошибки.
Пусть переменные также поднимаются, но они не инициализируются значением по умолчанию. Они читаются до того, как он инициализируется, и возникает ошибка.
Здесь движок JavaScript знает, что есть переменная с именем a, и говорит, что ей не присвоено значение. Здесь для переменной let создается специальная область, называемая областью сценария.
Здесь мы вызываем функции до того, как произойдет оформление функции. Здесь строка 1 не выдаст ошибки, потому что функции поддерживаются для подъема. Но строка 2 выдаст ошибку, потому что ссылки на функции не поддерживаются для подъема.
Здесь это дает ошибку, потому что это не определено. Это означает, что функции стрелок также поддерживаются для подъема.
03. Реактивное программирование
Реактивное программирование — это парадигма программирования, которая позволяет нам управлять потоками данных с помощью функций. Там все происходит асинхронно (нет необходимости выполнять ровно следующую строку одну за другой). Таким образом, это выполняет некоторую операцию потока данных, которые начинаются в одном месте и потребляются в другом месте. Нам нужны 3 вещи для реактивного программирования,
- Данные как поток
- Функциональное программирование
- Асинхронные наблюдатели
Где мы можем использовать реактивное программирование,
- Места, где требуется время для обработки запроса. (Пример: вызов API через HTTP для получения данных, фильтрации результатов и заполнения пользовательского интерфейса)
- Уведомление журнала / данные датчика
- Чтение данных из базы данных и их обработка перед созданием
Давайте посмотрим, что здесь происходит. Когда происходит событие, между пробелами в данных нет определенной закономерности. Потому что нет порядка или определенной временной последовательности.
Здесь мы используем фильтр и манипулируем данными, и результат приходит. Источник данных потока называется Subject. Сущность, которая подписывается на субъект для получения данных, называется наблюдатель. Кроме того, у нас может быть несколько наблюдателей.
Тогда давайте посмотрим, что такое функциональное программирование.
Большинство языков не поддерживаются для реактивного программирования. Итак, нам нужна внешняя поддержка, чтобы преобразовать их для поддержки реактивного программирования.
reactivex.io — это официальная платформа, которая предоставляет отдельные библиотеки для каждого языка для поддержки реактивного программирования.
RxJS — это библиотека поддержки реактивного программирования для JavaScript.
