update js
This commit is contained in:
@@ -10,4 +10,6 @@ sidebar_position: 1
|
||||
Нет никакого способа отменить use strict
|
||||
Use strict по умолчанию выключен в консоли браузера
|
||||
|
||||
Современный JavaScript поддерживает «классы» и «модули» — продвинутые структуры языка (и мы, конечно, до них доберёмся), которые автоматически включают строгий режим.
|
||||
Современный JavaScript поддерживает «классы» и «модули» — продвинутые структуры языка (и мы, конечно, до них доберёмся), которые автоматически включают строгий режим.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/strict-mode](https://learn.javascript.ru/strict-mode)**
|
||||
@@ -92,4 +92,6 @@ typeof function(){} == "function" // именно для функций
|
||||
+function() {
|
||||
alert("Выражение начинается с унарного плюса");
|
||||
}();
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/variables](https://learn.javascript.ru/variables)**
|
||||
@@ -52,4 +52,6 @@ alert( Boolean(1) ); // true
|
||||
alert( Boolean(0) ); // false
|
||||
alert( Boolean("Привет!") ); // true
|
||||
alert( Boolean("") ); // false
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/types](https://learn.javascript.ru/types)**
|
||||
@@ -36,4 +36,6 @@ sidebar_position: 4
|
||||
let a = (1 + 2, 3 + 4);
|
||||
alert( a ); // 7 (результат вычисления 3 + 4)
|
||||
```
|
||||
❗ ***Запятая имеет очень низкий приоритет***
|
||||
❗ ***Запятая имеет очень низкий приоритет***
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/operators](https://learn.javascript.ru/operators)**
|
||||
@@ -41,3 +41,4 @@ sidebar_position: 5
|
||||
При использовании математических операторов и других операторов сравнения \< \> \<= \>=
|
||||
Значения null/undefined преобразуются к числам: `null` становится 0, а `undefined` – NaN.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/comparison](https://learn.javascript.ru/comparison)**
|
||||
@@ -176,4 +176,8 @@ x ??= y
|
||||
let userAge = null;
|
||||
userAge ??= 18;
|
||||
alert(userAge) // 18
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **Источник if-else: [https://learn.javascript.ru/ifelse](https://learn.javascript.ru/ifelse)**
|
||||
🚀 **Источник logical ops: [https://learn.javascript.ru/logical-operators](https://learn.javascript.ru/logical-operators)**
|
||||
🚀 **Источник nullish ops: [https://learn.javascript.ru/nullish-operators](https://learn.javascript.ru/nullish-operators)**
|
||||
@@ -37,4 +37,6 @@ for (let i = 0; i < 3; i++) {
|
||||
Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ?. В частности, использование таких директив, как **break/continue**, вызовет ошибку.
|
||||
```js
|
||||
(i > 5) ? alert(i) : continue; // continue здесь приведёт к ошибке
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/while-for](https://learn.javascript.ru/while-for)**
|
||||
@@ -2,7 +2,6 @@
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
|
||||
# Сборка мусора
|
||||
|
||||
Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память.
|
||||
@@ -50,4 +49,6 @@ sidebar_position: 8
|
||||
### Главное, что нужно знать:
|
||||
- Сборка мусора выполняется автоматически. Мы не можем ускорить или предотвратить её.
|
||||
- Объекты сохраняются в памяти, пока они достижимы.
|
||||
- Если на объект есть ссылка – вовсе не факт, что он является достижимым (из корня): набор взаимосвязанных объектов может стать недоступен в целом.
|
||||
- Если на объект есть ссылка – вовсе не факт, что он является достижимым (из корня): набор взаимосвязанных объектов может стать недоступен в целом.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/garbage-collection](https://learn.javascript.ru/garbage-collection)**
|
||||
@@ -6,17 +6,14 @@ sidebar_position: 1
|
||||
Объекты – это ассоциативные массивы с рядом дополнительных возможностей.
|
||||
|
||||
Они хранят свойства (пары ключ-значение), где:
|
||||
|
||||
- Ключи свойств должны быть строками или символами (обычно строками).
|
||||
- Значения могут быть любого типа.
|
||||
|
||||
Чтобы получить доступ к свойству, мы можем использовать:
|
||||
|
||||
- Запись через точку: obj.property.
|
||||
- Квадратные скобки obj["property"]. Квадратные скобки позволяют взять ключ из переменной, например, obj[varWithKey].
|
||||
|
||||
Дополнительные операторы:
|
||||
|
||||
- Удаление свойства: delete obj.prop.
|
||||
- Проверка существования свойства: "key" in obj.
|
||||
- Перебор свойств объекта: цикл for for (let key in obj).
|
||||
@@ -118,3 +115,5 @@ for (let key in user) {
|
||||
```
|
||||
### Упорядочение свойств объекта
|
||||
Cвойства упорядочены особым образом: свойства с целочисленными ключами сортируются по возрастанию, остальные располагаются в порядке создания.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/object](https://learn.javascript.ru/object)**
|
||||
@@ -74,3 +74,5 @@ let clone = JSON.parse(JSON.stringify(obj))
|
||||
|
||||
#### Метод structuredClone (deep)
|
||||
Мы можем использовать глобальный метод ***structuredClone()***, который позволяет сделать полную копию объекта. К сожалению он поддерживается только современными браузерами.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/object-copy](https://learn.javascript.ru/object-copy)**
|
||||
@@ -37,4 +37,6 @@ let user = {
|
||||
1. Методы могут ссылаться на объект через `this`.
|
||||
2. Значение `this` определяется во время исполнения кода.
|
||||
- При объявлении любой функции в ней можно использовать `this`, но этот `this` не имеет значения до тех пор, пока функция не будет вызвана.
|
||||
- Когда функция вызывается синтаксисом «метода» – ***object.method()***, значением `this` во время вызова является `object`.
|
||||
- Когда функция вызывается синтаксисом «метода» – ***object.method()***, значением `this` во время вызова является `object`.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/object-methods](https://learn.javascript.ru/object-methods)**
|
||||
@@ -31,4 +31,6 @@ function User(name) {
|
||||
```
|
||||
Итого:
|
||||
- Функции-конструкторы или просто конструкторы, являются обычными функциями, но существует общепринятое соглашение именовать их с заглавной буквы.
|
||||
- Функции-конструкторы следует вызывать только с помощью `new`. Такой вызов подразумевает создание пустого `this` в начале и возврат заполненного в конце.
|
||||
- Функции-конструкторы следует вызывать только с помощью `new`. Такой вызов подразумевает создание пустого `this` в начале и возврат заполненного в конце.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/constructor-new](https://learn.javascript.ru/constructor-new)**
|
||||
@@ -33,4 +33,6 @@ user?.name = "John"; // Ошибка, не работает
|
||||
|
||||
Как мы видим, все они просты и понятны в использовании. ?. проверяет левую часть на `null/undefined` и позволяет продолжить вычисление, если это не так.
|
||||
|
||||
Цепочка ?. позволяет безопасно получать доступ к вложенным свойствам.
|
||||
Цепочка ?. позволяет безопасно получать доступ к вложенным свойствам.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/optional-chaining](https://learn.javascript.ru/optional-chaining)**
|
||||
@@ -41,4 +41,6 @@ alert(id1 == id2); // false
|
||||
2. Существует множество системных символов, используемых внутри JavaScript, доступных как Symbol.*. Мы можем
|
||||
использовать их, чтобы изменять встроенное поведение ряда объектов. Например, в дальнейших главах мы будем
|
||||
использовать Symbol.iterator для итераторов, Symbol.toPrimitive для настройки преобразования объектов в примитивы и
|
||||
так далее.
|
||||
так далее.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/symbol](https://learn.javascript.ru/symbol)**
|
||||
@@ -7,7 +7,6 @@ sidebar_position: 7
|
||||
Преобразование объекта в примитив вызывается автоматически многими встроенными функциями и операторами, которые ожидают примитив в качестве значения.
|
||||
|
||||
Существует всего 3 типа (хинта) для этого:
|
||||
|
||||
- "string" (для alert и других операций, которым нужна строка)
|
||||
- "number" (для математических операций)
|
||||
- "default" (для некоторых других операторов, обычно объекты реализуют его как "number")
|
||||
@@ -15,7 +14,6 @@ sidebar_position: 7
|
||||
Спецификация явно описывает для каждого оператора, какой ему следует использовать хинт.
|
||||
|
||||
Алгоритм преобразования таков:
|
||||
|
||||
1. Сначала вызывается метод `obj[Symbol.toPrimitive](hint)`, если он существует,
|
||||
2. В случае, если хинт равен "string"
|
||||
- происходит попытка вызвать `obj.toString()` и `obj.valueOf()`, смотря что есть.
|
||||
@@ -24,4 +22,6 @@ sidebar_position: 7
|
||||
|
||||
Все эти методы должны возвращать примитив (если определены).
|
||||
|
||||
На практике часто бывает достаточно реализовать только `obj.toString()` в качестве универсального метода для преобразований к строке, который должен возвращать удобочитаемое представление объекта для целей логирования или отладки.
|
||||
На практике часто бывает достаточно реализовать только `obj.toString()` в качестве универсального метода для преобразований к строке, который должен возвращать удобочитаемое представление объекта для целей логирования или отладки.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/object-toprimitive](https://learn.javascript.ru/object-toprimitive)**
|
||||
@@ -75,3 +75,5 @@ user.name = ""; // Имя слишком короткое...
|
||||
|
||||
## Использование для совместимости
|
||||
У аксессоров есть интересная область применения – они позволяют в любой момент взять «обычное» свойство и изменить его поведение, поменяв на геттер и сеттер.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/property-accessors](https://learn.javascript.ru/property-accessors)**
|
||||
@@ -15,8 +15,6 @@ sidebar_position: 1
|
||||
- Может хранить множество значений как свойства.
|
||||
- Объявляется при помощи фигурных скобок \{\}, например: \{name: "Рома", age: 30\}. В JavaScript есть и другие виды объектов: например, функции тоже являются объектами.
|
||||
|
||||
|
||||
|
||||
## Примитив как объект
|
||||
1. Примитивы остаются примитивами. Одно значение, как и хотелось.
|
||||
2. Язык позволяет осуществлять доступ к методам и свойствам строк, чисел, булевых значений и символов.
|
||||
@@ -25,4 +23,6 @@ sidebar_position: 1
|
||||
Каждый примитив имеет свой собственный «объект-обёртку», которые называются: **`String`**, **`Number`**, **`Boolean`**, **`Symbol`** и **`BigInt`**. Таким образом, они имеют разный набор методов.
|
||||
|
||||
💥 ***null/undefined не имеют методов*** \
|
||||
Попытка доступа к свойствам такого значения возвратит ошибку:
|
||||
Попытка доступа к свойствам такого значения возвратит ошибку
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/primitives-methods](https://learn.javascript.ru/primitives-methods)**
|
||||
@@ -121,3 +121,5 @@ alert( parseInt('a123') ); // NaN
|
||||
|
||||
### Другие математические функции
|
||||
В JavaScript встроен объект **Math**, который содержит различные математические функции и константы.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/number](https://learn.javascript.ru/number)**
|
||||
@@ -92,4 +92,6 @@ str.substr(start [, length]) // - возвращает часть строки
|
||||
Вызов str.localeCompare(str2) возвращает число, которое показывает, какая строка больше в соответствии с правилами языка:
|
||||
- Отрицательное число, если str меньше str2.
|
||||
- Положительное число, если str больше str2.
|
||||
- 0, если строки равны.
|
||||
- 0, если строки равны.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/string](https://learn.javascript.ru/string)**
|
||||
@@ -75,4 +75,4 @@ alert( matrix[1][1] ); // 5, центральный элемент
|
||||
Итак, если мы всё же сравниваем массивы с помощью ==, то они никогда не будут одинаковыми, если только мы не сравним две переменные, которые ссылаются на один и тот же массив
|
||||
Вместо этого сравните их по элементам в цикле или используя методы итерации.
|
||||
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/array](https://learn.javascript.ru/array)**
|
||||
@@ -164,4 +164,6 @@ alert( result ); // 15
|
||||
- arr.some(fn)/arr.every(fn) проверяет массив.
|
||||
- arr.fill(value, start, end) – заполняет массив повторяющимися value, начиная с индекса start до end.
|
||||
- arr.copyWithin(target, start, end) – копирует свои элементы, начиная с позиции start и заканчивая end, в себя, на позицию target (перезаписывая существующие).
|
||||
- arr.flat(depth)/arr.flatMap(fn) создаёт новый плоский массив из многомерного массива.
|
||||
- arr.flat(depth)/arr.flatMap(fn) создаёт новый плоский массив из многомерного массива.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/array-methods](https://learn.javascript.ru/array-methods)**
|
||||
@@ -94,4 +94,5 @@ alert(obj.orange); // готово! obj = { banana: 1, orange: 2, meat: 4 }
|
||||
- **`set.values()`** – возвращает перебираемый объект для значений,
|
||||
- **`set.keys()`** – то же самое, что и **`set.values()`**, присутствует для обратной совместимости с **`Map`**,
|
||||
- **`set.entries()`** – возвращает перебираемый объект для пар вида [значение, значение], присутствует для обратной совместимости с **`Map`**.
|
||||
-
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/map-set](https://learn.javascript.ru/map-set)**
|
||||
@@ -60,4 +60,6 @@ alert(visitedSet.has(mary)); // false
|
||||
|
||||
john = null;
|
||||
// структура данных visitedSet будет очищена автоматически (объект john будет удалён из visitedSet)
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/weakmap-weakset](https://learn.javascript.ru/weakmap-weakset)**
|
||||
@@ -35,4 +35,6 @@ let user = {
|
||||
Если мы хотели бы их применить, то можно использовать Object.entries с последующим вызовом Object.fromEntries:
|
||||
1. Вызов **`Object.entries(obj)`** возвращает массив пар ключ/значение для obj.
|
||||
2. На нём вызываем методы массива, например, **`map`**.
|
||||
3. Используем `Object.fromEntries(array)` на результате, чтобы преобразовать его обратно в объект.
|
||||
3. Используем `Object.fromEntries(array)` на результате, чтобы преобразовать его обратно в объект.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/keys-values-entries](https://learn.javascript.ru/keys-values-entries)**
|
||||
@@ -117,3 +117,5 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/destructuring-assignment](https://learn.javascript.ru/destructuring-assignment)**
|
||||
@@ -68,4 +68,6 @@ alert(date); // ...1st Feb 2013!
|
||||
|
||||
Возможны и более короткие варианты, например, YYYY-MM-DD или YYYY-MM, или даже YYYY.
|
||||
|
||||
Вызов Date.parse(str) обрабатывает строку в заданном формате и возвращает таймстамп (количество миллисекунд с 1 января 1970 года UTC+0). Если формат неправильный, возвращается NaN.
|
||||
Вызов Date.parse(str) обрабатывает строку в заданном формате и возвращает таймстамп (количество миллисекунд с 1 января 1970 года UTC+0). Если формат неправильный, возвращается NaN.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/date](https://learn.javascript.ru/date)**
|
||||
@@ -60,3 +60,4 @@ let value = JSON.parse(str[, reviver]);
|
||||
|
||||
Кроме того, JSON не поддерживает комментарии.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/json](https://learn.javascript.ru/json)**
|
||||
@@ -42,4 +42,6 @@ let double = n => n * 2;
|
||||
|
||||
- У функций могут быть локальные переменные: т.е. объявленные в теле функции. Такие переменные видимы только внутри функции.
|
||||
- У параметров могут быть значения по умолчанию: function sum(a = 1, b = 2) \{...\}.
|
||||
- Функции всегда что-нибудь возвращают. Если нет оператора return, результатом будет undefined.
|
||||
- Функции всегда что-нибудь возвращают. Если нет оператора return, результатом будет undefined.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/function-basics](https://learn.javascript.ru/function-basics)**
|
||||
@@ -36,4 +36,6 @@ function имя(параметры, через, запятую) {
|
||||
Возможно использовать **return** и без значения. Это приведёт к немедленному выходу из функции.
|
||||
|
||||
❗ ***Результат функции с пустым return или без него – undefined*** \
|
||||
❌ Никогда не добавляйте перевод строки между return и его значением
|
||||
❌ Никогда не добавляйте перевод строки между return и его значением
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/function-basics](https://learn.javascript.ru/function-basics)**
|
||||
@@ -78,4 +78,6 @@ let sayHi = function(name) { // (*) магии больше нет
|
||||
|
||||
В большинстве случаев, когда нам нужно объявить функцию, Function Declaration предпочтительнее, т.к функция будет видна
|
||||
до своего объявления в коде. Это даёт нам больше гибкости в организации кода, и, как правило, делает его более
|
||||
читабельным.
|
||||
читабельным.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/function-expressions](https://learn.javascript.ru/function-expressions)**
|
||||
@@ -57,4 +57,6 @@ function defer(f, ms) {
|
||||
- Не имеют this.
|
||||
- Не имеют arguments.
|
||||
- Не могут быть вызваны с new.
|
||||
- У них также нет super.
|
||||
- У них также нет super.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/arrow-functions-basics](https://learn.javascript.ru/arrow-functions-basics)**
|
||||
@@ -60,3 +60,4 @@ let arr = [3, 5, 1];
|
||||
alert( Math.max(...arr) ); // 5 (оператор "раскрывает" массив в список аргументов)
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/rest-parameters-spread-operator](https://learn.javascript.ru/rest-parameters-spread-operator)**
|
||||
@@ -3,8 +3,6 @@ sidebar_position: 6
|
||||
---
|
||||
|
||||
# Область видимости переменных, замыкание
|
||||
Источник: DeepSeek
|
||||
Доп. источник: [https://learn.javascript.ru/closure](https://learn.javascript.ru/closure)
|
||||
|
||||
## Область видимости (scope)
|
||||
В JavaScript **область видимости (scope)** определяет, где переменные, функции и другие идентификаторы могут быть использованы в коде. Понимание области видимости важно для написания корректного и предсказуемого кода. В JavaScript есть несколько типов областей видимости:
|
||||
@@ -134,3 +132,6 @@ delayedGreeting("Алексей"); // Через 1 секунду: "Привет
|
||||
Замыкания могут приводить к утечкам памяти, если они сохраняют ссылки на большие объекты, которые больше не используются. Чтобы избежать этого:
|
||||
- Убедитесь, что замыкания не сохраняют ненужные данные.
|
||||
- Используйте null для очистки ссылок, когда они больше не нужны.
|
||||
|
||||
🚀 Источник: DeepSeek \
|
||||
🚀 Доп. источник: [https://learn.javascript.ru/closure](https://learn.javascript.ru/closure)
|
||||
@@ -17,4 +17,6 @@ sidebar_position: 7
|
||||
- …Но чаще на него ссылаются по-старому, используя имя, характерное для данного окружения, такое как window (браузер) и global (Node.js).
|
||||
- Следует хранить значения в глобальном объекте, только если они действительно глобальны для нашего проекта. И стараться свести их количество к минимуму.
|
||||
- В браузерах, если только мы не используем модули, глобальные функции и переменные, объявленные с помощью var, становятся свойствами глобального объекта.
|
||||
- Для того, чтобы код был проще и в будущем его легче было поддерживать, следует обращаться к свойствам глобального объекта напрямую, как window.x.
|
||||
- Для того, чтобы код был проще и в будущем его легче было поддерживать, следует обращаться к свойствам глобального объекта напрямую, как window.x.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/global-object](https://learn.javascript.ru/global-object)**
|
||||
@@ -66,4 +66,6 @@ let timerId = setTimeout(function request() {
|
||||
Особый вариант использования: `setTimeout(func, 0)` или просто `setTimeout(func)`.
|
||||
Это планирует вызов `func` настолько быстро, насколько это возможно. Но планировщик будет вызывать функцию только после завершения выполнения текущего кода.
|
||||
|
||||
Так вызов функции будет запланирован сразу после выполнения текущего кода.
|
||||
Так вызов функции будет запланирован сразу после выполнения текущего кода.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/settimeout-setinterval](https://learn.javascript.ru/settimeout-setinterval)**
|
||||
@@ -23,3 +23,4 @@ let wrapper = function(original, arguments) {
|
||||
```
|
||||
Весьма распространено заимствовать методы массива и применять их к arguments. В качестве альтернативы можно использовать объект с остаточными параметрами ...args, который является реальным массивом.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/call-apply-decorators](https://learn.javascript.ru/call-apply-decorators)**
|
||||
@@ -62,3 +62,5 @@ let sayHi = user.sayHi.bind(user); // (*)
|
||||
sayHi(); // Привет, Вася!
|
||||
setTimeout(sayHi, 1000); // Привет, Вася!
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/bind](https://learn.javascript.ru/bind)**
|
||||
@@ -42,3 +42,5 @@ sidebar_position: 1
|
||||
Цикл `for..in` проходит не только по собственным, но и по унаследованным свойствам объекта.
|
||||
|
||||
Если унаследованные свойства нам не нужны, то мы можем отфильтровать их при помощи встроенного метода `obj.hasOwnProperty(key)`: он возвращает `true`, если у `obj` есть собственное, не унаследованное, свойство с именем `key`.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/prototype-inheritance](https://learn.javascript.ru/prototype-inheritance)**
|
||||
@@ -25,4 +25,6 @@ let user = {
|
||||
};
|
||||
```
|
||||
|
||||
По умолчанию все функции имеют `F.prototype = { constructor: F }`, поэтому мы можем получить конструктор объекта через свойство `"constructor"`.
|
||||
По умолчанию все функции имеют `F.prototype = { constructor: F }`, поэтому мы можем получить конструктор объекта через свойство `"constructor"`.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/function-prototype](https://learn.javascript.ru/function-prototype)**
|
||||
@@ -63,4 +63,6 @@ alert( obj.join(',') ); // Hello,world!
|
||||
|
||||
Но это будет невозможно, если `obj` уже наследует от другого объекта. Помните, мы можем наследовать только от одного объекта одновременно.
|
||||
|
||||
Заимствование методов – гибкий способ, позволяющий смешивать функциональность разных объектов по необходимости.
|
||||
Заимствование методов – гибкий способ, позволяющий смешивать функциональность разных объектов по необходимости.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/native-prototypes](https://learn.javascript.ru/native-prototypes)**
|
||||
@@ -28,4 +28,6 @@ sidebar_position: 4
|
||||
- `Reflect.ownKeys(obj)` – возвращает массив всех собственных ключей.
|
||||
- `obj.hasOwnProperty(key)`: возвращает `true`, если у `obj` есть собственное (не унаследованное) свойство с именем `key`.
|
||||
|
||||
Все методы, которые возвращают свойства объектов (такие как `Object.keys` и другие), возвращают «собственные» свойства. Если мы хотим получить и унаследованные, можно воспользоваться циклом `for..in`.
|
||||
Все методы, которые возвращают свойства объектов (такие как `Object.keys` и другие), возвращают «собственные» свойства. Если мы хотим получить и унаследованные, можно воспользоваться циклом `for..in`.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/prototype-methods](https://learn.javascript.ru/prototype-methods)**
|
||||
@@ -48,4 +48,6 @@ class User {
|
||||
}
|
||||
new User().sayHi();
|
||||
```
|
||||
Свойство name не устанавливается в `User.prototype`. Вместо этого оно создаётся оператором `new` перед запуском конструктора, это именно свойство объекта.
|
||||
Свойство name не устанавливается в `User.prototype`. Вместо этого оно создаётся оператором `new` перед запуском конструктора, это именно свойство объекта.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/class](https://learn.javascript.ru/class)**
|
||||
@@ -45,4 +45,6 @@ class Rabbit extends Animal {
|
||||
У классов есть ключевое слово "super", чтобы сделать новый на его основе, изменяя или расширяя его функциональность
|
||||
|
||||
super.method(...) вызывает родительский метод.
|
||||
super(...) для вызова родительского конструктора (работает только внутри нашего конструктора).
|
||||
super(...) для вызова родительского конструктора (работает только внутри нашего конструктора).
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/class-inheritance](https://learn.javascript.ru/class-inheritance)**
|
||||
@@ -43,4 +43,6 @@ Article.publisher = "Илья Кантор";
|
||||
```
|
||||
|
||||
## Наследование статических свойств и методов
|
||||
Статические свойства и методы наследуются.
|
||||
Статические свойства и методы наследуются.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/static-properties-methods](https://learn.javascript.ru/static-properties-methods)**
|
||||
@@ -43,4 +43,6 @@ sidebar_position: 4
|
||||
|
||||
На уровне языка # является специальным символом, который означает, что поле приватное. Мы не можем получить к нему доступ извне или из наследуемых классов.
|
||||
|
||||
Приватные поля не конфликтуют с публичными. У нас может быть два поля одновременно – приватное #waterAmount и публичное waterAmount.
|
||||
Приватные поля не конфликтуют с публичными. У нас может быть два поля одновременно – приватное #waterAmount и публичное waterAmount.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/private-protected-properties-methods](https://learn.javascript.ru/private-protected-properties-methods)**
|
||||
@@ -43,4 +43,6 @@ alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]
|
||||
```
|
||||
В итоге мы получили «typeof на стероидах», который не только работает с примитивными типами данных, но также и со встроенными объектами, и даже может быть настроен.
|
||||
|
||||
Можно использовать `{}.toString.call` вместо `instanceof` для встроенных объектов, когда мы хотим получить тип в виде строки, а не просто сделать проверку.
|
||||
Можно использовать `{}.toString.call` вместо `instanceof` для встроенных объектов, когда мы хотим получить тип в виде строки, а не просто сделать проверку.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/instanceof](https://learn.javascript.ru/instanceof)**
|
||||
@@ -13,3 +13,5 @@ sidebar_position: 6
|
||||
Простейший способ реализовать примесь в JavaScript – это создать объект с полезными методами, которые затем могут быть легко добавлены в прототип любого класса.\
|
||||
Это не наследование, а просто копирование методов.
|
||||
Примеси могут наследовать друг друга.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/mixins](https://learn.javascript.ru/mixins)**
|
||||
@@ -72,3 +72,5 @@ window.onerror = function(message, url, line, col, error) {
|
||||
- **url** - URL скрипта, в котором произошла ошибка.
|
||||
- **line**, col - Номера строки и столбца, в которых произошла ошибка.
|
||||
- **error** - Объект ошибки.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/try-catch](https://learn.javascript.ru/try-catch)**
|
||||
@@ -3,9 +3,9 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Пользовательские ошибки, расширение Error
|
||||
Источник: [https://learn.javascript.ru/custom-errors](https://learn.javascript.ru/custom-errors)
|
||||
|
||||
- Мы можем наследовать свои классы ошибок от `Error` и других встроенных классов ошибок, но нужно позаботиться о свойстве name и не забыть вызвать `super`.
|
||||
- Мы можем использовать `instanceof` для проверки типа ошибок. Это также работает с наследованием. Но иногда у нас объект ошибки, возникшей в сторонней библиотеке, и нет простого способа получить класс. Тогда для проверки типа ошибки можно использовать свойство `name`.
|
||||
- Обёртывание исключений является распространённой техникой: функция ловит низкоуровневые исключения и создаёт одно «высокоуровневое» исключение вместо разных низкоуровневых. Иногда низкоуровневые исключения становятся свойствами этого объекта, как `err.cause` в примерах выше, но это не обязательно.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/custom-errors](https://learn.javascript.ru/custom-errors)**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Введение: колбэки
|
||||
Источник *Deepseek*
|
||||
|
||||
Асинхронное программирование с использованием callback-функций в JavaScript — это один из традиционных подходов для работы с асинхронными операциями, такими как чтение файлов, запросы к серверу или таймеры. Callback-функция передается в качестве аргумента в асинхронную функцию и вызывается после завершения этой операции.
|
||||
|
||||
@@ -43,4 +42,6 @@ console.log("Ожидание данных...");
|
||||
```
|
||||
Особенности:
|
||||
- Callback-функции могут привести к так называемому "callback hell" (ад колбэков), когда много асинхронных операций вложены друг в друга, что делает код сложным для чтения и поддержки.
|
||||
- В современных JavaScript-проектах вместо callback-функций часто используют Promises или async/await для более удобной работы с асинхронным кодом.
|
||||
- В современных JavaScript-проектах вместо callback-функций часто используют Promises или async/await для более удобной работы с асинхронным кодом.
|
||||
|
||||
🚀 **Источник Deepseek**
|
||||
@@ -3,8 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Promises
|
||||
Источник *Deepseek*
|
||||
|
||||
Использование Promises (обещаний) в JavaScript — это более современный и удобный способ работы с асинхронными операциями по сравнению с callback-функциями. Promises позволяют избежать "callback hell" и делают код более читаемым и структурированным.
|
||||
|
||||
Вот пример асинхронного программирования с использованием Promises:
|
||||
@@ -83,3 +81,5 @@ fetchData()
|
||||
|
||||
💥 **Thenable**
|
||||
> Если быть более точными, обработчик может возвращать не именно промис, а любой объект, содержащий метод .then, такие объекты называют «thenable», и этот объект будет обработан как промис.
|
||||
|
||||
🚀 **Источник Deepseek**
|
||||
@@ -3,8 +3,6 @@ sidebar_position: 3
|
||||
---
|
||||
|
||||
# Обработка ошибок
|
||||
Источник: [https://learn.javascript.ru/promise-error-handling](https://learn.javascript.ru/promise-error-handling)
|
||||
|
||||
- `.catch` перехватывает все виды ошибок в промисах: будь то вызов `reject()` или ошибка, брошенная в обработчике при помощи `throw`.
|
||||
- `.then` также перехватывает ошибки таким же образом, если задан второй аргумент (который является обработчиком ошибок).
|
||||
- Необходимо размещать `.catch` там, где мы хотим обработать ошибки и знаем, как это сделать. Обработчик может проанализировать ошибку (могут быть полезны пользовательские классы ошибок) и пробросить её, если ничего не знает о ней (возможно, это программная ошибка).
|
||||
@@ -50,3 +48,4 @@ new Promise(function() {
|
||||
|
||||
Обычно такие ошибки неустранимы, поэтому лучше всего – информировать пользователя о проблеме и, возможно, отправить информацию об ошибке на сервер.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/promise-error-handling](https://learn.javascript.ru/promise-error-handling)**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 4
|
||||
---
|
||||
|
||||
# Promise API
|
||||
Источник:
|
||||
В классе Promise есть 6 статических методов.
|
||||
|
||||
- **Promise.all(promises)** – ожидает выполнения всех промисов и возвращает массив с результатами. Если любой из указанных промисов вернёт ошибку, то результатом работы Promise.all будет эта ошибка, результаты остальных промисов будут игнорироваться.
|
||||
@@ -15,4 +14,6 @@ sidebar_position: 4
|
||||
- **Promise.resolve(value)** – возвращает успешно выполнившийся промис с результатом value.
|
||||
- **Promise.reject(error)** – возвращает промис с ошибкой error.
|
||||
|
||||
Из всех перечисленных методов, самый часто используемый – **Promise.all**.
|
||||
Из всех перечисленных методов, самый часто используемый – **Promise.all**.
|
||||
|
||||
🚀 **Источник Deepseek**
|
||||
@@ -3,8 +3,6 @@ sidebar_position: 5
|
||||
---
|
||||
|
||||
# Промисификация
|
||||
Источник: [https://learn.javascript.ru/promisify](https://learn.javascript.ru/promisify)
|
||||
|
||||
Промисификация – это длинное слово для простого преобразования. Мы берём функцию, которая принимает колбэк и меняем её, чтобы она вместо этого возвращала промис.
|
||||
|
||||
Такие преобразования часто необходимы в реальной жизни, так как многие функции и библиотеки основаны на колбэках, а использование промисов более удобно, поэтому есть смысл «промисифицировать» их.
|
||||
@@ -38,4 +36,6 @@ function promisify(f, manyArgs = false) {
|
||||
// использование:
|
||||
f = promisify(f, true);
|
||||
f(...).then(arrayOfResults => ..., err => ...)
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/promisify](https://learn.javascript.ru/promisify)**
|
||||
@@ -16,4 +16,6 @@ sidebar_position: 6
|
||||
|
||||
Вместе они предоставляют отличный каркас для написания асинхронного кода. Такой код легко и писать, и читать.
|
||||
|
||||
Хотя при работе с `async/await` можно обходиться без `promise.then/catch`, иногда всё-таки приходится использовать эти методы (на верхнем уровне вложенности, например). Также `await` отлично работает в сочетании с `Promise.all`, если необходимо выполнить несколько задач параллельно.
|
||||
Хотя при работе с `async/await` можно обходиться без `promise.then/catch`, иногда всё-таки приходится использовать эти методы (на верхнем уровне вложенности, например). Также `await` отлично работает в сочетании с `Promise.all`, если необходимо выполнить несколько задач параллельно.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/async-await](https://learn.javascript.ru/async-await)**
|
||||
@@ -3,9 +3,6 @@ sidebar_position: 7
|
||||
---
|
||||
|
||||
# Event loop
|
||||
Источник: DeepSeek \
|
||||
Видеоразбор: [JavaScript - Event Loop | Асинхронность, Web API, Очереди (макро/микро)задач, Отрисовка кадров](https://www.youtube.com/watch?v=YTLXrji4DJc)
|
||||
|
||||
Event Loop (цикл событий) — это механизм, который позволяет JavaScript выполнять асинхронные операции, несмотря на то, что сам язык является однопоточным. Он отвечает за обработку событий, вызовов колбэков и выполнение задач в правильном порядке.
|
||||
|
||||
## Основные компоненты Event Loop
|
||||
@@ -65,4 +62,7 @@ Timeout
|
||||
3. Промис сразу резолвится, и его колбэк попадает в Microtask Queue.
|
||||
4. После завершения синхронного кода Event Loop сначала выполняет микрозадачи (колбэк промиса), а затем переходит к Callback Queue (колбэк `setTimeout`).
|
||||
|
||||
Event Loop позволяет JavaScript эффективно обрабатывать асинхронные операции, несмотря на однопоточность. Он управляет порядком выполнения задач, используя Call Stack, Web APIs, Callback Queue и Microtask Queue. Понимание этого механизма важно для написания эффективного и предсказуемого асинхронного кода.
|
||||
Event Loop позволяет JavaScript эффективно обрабатывать асинхронные операции, несмотря на однопоточность. Он управляет порядком выполнения задач, используя Call Stack, Web APIs, Callback Queue и Microtask Queue. Понимание этого механизма важно для написания эффективного и предсказуемого асинхронного кода.
|
||||
|
||||
🚀 **Источник: DeepSeek** \
|
||||
🚀 Видеоразбор: [JavaScript - Event Loop | Асинхронность, Web API, Очереди (макро/микро)задач, Отрисовка кадров](https://www.youtube.com/watch?v=YTLXrji4DJc)
|
||||
|
||||
@@ -60,3 +60,5 @@ for(let value of generator) {
|
||||
`yield` – дорога в обе стороны: он не только возвращает результат наружу, но и может передавать значение извне в генератор.
|
||||
|
||||
Чтобы это сделать, нам нужно вызвать `generator.next(arg)` с аргументом. Этот аргумент становится результатом `yield`.
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/generators](https://learn.javascript.ru/generators)**
|
||||
@@ -3,9 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Асинхронные итераторы и генераторы
|
||||
|
||||
Источник: [https://learn.javascript.ru/async-iterators-generators](https://learn.javascript.ru/async-iterators-generators)
|
||||
|
||||
Обычные итераторы и генераторы прекрасно работают с данными, которые не требуют времени для их создания или получения.
|
||||
|
||||
Когда мы ожидаем, что данные будут поступать асинхронно, с задержками, можно использовать их асинхронные аналоги и
|
||||
@@ -32,3 +29,5 @@ sidebar_position: 2
|
||||
например, браузерах, есть и другое API, называемое Streams (потоки), который предоставляет специальные интерфейсы для
|
||||
работы с такими потоками данных, их преобразования и передачи из одного потока в другой (например, загрузка из одного
|
||||
источника и сразу отправка в другое место).
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/async-iterators-generators](https://learn.javascript.ru/async-iterators-generators)**
|
||||
@@ -36,4 +36,5 @@ sidebar_position: 1
|
||||
- Если один и тот же модуль используется в нескольких местах, то его код выполнится только один раз, после чего экспортируемая функциональность передаётся всем импортёрам.
|
||||
- Объект import.meta содержит информацию о текущем модуле. Содержимое зависит от окружения.
|
||||
- В модуле на верхнем уровне this не определён (undefined).
|
||||
-
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/modules-intro](https://learn.javascript.ru/modules-intro)**
|
||||
@@ -3,8 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Экспорт и импорт
|
||||
Источник: [https://learn.javascript.ru/import-export](https://learn.javascript.ru/import-export)
|
||||
|
||||
Вот все варианты export, которые мы разобрали в этой и предыдущей главах.
|
||||
|
||||
Вы можете проверить себя, читая их и вспоминая, что они означают:
|
||||
@@ -32,3 +30,5 @@ sidebar_position: 2
|
||||
Мы можем поставить import/export в начало или в конец скрипта, это не имеет значения.
|
||||
|
||||
💥 **Обратите внимание, что инструкции import/export не работают внутри `{...}`.**
|
||||
|
||||
🚀 **Источник: [https://learn.javascript.ru/import-export](https://learn.javascript.ru/import-export)**
|
||||
Reference in New Issue
Block a user