{"draftJsState":{"blocks":[{"data":{"image":{"id":"69dada4e2f2ba9272ca73f9f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"картинка взяты с ya.ru","type":"atomic:image","key":"6uot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё есть объект (почти): Путеводитель по вселенной JavaScript-объектов","type":"header-two","key":"939sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы думаете, что знаете объекты? { key: value } - что тут сложного? Но JavaScript-объекты скрывают тайны, о которых вы не догадывались. Они могут создаваться без прототипа, иметь вычисляемые ключи, скрытые свойства и даже перехватывать любое обращение к себе.","type":"unstyled","key":"7u9vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты в JavaScript - это не просто \"словари\" из других языков. Это динамические, гибкие, живые структуры, которые могут меняться прямо во время выполнения. И если массивы - это просто разновидность объектов, а функции - это объекты с возможностью вызова, то понимание объектов открывает дверь к пониманию всего языка.","type":"unstyled","key":"dk855"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Что такое объект? Переосмысление","type":"header-two","key":"eveg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript объект - это коллекция свойств. Свойство - это связь между ключом (строкой или символом) и значением (любым типом).","type":"unstyled","key":"9m9q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ck10d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":36,"style":"ITALIC"},{"length":26,"offset":85,"style":"ITALIC"},{"length":36,"offset":133,"style":"ITALIC"},{"length":21,"offset":174,"style":"ITALIC"},{"length":9,"offset":220,"style":"ITALIC"},{"length":52,"offset":231,"style":"ITALIC"},{"length":7,"offset":314,"style":"ITALIC"},{"length":5,"offset":348,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\", // свойство с ключом \"name\"\n age: 25, // свойство с ключом \"age\"\n \"has cat\": true // ключ с пробелом (требует кавычек)\n};\n\n// Доступ через точку\nconsole.log(user.name); // \"Анна\"\n\n// Доступ через квадратные скобки (для любых ключей)\nconsole.log(user[\"has cat\"]); // true\nconsole.log(user[\"age\"]); // 25","type":"unstyled","key":"de6m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно: Ключи объектов - всегда строки (или символы). Даже если вы используете число, оно превратится в строку.","type":"unstyled","key":"fr0tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fh7j7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":51,"style":"ITALIC"},{"length":17,"offset":97,"style":"ITALIC"}],"text":"const obj = {};\nobj[1] = \"один\";\nobj[\"1\"] = \"два\"; // перезапишет предыдущее!\n\nconsole.log(obj); // { \"1\": \"два\" }","type":"unstyled","key":"249ok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Создание объектов: 5 способов (и когда какой использовать)","type":"header-two","key":"4sjsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Литерал объекта {} - самый простой и быстрый","type":"header-three","key":"15igm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bdth1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":44,"style":"ITALIC"}],"text":"const obj = {\n key: \"value\",\n method() { // сокращённая запись метода\n return this.key;\n }\n};","type":"unstyled","key":"8ok0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 Конструктор new Object() - почти не используется","type":"header-three","key":"ebir9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"53b2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const obj = new Object();\nobj.name = \"Анна\";","type":"unstyled","key":"f0106"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.3 Object.create() - для тонкого управления прототипом","type":"header-three","key":"947lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5useo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":128,"style":"ITALIC"}],"text":"const proto = { greet() { return \"Привет\"; } };\nconst obj = Object.create(proto);\nobj.name = \"Анна\";\n\nconsole.log(obj.greet()); // \"Привет\" (метод из прототипа)","type":"unstyled","key":"6safv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.4 Классы (синтаксический сахар над прототипами)","type":"header-three","key":"6o1kc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cbh0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class User {\n constructor(name) {\n this.name = name;\n }\n greet() {\n return `Привет, ${this.name}`;\n }\n}\nconst obj = new User(\"Анна\");","type":"unstyled","key":"n753"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.5 Object.fromEntries() - из массива пар","type":"header-three","key":"5n5vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9mck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":90,"style":"ITALIC"}],"text":"const entries = [[\"name\", \"Анна\"], [\"age\", 25]];\nconst obj = Object.fromEntries(entries); // { name: \"Анна\", age: 25 }","type":"unstyled","key":"8vjpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Вычисляемые свойства (динамические ключи)","type":"header-two","key":"cqm7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна из самых мощных фич - ключи, которые вычисляются во время выполнения.","type":"unstyled","key":"b64q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2op64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":89,"style":"ITALIC"},{"length":20,"offset":142,"style":"ITALIC"},{"length":11,"offset":225,"style":"ITALIC"},{"length":11,"offset":267,"style":"ITALIC"}],"text":"const dynamicKey = \"status\";\nconst obj = {\n name: \"Анна\",\n [dynamicKey]: \"active\", // ключ будет \"status\"\n [`get${dynamicKey}`]() { // метод \"getstatus\"\n return this[dynamicKey];\n }\n};\n\nconsole.log(obj.status); // \"active\"\nconsole.log(obj.getstatus()); // \"active\"","type":"unstyled","key":"e3248"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Дескрипторы свойств: Невидимая власть","type":"header-two","key":"9eues"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У каждого свойства объекта есть три флага:","type":"unstyled","key":"99ev3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"writable - можно ли изменить значение","type":"unordered-list-item","key":"aqj4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"enumerable - показывается ли в циклах (for...in, Object.keys)","type":"unordered-list-item","key":"fj1cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"configurable - можно ли удалить свойство или изменить дескрипторы","type":"unordered-list-item","key":"3vn7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6l6dr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":32,"style":"ITALIC"},{"length":74,"offset":146,"style":"ITALIC"},{"length":22,"offset":222,"style":"ITALIC"},{"length":38,"offset":303,"style":"ITALIC"},{"length":27,"offset":362,"style":"ITALIC"},{"length":58,"offset":416,"style":"ITALIC"},{"length":26,"offset":499,"style":"ITALIC"}],"text":"const user = { name: \"Анна\" };\n\n// Получить дескриптор\nconst descriptor = Object.getOwnPropertyDescriptor(user, \"name\");\nconsole.log(descriptor);\n// { value: \"Анна\", writable: true, enumerable: true, configurable: true }\n\n// Изменить дескриптор\nObject.defineProperty(user, \"name\", {\n writable: false, // теперь свойство \"только для чтения\"\n enumerable: false // не показывается в циклах\n});\n\nuser.name = \"Борис\"; // Ошибка в строгом режиме (тихо игнорируется в нестрогом)\nconsole.log(user.name); // \"Анна\" (не изменилось!)","type":"unstyled","key":"37qh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Создание скрытых свойств (enumerable: false)","type":"header-three","key":"b3iev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dk1do"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":106,"style":"ITALIC"},{"length":14,"offset":173,"style":"ITALIC"},{"length":27,"offset":213,"style":"ITALIC"}],"text":"const obj = { visible: 1 };\nObject.defineProperty(obj, \"secret\", {\n value: \"тайна\",\n enumerable: false // не появится в Object.keys()\n});\n\nconsole.log(Object.keys(obj)); // [\"visible\"]\nconsole.log(obj.secret); // \"тайна\" (но доступ есть)","type":"unstyled","key":"blf97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 Заморозка объектов","type":"header-three","key":"628n2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"33nsh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":51,"style":"ITALIC"},{"length":42,"offset":109,"style":"ITALIC"},{"length":15,"offset":172,"style":"ITALIC"},{"length":9,"offset":211,"style":"ITALIC"},{"length":11,"offset":222,"style":"ITALIC"},{"length":7,"offset":269,"style":"ITALIC"}],"text":"const obj = { name: \"Анна\" };\nObject.freeze(obj); // делает все свойства неизменяемыми\n\nobj.name = \"Борис\"; // игнорируется (или ошибка в strict mode)\ndelete obj.name; // игнорируется\nconsole.log(obj.name); // \"Анна\"\n\n// Проверка\nconsole.log(Object.isFrozen(obj)); // true","type":"unstyled","key":"543fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.3 Запечатывание (seal) - нельзя добавлять/удалять, но можно изменять","type":"header-three","key":"arghn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"irj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":79,"style":"ITALIC"},{"length":15,"offset":112,"style":"ITALIC"},{"length":15,"offset":149,"style":"ITALIC"},{"length":28,"offset":184,"style":"ITALIC"}],"text":"const obj = { name: \"Анна\", age: 25 };\nObject.seal(obj);\n\nobj.age = 26; // работает\nobj.city = \"Москва\"; // игнорируется\ndelete obj.name; // игнорируется\n\nconsole.log(obj); // { name: \"Анна\", age: 26 }","type":"unstyled","key":"2nudv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Геттеры и сеттеры: Вычисления при доступе","type":"header-two","key":"1bl1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете перехватить чтение и запись свойства:","type":"unstyled","key":"hi0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fjt9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":295,"style":"ITALIC"},{"length":20,"offset":365,"style":"ITALIC"},{"length":10,"offset":415,"style":"ITALIC"}],"text":"const user = {\n firstName: \"Анна\",\n lastName: \"Иванова\",\n \n get fullName() {\n return `${this.firstName} ${this.lastName}`;\n },\n \n set fullName(value) {\n const parts = value.split(\" \");\n this.firstName = parts[0];\n this.lastName = parts[1];\n }\n};\n\nconsole.log(user.fullName); // \"Анна Иванова\" (вызывается геттер)\nuser.fullName = \"Борис Петров\"; // вызывается сеттер\nconsole.log(user.firstName); // \"Борис\"","type":"unstyled","key":"562lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Валидация через сеттер","type":"header-three","key":"bpquc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4outv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":270,"style":"ITALIC"},{"length":10,"offset":292,"style":"ITALIC"}],"text":"const user = {\n _age: 0,\n \n get age() {\n return this._age;\n },\n \n set age(value) {\n if (value < 0) throw new Error(\"Возраст не может быть отрицательным\");\n if (value > 150) throw new Error(\"Слишком старый\");\n this._age = value;\n }\n};\n\nuser.age = 25; // OK\nuser.age = -5; // Ошибка!","type":"unstyled","key":"827es"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Прототипы: Тайное наследование","type":"header-two","key":"68rqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У каждого объекта есть скрытая ссылка [[Prototype]] (доступна через __proto__ или Object.getPrototypeOf). Когда вы читаете свойство, JS сначала ищет его в самом объекте, потом в прототипе, потом в прототипе прототипа...","type":"unstyled","key":"2tn2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"284jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":147,"style":"ITALIC"},{"length":28,"offset":186,"style":"ITALIC"},{"length":26,"offset":243,"style":"ITALIC"},{"length":54,"offset":271,"style":"ITALIC"},{"length":7,"offset":369,"style":"ITALIC"},{"length":8,"offset":420,"style":"ITALIC"}],"text":"const parent = { name: \"Родитель\", greet() { return \"Привет\"; } };\nconst child = Object.create(parent);\nchild.age = 10;\n\nconsole.log(child.age); // 10 (своё)\nconsole.log(child.name); // \"Родитель\" (из прототипа)\nconsole.log(child.greet()); // \"Привет\" (из прототипа)\n\n// Проверка наличия свойства (своего, не из прототипа)\nconsole.log(child.hasOwnProperty(\"age\")); // true\nconsole.log(child.hasOwnProperty(\"name\")); // false","type":"unstyled","key":"d5fcr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Цепочка прототипов","type":"header-three","key":"fqlaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"flv4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":168,"style":"ITALIC"},{"length":16,"offset":214,"style":"ITALIC"},{"length":17,"offset":257,"style":"ITALIC"},{"length":14,"offset":276,"style":"ITALIC"},{"length":7,"offset":343,"style":"ITALIC"},{"length":7,"offset":403,"style":"ITALIC"},{"length":7,"offset":476,"style":"ITALIC"},{"length":7,"offset":538,"style":"ITALIC"}],"text":"const animal = { eats: true };\nconst dog = Object.create(animal);\ndog.barks = true;\nconst husky = Object.create(dog);\nhusky.color = \"white\";\n\nconsole.log(husky.eats); // true (из animal)\nconsole.log(husky.barks); // true (из dog)\nconsole.log(husky.color); // \"white\" (своё)\n\n// Вся цепочка\nconsole.log(Object.getPrototypeOf(husky) === dog); // true\nconsole.log(Object.getPrototypeOf(dog) === animal); // true\nconsole.log(Object.getPrototypeOf(animal) === Object.prototype); // true\nconsole.log(Object.getPrototypeOf(Object.prototype)); // null","type":"unstyled","key":"hcqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Создание объекта без прототипа","type":"header-three","key":"c31fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"p3e5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":104,"style":"ITALIC"},{"length":12,"offset":171,"style":"ITALIC"},{"length":64,"offset":185,"style":"ITALIC"},{"length":39,"offset":348,"style":"ITALIC"}],"text":"const cleanObject = Object.create(null);\ncleanObject.name = \"Анна\";\n\nconsole.log(cleanObject.toString); // undefined (нет метода)\nconsole.log(cleanObject.hasOwnProperty); // undefined\n\n// Идеально для словарей (чистых карт), где ключи - любые строки\nconst dictionary = Object.create(null);\ndictionary[\"toString\"] = \"метод преобразования в строку\";\n// Нет конфликта с встроенным toString!","type":"unstyled","key":"8mdr0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Итерация по объекту: Методы и подводные камни","type":"header-two","key":"blnoe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 for...in — перебирает СВОИ + НАСЛЕДОВАННЫЕ перечисляемые свойства","type":"header-three","key":"fb0ct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"31gqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":154,"style":"ITALIC"},{"length":24,"offset":185,"style":"ITALIC"},{"length":15,"offset":292,"style":"ITALIC"}],"text":"const parent = { inherited: \"from parent\" };\nconst child = Object.create(parent);\nchild.own = \"from child\";\n\nfor (let key in child) {\n console.log(key); // \"own\", потом \"inherited\"\n}\n\n// Фильтруем только свои\nfor (let key in child) {\n if (child.hasOwnProperty(key)) {\n console.log(key); // только \"own\"\n }\n}","type":"unstyled","key":"2matt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Object.keys() - только СВОИ перечисляемые (идеально)","type":"header-three","key":"4t0sq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1lot2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":33,"style":"ITALIC"}],"text":"const keys = Object.keys(child); // [\"own\"]","type":"unstyled","key":"8h9pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Object.values() - значения своих свойств","type":"header-three","key":"em2do"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dia99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":37,"style":"ITALIC"}],"text":"const values = Object.values(child); // [\"from child\"]","type":"unstyled","key":"7borm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.4 Object.entries() - пары [ключ, значение]","type":"header-three","key":"aa756"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5q0kf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":39,"style":"ITALIC"}],"text":"const entries = Object.entries(child); // [[\"own\", \"from child\"]]","type":"unstyled","key":"ac58o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Копирование объектов: Глубокая и поверхностная","type":"header-two","key":"fufni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 Поверхностное копирование (shallow copy)","type":"header-three","key":"6mqqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bjr6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":41,"style":"ITALIC"},{"length":26,"offset":93,"style":"ITALIC"},{"length":25,"offset":164,"style":"ITALIC"},{"length":51,"offset":227,"style":"ITALIC"},{"length":18,"offset":321,"style":"ITALIC"}],"text":"const original = { a: 1, b: { c: 2 } };\n\n// Способ 1: spread\nconst copy1 = { ...original };\n\n// Способ 2: Object.assign\nconst copy2 = Object.assign({}, original);\n\n// Способ 3: для массивов\nconst arrCopy = [...originalArray];\n\n// Проблема: вложенные объекты копируются по ссылке\ncopy1.b.c = 3;\nconsole.log(original.b.c); // 3 (изменилось!)","type":"unstyled","key":"chgn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 Глубокое копирование (deep copy)","type":"header-three","key":"2ugfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1djf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":83,"offset":55,"style":"ITALIC"},{"length":57,"offset":192,"style":"ITALIC"},{"length":50,"offset":292,"style":"ITALIC"}],"text":"const original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\n\n// Способ 1: JSON (не работает с функциями, Date, undefined, циклическими ссылками)\nconst copy1 = JSON.parse(JSON.stringify(original));\n\n// Способ 2: structuredClone (современный браузерный API)\nconst copy2 = structuredClone(original);\n\n// Способ 3: ручная рекурсия (для сложных случаев)\nfunction deepCopy(obj, hash = new WeakMap()) {\n if (obj === null || typeof obj !== \"object\") return obj;\n if (hash.has(obj)) return hash.get(obj);\n \n const copy = Array.isArray(obj) ? [] : {};\n hash.set(obj, copy);\n \n for (let key in obj) {\n if (obj.hasOwnProperty(key)) {\n copy[key] = deepCopy(obj[key], hash);\n }\n }\n return copy;\n}","type":"unstyled","key":"6lg88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Сравнение объектов: По ссылке, не по значению","type":"header-two","key":"a3imp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"a7vqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":94,"style":"ITALIC"},{"length":30,"offset":148,"style":"ITALIC"},{"length":31,"offset":180,"style":"ITALIC"},{"length":7,"offset":502,"style":"ITALIC"}],"text":"const obj1 = { a: 1 };\nconst obj2 = { a: 1 };\nconst obj3 = obj1;\n\nconsole.log(obj1 === obj2); // false (разные объекты)\nconsole.log(obj1 === obj3); // true (один и тот же объект)\n\n// Как сравнить по содержимому?\nfunction shallowEqual(objA, objB) {\n if (objA === objB) return true;\n const keysA = Object.keys(objA);\n const keysB = Object.keys(objB);\n if (keysA.length !== keysB.length) return false;\n \n return keysA.every(key => objA[key] === objB[key]);\n}\n\nconsole.log(shallowEqual(obj1, obj2)); // true","type":"unstyled","key":"6d1gk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Object методы, которые нужно знать","type":"header-two","key":"1igpf"},{"data":{"image":{"id":"69dadb71fe5d7d5845a360a5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1tp93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bprqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Реальные паттерны с объектами","type":"header-two","key":"39g5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.1 Объект как словарь (Map без прототипа)","type":"header-three","key":"1728l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2qi0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":140,"style":"ITALIC"}],"text":"const cache = Object.create(null);\ncache[\"user:1\"] = { name: \"Анна\" };\ncache[\"toString\"] = \"это не метод\";\n\nconsole.log(cache[\"toString\"]); // \"это не метод\" (нет конфликта)","type":"unstyled","key":"3r3gs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.2 Конфигурация с валидацией через сеттеры","type":"header-three","key":"cffht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9lvq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":557,"style":"ITALIC"},{"length":55,"offset":563,"style":"ITALIC"}],"text":"const config = {\n _apiUrl: \"\",\n _timeout: 5000,\n \n get apiUrl() { return this._apiUrl; },\n set apiUrl(value) {\n if (!value.startsWith(\"https://\")) {\n throw new Error(\"API URL должен использовать HTTPS\");\n }\n this._apiUrl = value;\n },\n \n get timeout() { return this._timeout; },\n set timeout(value) {\n if (value < 100) throw new Error(\"Таймаут не может быть меньше 100ms\");\n if (value > 30000) throw new Error(\"Таймаут не может быть больше 30000ms\");\n this._timeout = value;\n }\n};\n\nconfig.apiUrl = \"https://api.example.com\"; // OK\n// config.apiUrl = \"http://api.example.com\"; // Ошибка!","type":"unstyled","key":"5dv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.3 Создание неизменяемого объекта (глубоко)","type":"header-three","key":"10bd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2c6jg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":393,"style":"ITALIC"}],"text":"function deepFreeze(obj) {\n Object.freeze(obj);\n for (let key in obj) {\n if (obj.hasOwnProperty(key) && typeof obj[key] === \"object\") {\n deepFreeze(obj[key]);\n }\n }\n return obj;\n}\n\nconst constants = deepFreeze({\n API: {\n URL: \"https://api.example.com\",\n VERSION: \"v2\"\n },\n STATUS: {\n ACTIVE: \"active\",\n INACTIVE: \"inactive\"\n }\n});\n\nconstants.API.URL = \"другое\"; // Игнорируется (ошибка в strict mode)","type":"unstyled","key":"5ta9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Подводные камни","type":"header-two","key":"a3073"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: hasOwnProperty может быть переопределён","type":"header-three","key":"aip98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"649l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":85,"style":"ITALIC"},{"length":10,"offset":100,"style":"ITALIC"},{"length":25,"offset":175,"style":"ITALIC"}],"text":"const obj = { hasOwnProperty: \"не метод\" };\nconsole.log(obj.hasOwnProperty(\"name\")); // TypeError!\n\n// Решение\nconsole.log(Object.prototype.hasOwnProperty.call(obj, \"name\"));\n// Или современный способ\nconsole.log(Object.hasOwn(obj, \"name\"));","type":"unstyled","key":"clj94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: Потеря this в методах","type":"header-three","key":"b0rhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fpqql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":128,"style":"ITALIC"},{"length":16,"offset":168,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() { return `Привет, ${this.name}`; }\n};\n\nconst greet = user.greet;\nconsole.log(greet()); // \"Привет, undefined\" (this = window)\n\n// Решение: bind\nconst boundGreet = user.greet.bind(user);","type":"unstyled","key":"crh73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: Object.keys не гарантирует порядок","type":"header-three","key":"48k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6e9np"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":80,"style":"ITALIC"},{"length":55,"offset":129,"style":"ITALIC"}],"text":"const obj = { 100: \"сто\", 2: \"два\", 1: \"один\" };\nconsole.log(Object.keys(obj)); // [\"1\", \"2\", \"100\"] (сначала числа по порядку)\n\n// Для гарантии порядка используйте Map или массивы пар","type":"unstyled","key":"2r058"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест объектов","type":"header-two","key":"egokp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Объекты - по ссылке - копирование создаёт новый объект, присваивание - ссылку.","type":"ordered-list-item","key":"5glgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Ключи - строки или символы - числа превращаются в строки.","type":"ordered-list-item","key":"f8kd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Дескрипторы - контролируйте доступ через defineProperty.","type":"ordered-list-item","key":"88dou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Прототипы - понимайте цепочку, используйте Object.create для чистых словарей.","type":"ordered-list-item","key":"3ufas"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Итерация - Object.keys для своих свойств, for...in + hasOwnProperty для своих+наследуемых.","type":"ordered-list-item","key":"9d1qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Копирование - structuredClone для глубокого, {...obj} для поверхностного.","type":"ordered-list-item","key":"1727b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Геттеры/сеттеры - для вычисляемых свойств и валидации.","type":"ordered-list-item","key":"47nrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Финальный тест (проверьте себя):","type":"unstyled","key":"40oom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4q7ri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const a = { value: 1 };\nconst b = a;\nb.value = 2;\nconsole.log(a.value);\n\nconst c = { value: 1 };\nconst d = { ...c };\nd.value = 2;\nconsole.log(c.value);\n\nconst e = { x: { y: 1 } };\nconst f = { ...e };\nf.x.y = 2;\nconsole.log(e.x.y);","type":"unstyled","key":"2j8bo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Ответы: 2 (ссылка), 1 (поверхностная копия), 2 (вложенный объект скопирован по ссылке).","type":"unstyled","key":"c4gnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты - это фундамент JavaScript. Освойте их - и вы поймёте язык на 80%. Остальные 20% - это замыкания, прототипы и асинхронность. Но теперь вы знаете об объектах достаточно, чтобы называть себя экспертом.","type":"unstyled","key":"f5j60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"------------------------------------------------------------------------------------","type":"unstyled","key":"ao8c5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"------------------------------------------------------------------------------------","type":"unstyled","key":"6314s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отражения и оригиналы: Правда о копировании объектов и ссылках в JavaScript","type":"header-two","key":"648s2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь пытались скопировать объект, изменить копию и обнаруживали, что изменился оригинал? Или часами искали баг, который оказывался \"магическим\" изменением массива в другом конце кода?","type":"unstyled","key":"5oi09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаловать в мир ссылок и копирования — место, где новички теряют часы, а профи знают шесть способов создания настоящей копии. Сегодня мы разберем, почему объекты ведут себя не как числа или строки, и как обуздать эту \"ссылко-магию\".","type":"unstyled","key":"mtdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Примитивы против объектов: Битва типов","type":"header-two","key":"ejch1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript есть два лагеря: примитивы и объекты. Их поведение при присваивании отличается кардинально.","type":"unstyled","key":"7sh6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примитивы копируются по значению","type":"header-three","key":"6aoab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9g0f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":28,"style":"ITALIC"},{"length":22,"offset":85,"style":"ITALIC"},{"length":6,"offset":124,"style":"ITALIC"}],"text":"let a = 42;\nlet b = a; // b получил КОПИЮ значения 42\nb = 100;\n\nconsole.log(a); // 42 (не изменилось!)\nconsole.log(b); // 100","type":"unstyled","key":"5o3rj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Числа, строки, булевы значения, null, undefined, symbol, bigint ведут себя предсказуемо. Каждая переменная хранит свое собственное значение.","type":"unstyled","key":"f9ruq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты копируются по ссылке","type":"header-three","key":"f79cg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8qdtd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":56,"style":"ITALIC"},{"length":32,"offset":145,"style":"ITALIC"},{"length":10,"offset":203,"style":"ITALIC"}],"text":"const user1 = { name: \"Анна\" };\nconst user2 = user1; // user2 получил ССЫЛКУ на тот же объект\nuser2.name = \"Борис\";\n\nconsole.log(user1.name); // \"Борис\" (оригинал изменился!)\nconsole.log(user2.name); // \"Борис\"","type":"unstyled","key":"q9mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Что произошло? Переменная user1 не хранит сам объект. Она хранит адрес в памяти, где этот объект лежит. При присваивании user2 = user1 мы копируем этот адрес. Теперь две переменные указывают на одну и ту же коробку в памяти.","type":"unstyled","key":"83d1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Почему так сделано? (Спойлер: производительность)","type":"header-two","key":"47eo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что объект - это огромный чемодан с вещами. Если бы JavaScript копировал его по значению каждый раз, код работал бы ужасно медленно.","type":"unstyled","key":"81vr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7gks3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":23,"style":"ITALIC"},{"length":58,"offset":71,"style":"ITALIC"}],"text":"const hugeObject = {\n // миллион свойств\n};\n\nconst copy = hugeObject; // Если бы копировалось по значению, это заняло бы секунды","type":"unstyled","key":"91g9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Правда: Ссылки делают JavaScript быстрым и эффективным. Но иногда нам действительно нужна копия. И тогда начинается магия.","type":"unstyled","key":"9ep1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Ссылки на ссылки: Цепная реакция","type":"header-two","key":"2ep1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ссылки работают на любую глубину:","type":"unstyled","key":"lvfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2uo4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":107,"style":"ITALIC"}],"text":"const obj1 = { data: 1 };\nconst obj2 = obj1;\nconst obj3 = obj2;\n\nobj3.data = 999;\n\nconsole.log(obj1.data); // 999 (изменилось всё!)","type":"unstyled","key":"6o3b4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все три переменные смотрят на один объект. Изменение через любую из них видно через все.","type":"unstyled","key":"9ohb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Поверхностное копирование (Shallow Copy)","type":"header-two","key":"6dghh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поверхностная копия создает новый объект, но вложенные объекты остаются общими.","type":"unstyled","key":"8uspf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 1: Spread оператор {...}","type":"header-three","key":"4tvvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"62f4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":147,"style":"ITALIC"},{"length":26,"offset":191,"style":"ITALIC"},{"length":25,"offset":252,"style":"ITALIC"},{"length":22,"offset":314,"style":"ITALIC"}],"text":"const original = {\n name: \"Анна\",\n address: { city: \"Москва\", street: \"Тверская\" }\n};\n\nconst copy = { ...original };\ncopy.name = \"Борис\"; // меняем копию\ncopy.address.city = \"СПб\"; // меняем вложенный объект\n\nconsole.log(original.name); // \"Анна\" (не изменилось)\nconsole.log(original.address.city); // \"СПб\" (изменилось!)","type":"unstyled","key":"6k5ju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Проблема: address - это объект. Spread скопировал только ссылку на него.","type":"unstyled","key":"3vucm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 2: Object.assign()","type":"header-three","key":"d3la3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1tn13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":42,"style":"ITALIC"}],"text":"const copy = Object.assign({}, original);\n// Работает так же, как spread","type":"unstyled","key":"4gq6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 3: Для массивов - spread [...]","type":"header-three","key":"1pgbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ei3p1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":104,"style":"ITALIC"},{"length":26,"offset":151,"style":"ITALIC"},{"length":20,"offset":211,"style":"ITALIC"},{"length":20,"offset":266,"style":"ITALIC"}],"text":"const originalArr = [1, 2, { deep: 3 }];\nconst copyArr = [...originalArr];\n\ncopyArr[0] = 999; // меняем примитив\ncopyArr[2].deep = 777; // меняем вложенный объект\n\nconsole.log(originalArr[0]); // 1 (не изменилось)\nconsole.log(originalArr[2].deep); // 777 (изменилось!)","type":"unstyled","key":"eansc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Глубокое копирование (Deep Copy)","type":"header-two","key":"ddnkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь создается полностью независимая копия, включая все вложенные структуры.","type":"unstyled","key":"s48s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 1: JSON.parse(JSON.stringify()) - быстрый, но опасный","type":"header-three","key":"f1bgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e2oo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":274,"style":"ITALIC"},{"length":12,"offset":304,"style":"ITALIC"},{"length":21,"offset":346,"style":"ITALIC"},{"length":31,"offset":397,"style":"ITALIC"},{"length":34,"offset":458,"style":"ITALIC"},{"length":38,"offset":522,"style":"ITALIC"}],"text":"const original = {\n name: \"Анна\",\n address: { city: \"Москва\" },\n date: new Date(),\n func: () => console.log(\"hi\"),\n undef: undefined,\n inf: Infinity\n};\n\nconst copy = JSON.parse(JSON.stringify(original));\n\ncopy.address.city = \"СПб\";\nconsole.log(original.address.city); // \"Москва\" (не изменилось!)\n\n// ПРОБЛЕМЫ:\nconsole.log(copy.date); // строка, а не Date!\nconsole.log(copy.func); // undefined (функции потеряны)\nconsole.log(copy.undef); // undefined (но свойство пропало)\nconsole.log(copy.inf); // null (Infinity превращается в null)","type":"unstyled","key":"brudb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Что теряется: функции, undefined, Symbol, Infinity, NaN, Date, RegExp, циклические ссылки.","type":"unstyled","key":"73t7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 2: structuredClone() - современный герой","type":"header-three","key":"2rdub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e13sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":275,"style":"ITALIC"},{"length":29,"offset":288,"style":"ITALIC"},{"length":7,"offset":359,"style":"ITALIC"},{"length":7,"offset":410,"style":"ITALIC"},{"length":7,"offset":458,"style":"ITALIC"},{"length":7,"offset":506,"style":"ITALIC"}],"text":"const original = {\n name: \"Анна\",\n address: { city: \"Москва\" },\n date: new Date(),\n regex: /hello/g,\n map: new Map([[\"key\", \"value\"]]),\n set: new Set([1, 2, 3])\n};\n\nconst copy = structuredClone(original);\n\ncopy.address.city = \"СПб\";\nconsole.log(original.address.city); // \"Москва\"\n\n// structuredClone сохраняет:\nconsole.log(copy.date instanceof Date); // true\nconsole.log(copy.regex instanceof RegExp); // true\nconsole.log(copy.map instanceof Map); // true\nconsole.log(copy.set instanceof Set); // true","type":"unstyled","key":"fg5hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Что НЕ умеет: функции, DOM-узлы, некоторые встроенные объекты.","type":"unstyled","key":"76vte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 3: Ручная рекурсия (для сложных случаев)","type":"header-three","key":"bi03e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cu59u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":49,"style":"ITALIC"},{"length":31,"offset":133,"style":"ITALIC"},{"length":29,"offset":213,"style":"ITALIC"},{"length":42,"offset":316,"style":"ITALIC"},{"length":29,"offset":468,"style":"ITALIC"},{"length":24,"offset":626,"style":"ITALIC"}],"text":"function deepCopy(obj, hash = new WeakMap()) {\n // Примитивы и null\n if (obj === null || typeof obj !== \"object\") return obj;\n \n // Защита от циклических ссылок\n if (hash.has(obj)) return hash.get(obj);\n \n // Создаём копию нужного типа\n const copy = Array.isArray(obj) ? [] : {};\n hash.set(obj, copy);\n \n // Копируем все свойства (включая символы)\n Reflect.ownKeys(obj).forEach(key => {\n copy[key] = deepCopy(obj[key], hash);\n });\n \n return copy;\n}\n\n// Тест с циклической ссылкой\nconst circular = { name: \"Анна\" };\ncircular.self = circular;\n\nconst copy = deepCopy(circular);\nconsole.log(copy.self === copy); // true (цикл сохранён!)","type":"unstyled","key":"bug5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 4: Библиотеки (lodash)","type":"header-three","key":"7uqo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1rrvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":61,"style":"ITALIC"}],"text":"import _ from 'lodash';\n\nconst copy = _.cloneDeep(original);\n// Надёжно, медленно, но проверено годами","type":"unstyled","key":"cnj8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Сравнение методов копирования","type":"header-two","key":"d87d6"},{"data":{"image":{"id":"69db00c00599097d1bcd7d6b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"gm07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"758ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Копирование массивов","type":"header-two","key":"k9nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Массивы - это объекты, поэтому правила те же.","type":"unstyled","key":"dgeob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поверхностное копирование","type":"header-three","key":"c821s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4a2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":34,"style":"ITALIC"},{"length":18,"offset":84,"style":"ITALIC"},{"length":23,"offset":136,"style":"ITALIC"},{"length":19,"offset":197,"style":"ITALIC"},{"length":25,"offset":251,"style":"ITALIC"},{"length":20,"offset":325,"style":"ITALIC"}],"text":"const original = [1, 2, [3, 4]];\n\n// Способ 1: spread\nconst copy1 = [...original];\n\n// Способ 2: slice\nconst copy2 = original.slice();\n\n// Способ 3: Array.from\nconst copy3 = Array.from(original);\n\n// Способ 4: concat\nconst copy4 = original.concat();\n\n// Все они поверхностные!\ncopy1[2][0] = 999;\nconsole.log(original[2][0]); // 999 (изменилось!)","type":"unstyled","key":"2qha7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Глубокое копирование массива","type":"header-three","key":"4n84o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1gmng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":34,"style":"ITALIC"},{"length":20,"offset":140,"style":"ITALIC"}],"text":"const original = [1, 2, [3, 4]];\n\n// structuredClone\nconst deep = structuredClone(original);\ndeep[2][0] = 999;\nconsole.log(original[2][0]); // 3 (не изменилось)","type":"unstyled","key":"4vrdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Копирование объектов с методами","type":"header-two","key":"kujg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"12sg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":86,"style":"ITALIC"},{"length":29,"offset":165,"style":"ITALIC"},{"length":32,"offset":196,"style":"ITALIC"},{"length":30,"offset":275,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() {\n return `Привет, ${this.name}`;\n }\n};\n\n// spread копирует методы\nconst copy = { ...user };\nconsole.log(copy.greet()); // \"Привет, Анна\" (работает!)\n\n// А вот JSON.stringify потеряет\nconst bad = JSON.parse(JSON.stringify(user));\n// bad.greet is not a function","type":"unstyled","key":"b9c31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Реальные сценарии","type":"header-two","key":"6m50r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий 1: Состояние в React/Vue","type":"header-three","key":"98el0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2h73b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"},{"length":36,"offset":63,"style":"ITALIC"},{"length":23,"offset":101,"style":"ITALIC"}],"text":"// Плохо (мутация)\nstate.user.name = \"Борис\";\nsetState(state); // React может не заметить изменение\n\n// Хорошо (новая копия)\nsetState({\n ...state,\n user: {\n ...state.user,\n name: \"Борис\"\n }\n});","type":"unstyled","key":"da8mq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий 2: Форма с глубокими данными","type":"header-three","key":"2aih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"72i7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":116,"style":"ITALIC"},{"length":6,"offset":281,"style":"ITALIC"}],"text":"function Form({ initialData }) {\n const [formData, setFormData] = useState(\n () => structuredClone(initialData) // глубокая копия при монтировании\n );\n \n const handleChange = (field, value) => {\n setFormData(prev => ({\n ...prev,\n [field]: value\n }));\n };\n // ...\n}","type":"unstyled","key":"fh17f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сценарий 3: Кэширование с защитой от мутации","type":"header-three","key":"a95i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"29jru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":91,"style":"ITALIC"},{"length":57,"offset":225,"style":"ITALIC"}],"text":"class Cache {\n constructor() {\n this.store = new Map();\n }\n \n set(key, value) {\n // Сохраняем копию, чтобы внешние изменения не испортили кэш\n this.store.set(key, structuredClone(value));\n }\n \n get(key) {\n // Возвращаем копию, чтобы вызывающий код не испортил кэш\n const value = this.store.get(key);\n return value ? structuredClone(value) : undefined;\n }\n}","type":"unstyled","key":"5jg2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Сравнение объектов после копирования","type":"header-two","key":"d4h5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4f8lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":106,"style":"ITALIC"},{"length":23,"offset":160,"style":"ITALIC"},{"length":27,"offset":185,"style":"ITALIC"},{"length":30,"offset":462,"style":"ITALIC"}],"text":"const obj1 = { a: 1, b: 2 };\nconst obj2 = { a: 1, b: 2 };\nconst obj3 = obj1;\n\nconsole.log(obj1 === obj2); // false (разные объекты)\nconsole.log(obj1 === obj3); // true (один и тот же)\n\n// Как сравнить содержимое?\nfunction isEqual(objA, objB) {\n const keysA = Object.keys(objA);\n const keysB = Object.keys(objB);\n \n if (keysA.length !== keysB.length) return false;\n \n return keysA.every(key => objA[key] === objB[key]);\n}\n\nconsole.log(isEqual(obj1, obj2)); // true (содержимое одинаково)","type":"unstyled","key":"dnt9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Подводные камни","type":"header-two","key":"cn0s8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: Забыл про вложенность","type":"header-three","key":"4fkt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"vr8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":75,"style":"ITALIC"},{"length":18,"offset":189,"style":"ITALIC"}],"text":"const config = {\n server: {\n port: 3000,\n host: \"localhost\"\n }\n};\n\n// Думаем, что скопировали\nconst copy = { ...config };\ncopy.server.port = 8080;\n\nconsole.log(config.server.port); // 8080 (сюрприз!)","type":"unstyled","key":"2csna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: Object.assign мутирует первый аргумент","type":"header-three","key":"92tbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dhssc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":129,"style":"ITALIC"},{"length":17,"offset":175,"style":"ITALIC"},{"length":46,"offset":194,"style":"ITALIC"}],"text":"const target = { a: 1 };\nconst source = { b: 2 };\n\nconst result = Object.assign(target, source);\nconsole.log(target === result); // true (target изменён)\nconsole.log(target); // { a: 1, b: 2 }\n\n// Для создания копии используем пустой объект\nconst copy = Object.assign({}, source);","type":"unstyled","key":"1isf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: structuredClone не везде доступен","type":"header-three","key":"anpna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d06k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"},{"length":49,"offset":29,"style":"ITALIC"},{"length":31,"offset":80,"style":"ITALIC"}],"text":"// В Node.js < 17 нужен флаг\n// node --experimental-global-webcrypto script.js\n\n// Полифил для старых браузеров\nif (!window.structuredClone) {\n window.structuredClone = (obj) => {\n return JSON.parse(JSON.stringify(obj));\n };\n}","type":"unstyled","key":"5nag4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Чек-лист: Какую копию выбрать?","type":"header-two","key":"2hvut"},{"data":{"image":{"id":"69db010c000ff01be00f40a8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3mu47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e17dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест копирования","type":"header-two","key":"eq4le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Примитивы копируются по значению - безопасны.","type":"ordered-list-item","key":"cfn6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Объекты копируются по ссылке - мутация через любую ссылку меняет оригинал.","type":"ordered-list-item","key":"596ls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Поверхностное копирование - {...obj} - копирует только первый уровень.","type":"ordered-list-item","key":"cotuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Глубокое копирование - structuredClone - полная независимость.","type":"ordered-list-item","key":"3495p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"JSON метод - быстр, но теряет функции, Date, undefined, Symbol.","type":"ordered-list-item","key":"4m9up"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Всегда думайте о вложенности - самый частый источник багов.","type":"ordered-list-item","key":"42p8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Иммутабельность - ключ к предсказуемому коду (React, Redux, Vue).","type":"ordered-list-item","key":"6ej72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Финальный тест (проверьте себя):","type":"unstyled","key":"30nts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"flidd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":430,"style":"ITALIC"},{"length":4,"offset":466,"style":"ITALIC"}],"text":"const original = {\n name: \"Анна\",\n scores: [10, 20, 30],\n meta: { level: 5 }\n};\n\nconst copy1 = original;\nconst copy2 = { ...original };\nconst copy3 = JSON.parse(JSON.stringify(original));\nconst copy4 = structuredClone(original);\n\ncopy1.name = \"1\";\ncopy2.name = \"2\";\ncopy3.name = \"3\";\ncopy4.name = \"4\";\n\ncopy1.scores.push(40);\ncopy2.scores.push(50);\ncopy3.scores.push(60);\ncopy4.scores.push(70);\n\nconsole.log(original.name); // ?\nconsole.log(original.scores); // ?","type":"unstyled","key":"9b4ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ:","type":"unstyled","key":"5slj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"original.name - \"1\" (copy1 изменил оригинал)","type":"unordered-list-item","key":"79rm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"original.scores - [10, 20, 30, 40, 50] (copy1 и copy2 изменили один и тот же массив, потому что scores копировался поверхностно)","type":"unordered-list-item","key":"82s96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копирование объектов - это та область JavaScript, где теория расходится с практикой чаще всего. Но когда вы поймете разницу между ссылкой, поверхностной и глубокой копией, вы перестанете удивляться \"магическим\" изменениям данных. Помните: в мире объектов нет магии, есть только ссылки и копии. Выбирайте правильную стратегию, и ваш код будет предсказуемым и надёжным.","type":"unstyled","key":"3lvlv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---------------------------------------------------------------------------------","type":"unstyled","key":"du88g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---------------------------------------------------------------------------------","type":"unstyled","key":"efskg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Невидимые уборщики: Как работает сборка мусора в JavaScript (и почему ваша память не взрывается)","type":"header-two","key":"2u74d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы пишете код. Создаёте объекты, массивы, функции. И никогда не думаете о том, чтобы их удалить. В C++ вы бы вызывали delete. В Rust - боролись бы с borrow checker. В JavaScript же... просто ничего не делаете.","type":"unstyled","key":"40sru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И память не течёт. Ну, почти никогда.","type":"unstyled","key":"9s3tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как так получается? За кулисами трудится невидимый уборщик - сборщик мусора (Garbage Collector). Он ходит по вашему хип-хопу памяти, выискивает мусор и выбрасывает его. Без вопросов. Без просьб. Без благодарности.","type":"unstyled","key":"8e8n0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы поднимем капот JavaScript-движка и посмотрим, как работает этот магический механизм. И главное - как не заставить его работать слишком усердно.","type":"unstyled","key":"bopib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Зачем вообще нужна сборка мусора?","type":"header-two","key":"6nsbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript память выделяется автоматически:","type":"unstyled","key":"ct59q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3jsuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"},{"length":29,"offset":71,"style":"ITALIC"},{"length":30,"offset":135,"style":"ITALIC"}],"text":"// Выделяем память под объект\nconst user = { name: \"Анна\", age: 25 };\n\n// Выделяем память под массив\nconst data = new Array(1000000);\n\n// Выделяем память под функцию\nconst greet = () => console.log(\"Привет\");","type":"unstyled","key":"cr174"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вопрос: когда эту память нужно освобождать? Когда объект больше не нужен. Но откуда программа знает, что объект \"не нужен\"? В этом и заключается задача сборщика мусора.","type":"unstyled","key":"61e5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Основная идея: объект жив, пока до него можно добраться из корневых узлов (глобальный объект, текущие локальные переменные, стек вызовов). Как только объект становится недостижимым - он мусор.","type":"unstyled","key":"cncf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Достижимость: Кто живёт, а кто нет?","type":"header-two","key":"et3hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что память - это комната, а корневые узлы - это люди, стоящие у входа. Любой объект, до которого можно дойти по цепочке \"человек → объект → другой объект\", остаётся в комнате. Все остальные - выносятся.","type":"unstyled","key":"52ap2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"97m8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":70,"offset":98,"style":"ITALIC"},{"length":43,"offset":211,"style":"ITALIC"},{"length":65,"offset":257,"style":"ITALIC"},{"length":57,"offset":325,"style":"ITALIC"},{"length":57,"offset":395,"style":"ITALIC"}],"text":"// Глобальная переменная (корневой узел)\nlet globalUser = { name: \"Анна\" };\n\nfunction start() {\n // Локальная переменная (тоже корневой узел, пока функция выполняется)\n let localUser = { name: \"Борис\" };\n \n // globalUser и localUser достижимы → живут\n // Объект { name: \"Анна\" } жив, пока globalUser на него ссылается\n // Объект { name: \"Борис\" } жив, пока выполняется start()\n}\n\nstart(); // После вызова localUser становится недостижимым → мусор","type":"unstyled","key":"npbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Алгоритмы сборки мусора","type":"header-two","key":"8p8m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сборщиков мусора не один, а несколько. Движки комбинируют их для оптимальной производительности.","type":"unstyled","key":"61gb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 Алгоритм \"Пометить и очистить\" (Mark-and-Sweep)","type":"header-three","key":"avqpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это основа современной сборки мусора.","type":"unstyled","key":"7r54j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Шаг 1: Mark (Пометка) - сборщик проходит от корней и помечает все достижимые объекты.","type":"unstyled","key":"baepa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6j2kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":74,"style":"ITALIC"},{"length":34,"offset":114,"style":"ITALIC"},{"length":12,"offset":150,"style":"ITALIC"},{"length":41,"offset":163,"style":"ITALIC"},{"length":33,"offset":205,"style":"ITALIC"},{"length":50,"offset":239,"style":"ITALIC"},{"length":65,"offset":290,"style":"ITALIC"},{"length":30,"offset":356,"style":"ITALIC"}],"text":"let a = { name: \"A\" };\nlet b = { name: \"B\" };\na.child = b;\nb.child = a; // циклическая ссылка!\n\na = null; // a больше не ссылается на объект\n\n// Алгоритм:\n// 1. Старт от корней (глобальный объект)\n// 2. Помечает достижимые объекты\n// 3. Объект { name: \"A\" } недостижим → не помечен\n// 4. Объект { name: \"B\" } тоже недостижим (через a, но a = null)\n// 5. Оба отправляются в Sweep","type":"unstyled","key":"6hbmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Шаг 2: Sweep (Очистка) - удаляются все непомеченные объекты.","type":"unstyled","key":"f5or7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно: Алгоритм работает с циклическими ссылками! Раньше (в старых браузерах) была проблема с циклами:","type":"unstyled","key":"62hov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6gsbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":61,"offset":195,"style":"ITALIC"},{"length":66,"offset":257,"style":"ITALIC"}],"text":"// Старая проблема (до 2012 года)\nfunction createCycle() {\n const obj1 = {};\n const obj2 = {};\n obj1.ref = obj2;\n obj2.ref = obj1;\n return obj1;\n}\n\nlet cycle = createCycle();\ncycle = null;\n\n// Раньше: объекты не удалялись (счётчик ссылок не обнулялся)\n// Сейчас: Mark-and-Sweep помечает только достижимые → удаляет оба","type":"unstyled","key":"c78af"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 Алгоритм \"Копирование\" (Copying)","type":"header-three","key":"5hhk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делит память на две полу-области: \"from-space\" и \"to-space\". Живые объекты копируются из from в to, после чего from целиком очищается.","type":"unstyled","key":"39g39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":7,"offset":40,"style":"BOLD"}],"text":"Плюсы: быстро, без фрагментации памяти.\nМинусы: использует в два раза больше памяти.","type":"unstyled","key":"2u07m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3 Алгоритм \"Generational\" (Поколенческий)","type":"header-three","key":"6vls2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основан на наблюдении: большинство объектов живут недолго (создаются и сразу умирают).","type":"unstyled","key":"dmcip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Память делится на поколения:","type":"unstyled","key":"6ti5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"New space (молодое поколение) - новые объекты. Очищается часто и быстро.","type":"unordered-list-item","key":"b0r60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Old space (старое поколение) - объекты, пережившие несколько сборок. Очищается редко.","type":"unordered-list-item","key":"b43vk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7ucr0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"},{"length":36,"offset":51,"style":"ITALIC"},{"length":36,"offset":149,"style":"ITALIC"}],"text":"// Пример долгоживущих объектов\nconst cache = {}; // живёт долго (попадёт в old space)\n\nfor (let i = 0; i < 1000; i++) {\n const temp = { id: i }; // живёт одну итерацию → young space\n process(temp);\n}","type":"unstyled","key":"4q4k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.4 Алгоритм \"Incremental\" (Инкрементальный)","type":"header-three","key":"bqujh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо одной долгой остановки (Stop-The-World), сборщик работает по кусочкам между выполнением кода. Так страница не зависает.","type":"unstyled","key":"7u87l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2e7e3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":34,"offset":34,"style":"ITALIC"},{"length":29,"offset":70,"style":"ITALIC"},{"length":36,"offset":100,"style":"ITALIC"}],"text":"// Старый подход (Stop-The-World)\n// Пауза 100ms → страница зависает\n\n// Новый подход (Incremental)\n// 10 пауз по 10ms → почти незаметно","type":"unstyled","key":"9s4g1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. V8: Движок Chrome и Node.js","type":"header-two","key":"dkuiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"V8 использует комбинацию алгоритмов:","type":"unstyled","key":"figfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"ПоколениеАлгоритмЧто делаетYoung generationScavenge (копирование)Быстрая сборка мелкого мусораOld generationMark-Sweep + Mark-CompactПолная очистка + дефрагментация","type":"unstyled","key":"38goe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Как увидеть сборку мусора в Chrome DevTools","type":"header-three","key":"dqu3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d0nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":76,"offset":0,"style":"ITALIC"},{"length":36,"offset":77,"style":"ITALIC"},{"length":29,"offset":114,"style":"ITALIC"}],"text":"// 1. Откройте Performance Monitor (Ctrl+Shift+P → Show Performance Monitor)\n// 2. Смотрите график \"JS heap size\"\n// 3. Создайте много объектов\nconst leak = [];\nsetInterval(() => {\n leak.push(new Array(1000000));\n console.log(\"Heap size растёт\");\n}, 1000);","type":"unstyled","key":"ep9b2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 Включение отладочного вывода в Node.js","type":"header-three","key":"2jeap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"ekvck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"node --trace-gc script.js\nnode --trace-gc-verbose script.js","type":"unstyled","key":"bdlpc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Утечки памяти: Когда уборщик не справляется","type":"header-two","key":"9mimd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":157,"style":"BOLD"}],"text":"Сборщик мусора - не волшебник. Он удаляет только недостижимые объекты. Если объект случайно остаётся достижимым - он не будет удалён никогда. Это называется утечкой памяти.","type":"unstyled","key":"5seum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Глобальные переменные","type":"header-three","key":"anak8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3o8uj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":20,"style":"ITALIC"},{"length":43,"offset":98,"style":"ITALIC"}],"text":"function leak() {\n // Забыли var/let/const\n accidentallyGlobal = new Array(1000000);\n}\n\nleak(); // переменная попала в window → живёт вечно","type":"unstyled","key":"6tdkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: используйте \"use strict\", который запрещает необъявленные переменные.","type":"unstyled","key":"6k8g0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Забытые таймеры","type":"header-three","key":"8j70h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6pcut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":81,"style":"ITALIC"},{"length":30,"offset":123,"style":"ITALIC"},{"length":45,"offset":154,"style":"ITALIC"}],"text":"let data = new Array(1000000);\n\nsetInterval(() => {\n console.log(data.length); // data никогда не освободится\n}, 1000);\n\n// data нужна, пока жив таймер\n// если таймер не отменить - data живёт вечно","type":"unstyled","key":"6dplb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: всегда очищайте таймеры.","type":"unstyled","key":"2n804"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"60t6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":66,"style":"ITALIC"}],"text":"const timer = setInterval(() => {}, 1000);\nclearInterval(timer); // теперь data может быть собрана","type":"unstyled","key":"aj7bv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 Слушатели событий","type":"header-three","key":"5el33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"33sfb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":196,"style":"ITALIC"},{"length":37,"offset":235,"style":"ITALIC"}],"text":"function createHandler() {\n const hugeData = new Array(1000000);\n \n document.getElementById(\"btn\").addEventListener(\"click\", () => {\n console.log(hugeData.length);\n });\n}\n\ncreateHandler();\n// hugeData живёт, пока жив обработчик\n// обработчик живёт, пока жива кнопка","type":"unstyled","key":"a25gp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: удаляйте слушатели, когда они больше не нужны.","type":"unstyled","key":"4t461"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ahram"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const handler = () => console.log(\"click\");\nbutton.addEventListener(\"click\", handler);\nbutton.removeEventListener(\"click\", handler);","type":"unstyled","key":"s1g5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.4 Замыкания","type":"header-three","key":"ac58i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bl7be"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":89,"style":"ITALIC"},{"length":48,"offset":148,"style":"ITALIC"},{"length":47,"offset":231,"style":"ITALIC"}],"text":"function outer() {\n const huge = new Array(1000000);\n \n return function inner() {\n // inner имеет доступ к huge\n console.log(\"hello\");\n // huge не используется, но всё ещё в замыкании!\n };\n}\n\nconst fn = outer();\nfn(); // huge всё ещё в памяти (хотя не используется)","type":"unstyled","key":"ehkdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: современные движки оптимизируют такие случаи, но лучше не полагаться.","type":"unstyled","key":"2suq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.5 Отсоединённые DOM-элементы","type":"header-three","key":"9enve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4l1i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":103,"style":"ITALIC"},{"length":35,"offset":122,"style":"ITALIC"},{"length":17,"offset":180,"style":"ITALIC"}],"text":"const element = document.createElement(\"div\");\ndocument.body.appendChild(element);\n\nelement.remove(); // удалили из DOM\n\n// НО! element всё ещё в переменной\nconsole.log(element); // живёт в памяти","type":"unstyled","key":"du3va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Как помочь сборщику мусора (и не мешать)","type":"header-two","key":"do9eu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Обнуляйте ссылки","type":"header-three","key":"dqv0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8691v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"},{"length":23,"offset":58,"style":"ITALIC"},{"length":45,"offset":83,"style":"ITALIC"},{"length":23,"offset":163,"style":"ITALIC"},{"length":38,"offset":202,"style":"ITALIC"}],"text":"// Плохо (долгая жизнь)\nlet cache = { user: hugeObject };\n// ... используем cache\n\n// Хорошо (явно говорим, что больше не нужен)\nlet cache = { user: hugeObject };\n// ... используем cache\ncache = null; // теперь hugeObject может быть собран","type":"unstyled","key":"fn2bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Используйте слабые ссылки (WeakMap, WeakSet, WeakRef)","type":"header-three","key":"3h6gk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычные ссылки не дают объекту умереть. Слабые - позволяют.","type":"unstyled","key":"p62d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7dff2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"},{"length":44,"offset":140,"style":"ITALIC"},{"length":59,"offset":186,"style":"ITALIC"},{"length":51,"offset":344,"style":"ITALIC"}],"text":"// Обычный Map - объект живёт, пока есть ключ\nlet user = { name: \"Анна\" };\nconst cache = new Map();\ncache.set(user, \"данные\");\nuser = null;\n// { name: \"Анна\" } всё ещё в cache → живёт!\n\n// WeakMap - объект умрёт, когда не останется других ссылок\nlet user = { name: \"Анна\" };\nconst cache = new WeakMap();\ncache.set(user, \"данные\");\nuser = null;\n// Объект может быть собран, даже если есть WeakMap","type":"unstyled","key":"dpfkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.3 Ограничивайте размер кэша","type":"header-three","key":"dt99a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"88apd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":166,"style":"ITALIC"}],"text":"class LRUCache {\n constructor(limit) {\n this.limit = limit;\n this.cache = new Map();\n }\n \n set(key, value) {\n if (this.cache.size >= this.limit) {\n // удаляем самый старый элемент\n const firstKey = this.cache.keys().next().value;\n this.cache.delete(firstKey);\n }\n this.cache.set(key, value);\n }\n}","type":"unstyled","key":"6urdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.4 Используйте пулы объектов для тяжёлых структур","type":"header-three","key":"9sk3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7jhjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":313,"style":"ITALIC"},{"length":17,"offset":419,"style":"ITALIC"}],"text":"class ObjectPool {\n constructor(createFn, maxSize = 100) {\n this.createFn = createFn;\n this.pool = [];\n this.maxSize = maxSize;\n }\n \n acquire() {\n return this.pool.pop() || this.createFn();\n }\n \n release(obj) {\n if (this.pool.length < this.maxSize) {\n this.pool.push(obj);\n }\n }\n}\n\n// Вместо создания миллиона объектов\nconst pool = new ObjectPool(() => ({}));\nconst obj = pool.acquire();\n// используем obj\npool.release(obj);","type":"unstyled","key":"5rfd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Инструменты для поиска утечек","type":"header-two","key":"4hjlk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Chrome DevTools: Memory Tab","type":"header-three","key":"eqi9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Heap snapshot - снимок памяти. Сделайте два снимка и сравните.","type":"ordered-list-item","key":"feicg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Allocation timeline - запись выделений в реальном времени.","type":"ordered-list-item","key":"eie1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Allocation sampling - семплирование (меньше влияет на производительность).","type":"ordered-list-item","key":"97j53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8b1in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"},{"length":40,"offset":22,"style":"ITALIC"},{"length":55,"offset":63,"style":"ITALIC"},{"length":43,"offset":119,"style":"ITALIC"},{"length":35,"offset":163,"style":"ITALIC"},{"length":52,"offset":199,"style":"ITALIC"}],"text":"// Как искать утечку:\n// 1. Сделайте Heap Snapshot (память до)\n// 2. Выполните действие, которое подозреваете в утечке\n// 3. Сделайте Heap Snapshot (память после)\n// 4. Сравните (вкладка Comparison)\n// 5. Ищите объекты, которые не должны были остаться","type":"unstyled","key":"2ltvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Node.js: process.memoryUsage()","type":"header-three","key":"6m4nr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5kiru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":133,"style":"ITALIC"},{"length":18,"offset":215,"style":"ITALIC"},{"length":15,"offset":301,"style":"ITALIC"},{"length":14,"offset":385,"style":"ITALIC"}],"text":"setInterval(() => {\n const usage = process.memoryUsage();\n console.log({\n rss: `${Math.round(usage.rss / 1024 / 1024)} MB`, // общая память\n heapTotal: `${Math.round(usage.heapTotal / 1024 / 1024)} MB`, // выделено под JS\n heapUsed: `${Math.round(usage.heapUsed / 1024 / 1024)} MB`, // используется\n external: `${Math.round(usage.external / 1024 / 1024)} MB` // C++ объекты\n });\n}, 5000);","type":"unstyled","key":"a3hfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Node.js: inspector","type":"header-three","key":"fogg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"9enh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":25,"style":"ITALIC"}],"text":"node --inspect script.js\n# Открыть chrome://inspect","type":"unstyled","key":"8ogch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Мифы о сборке мусора","type":"header-two","key":"dg2kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Миф 1: \"delete освобождает память\"","type":"header-three","key":"doc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3et8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":43,"style":"ITALIC"}],"text":"const obj = { a: 1, b: 2 };\ndelete obj.a; // удаляет свойство, но не освобождает память","type":"unstyled","key":"ffdi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Миф 2: \"null освобождает память\"","type":"header-three","key":"288ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"82r7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":44,"style":"ITALIC"}],"text":"let obj = { data: hugeArray };\nobj = null; // теперь hugeArray может быть собран (но не сразу!)","type":"unstyled","key":"con1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Миф 3: \"Сборщик мусора тормозит всегда\"","type":"header-three","key":"7abog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современные инкрементальные и параллельные алгоритмы почти незаметны.","type":"unstyled","key":"alrpc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Миф 4: \"В JavaScript нет утечек памяти\"","type":"header-three","key":"2ev3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть. И их много.","type":"unstyled","key":"1rflf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Реальный кейс: Утечка в React-компоненте","type":"header-two","key":"dmi33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jsx","type":"unstyled","key":"dbpis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":158,"style":"ITALIC"},{"length":37,"offset":203,"style":"ITALIC"},{"length":15,"offset":282,"style":"ITALIC"},{"length":30,"offset":477,"style":"ITALIC"}],"text":"function LeakyComponent() {\n const [data, setData] = useState(null);\n \n useEffect(() => {\n const huge = new Array(1000000);\n setData(huge);\n \n // ПРОБЛЕМА: данные никогда не очищаются\n // даже когда компонент размонтирован\n }, []);\n \n return

;\n}\n\n// Исправление:\nfunction FixedComponent() {\n const [data, setData] = useState(null);\n \n useEffect(() => {\n const huge = new Array(1000000);\n setData(huge);\n \n return () => {\n // Очищаем при размонтировании\n setData(null);\n };\n }, []);\n \n return

...

;\n}","type":"unstyled","key":"9m8uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест уборщика","type":"header-two","key":"avaur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Сборка мусора автоматическая - не вызывайте её вручную (даже если очень хочется).","type":"ordered-list-item","key":"1qfqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Mark-and-Sweep - основа современных алгоритмов (работает с циклами).","type":"ordered-list-item","key":"2bqtt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Поколенческая сборка - новые объекты собираются чаще, старые — реже.","type":"ordered-list-item","key":"865d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Утечки памяти реальны - глобальные переменные, забытые таймеры, слушатели, замыкания.","type":"ordered-list-item","key":"15l6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"WeakMap/WeakSet - ваши друзья для кэширования без утечек.","type":"ordered-list-item","key":"875pc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"DevTools Memory Tab - лучший способ найти утечку.","type":"ordered-list-item","key":"2gisj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Чистите за собой - обнуляйте ссылки, удаляйте слушатели, отменяйте таймеры.","type":"ordered-list-item","key":"b58i6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Финальный тест: что произойдёт с памятью?","type":"unstyled","key":"8pqm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bng3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":58,"style":"ITALIC"},{"length":26,"offset":102,"style":"ITALIC"}],"text":"let arr = new Array(1000000);\nlet ref = arr;\narr = null;\n\n// Через 5 секунд сборщик мусора запустится\n// Будет ли массив удалён?","type":"unstyled","key":"cpjbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ: Нет. ref всё ещё ссылается на массив. Пока есть хотя бы одна ссылка, объект живёт.","type":"unstyled","key":"1silm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сборщик мусора - это тихий герой JavaScript. Вы редко замечаете его работу, но без него браузеры бы падали через минуту работы. Понимание того, как он работает, помогает писать код, который не течёт, не тормозит и не взрывает память. Уважайте своего невидимого уборщика, и он отплатит вам стабильной и быстрой работой приложений.","type":"unstyled","key":"df2nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"68fv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"5uq7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зеркальный лабиринт: Полное руководство по this и методам объектов в JavaScript","type":"header-two","key":"60umd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"this - это самое загадочное существо в JavaScript. Он меняется в зависимости от того, кто его позвал, где он стоит и в какой фазе луны. Новички его боятся. Профи используют его силу. А некоторые просто всегда пишут стрелочные функции и делают вид, что проблемы не существует.","type":"unstyled","key":"a5tk7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но this - это не баг. Это фича. Очень мощная фича. Просто у неё сложные правила.","type":"unstyled","key":"5qq3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы разберем методы объектов, тайны this и научимся управлять этим неуловимым контекстом.","type":"unstyled","key":"3n25b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Что такое метод объекта?","type":"header-two","key":"d1q9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Метод - это функция, которая является свойством объекта.","type":"unstyled","key":"ecd98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8t8v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":36,"style":"ITALIC"},{"length":35,"offset":140,"style":"ITALIC"},{"length":28,"offset":272,"style":"ITALIC"},{"length":23,"offset":320,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n \n // Метод (сокращённая запись)\n greet() {\n console.log(`Привет, меня зовут ${this.name}`);\n },\n \n // Тоже метод (классическая запись)\n sayGoodbye: function() {\n console.log(`Пока, говорит ${this.name}`);\n }\n};\n\nuser.greet(); // \"Привет, меня зовут Анна\"\nuser.sayGoodbye(); // \"Пока, говорит Анна\"","type":"unstyled","key":"dmth5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Магия здесь в this. Внутри метода this указывает на объект, которому принадлежит метод.","type":"unstyled","key":"9t57v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. this в разных контекстах (и почему он такой непредсказуемый)","type":"header-two","key":"c0uv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Глобальный контекст","type":"header-three","key":"bqu5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dctlv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":19,"style":"ITALIC"},{"length":19,"offset":66,"style":"ITALIC"},{"length":29,"offset":119,"style":"ITALIC"}],"text":"console.log(this); // window (в браузере) или global (в Node.js)\n\n// В строгом режиме\n\"use strict\";\nconsole.log(this); // undefined (внутри функции)","type":"unstyled","key":"f74hh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 Метод объекта (обычная функция)","type":"header-three","key":"dslvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3hlcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":95,"style":"ITALIC"}],"text":"const obj = {\n name: \"Объект\",\n method() {\n console.log(this.name);\n }\n};\n\nobj.method(); // \"Объект\" (this = obj)","type":"unstyled","key":"93n9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.3 Обычная функция (не метод)","type":"header-three","key":"29vjj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"vf5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":56,"style":"ITALIC"}],"text":"function regular() {\n console.log(this);\n}\n\nregular(); // window (в нестрогом) или undefined (в строгом)","type":"unstyled","key":"a6u01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.4 Стрелочная функция","type":"header-three","key":"39son"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У стрелочных функций НЕТ своего this. Они берут его из внешнего контекста.","type":"unstyled","key":"e04v2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dud0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":109,"style":"ITALIC"},{"length":33,"offset":221,"style":"ITALIC"},{"length":20,"offset":284,"style":"ITALIC"},{"length":26,"offset":326,"style":"ITALIC"}],"text":"const obj = {\n name: \"Анна\",\n \n regularMethod() {\n const arrow = () => {\n console.log(this.name); // this берётся из regularMethod\n };\n arrow();\n },\n \n arrowMethod: () => {\n console.log(this.name); // this из глобального контекста!\n }\n};\n\nobj.regularMethod(); // \"Анна\" (работает)\nobj.arrowMethod(); // undefined (не работает)","type":"unstyled","key":"8cdub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Главная ловушка: Потеря this","type":"header-two","key":"6bqca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самая частая проблема - this теряется, когда метод передаётся как колбэк.","type":"unstyled","key":"422b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"58h3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":92,"style":"ITALIC"},{"length":17,"offset":118,"style":"ITALIC"},{"length":15,"offset":137,"style":"ITALIC"},{"length":38,"offset":196,"style":"ITALIC"},{"length":15,"offset":236,"style":"ITALIC"},{"length":22,"offset":282,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() {\n console.log(`Привет, ${this.name}`);\n }\n};\n\n// Работает\nuser.greet(); // \"Привет, Анна\"\n\n// НЕ РАБОТАЕТ!\nconst greetFunc = user.greet;\ngreetFunc(); // \"Привет, undefined\" (this = window)\n\n// НЕ РАБОТАЕТ!\nsetTimeout(user.greet, 1000); // \"Привет, undefined\"","type":"unstyled","key":"5qugc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Что произошло? Когда мы пишем user.greet, мы берём функцию. Но когда мы вызываем greetFunc(), связь с объектом теряется. Функция вызывается сама по себе, и this становится глобальным объектом.","type":"unstyled","key":"8i3ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Способы сохранить this","type":"header-two","key":"9a954"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Стрелочная функция (сохраняет контекст)","type":"header-three","key":"al0vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1cuf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":109,"style":"ITALIC"},{"length":33,"offset":160,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() {\n setTimeout(() => {\n console.log(`Привет, ${this.name}`); // this = user\n }, 1000);\n }\n};\n\nuser.greet(); // \"Привет, Анна\" (через секунду)","type":"unstyled","key":"be8fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 .bind() - привязать навсегда","type":"header-three","key":"7d3hb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7uk3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":148,"style":"ITALIC"},{"length":17,"offset":208,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() {\n console.log(`Привет, ${this.name}`);\n }\n};\n\nconst boundGreet = user.greet.bind(user);\nboundGreet(); // \"Привет, Анна\"\n\nsetTimeout(user.greet.bind(user), 1000); // \"Привет, Анна\"","type":"unstyled","key":"6ed3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".bind() создаёт новую функцию, у которой this навсегда привязан к указанному объекту.","type":"unstyled","key":"11qok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.3 .call() и .apply() - вызвать с нужным this","type":"header-three","key":"fetud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e1o7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":133,"style":"ITALIC"},{"length":18,"offset":200,"style":"ITALIC"},{"length":29,"offset":220,"style":"ITALIC"},{"length":24,"offset":292,"style":"ITALIC"}],"text":"function greet(greeting, punctuation) {\n console.log(`${greeting}, ${this.name}${punctuation}`);\n}\n\nconst user = { name: \"Анна\" };\n\n// call — аргументы через запятую\ngreet.call(user, \"Привет\", \"!\"); // \"Привет, Анна!\"\n\n// apply — аргументы массивом\ngreet.apply(user, [\"Здравствуй\", \"...\"]); // \"Здравствуй, Анна...\"","type":"unstyled","key":"4qvqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.4 Сохранить в переменную (замыкание)","type":"header-three","key":"3c9fl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fje4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":111,"style":"ITALIC"},{"length":11,"offset":166,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() {\n console.log(`Привет, ${this.name}`);\n }\n};\n\nconst self = user; // сохраняем ссылку\nsetTimeout(() => {\n self.greet(); // работает\n}, 1000);","type":"unstyled","key":"eu6n4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Методы объекта: Синтаксисы и нюансы","type":"header-two","key":"d0fot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Три способа создать метод","type":"header-three","key":"9n0cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9jtsr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":16,"style":"ITALIC"},{"length":32,"offset":113,"style":"ITALIC"},{"length":54,"offset":214,"style":"ITALIC"},{"length":18,"offset":322,"style":"ITALIC"}],"text":"const obj = {\n // Способ 1: сокращённый (современный)\n method1() {\n console.log(\"method1\", this);\n },\n \n // Способ 2: function expression\n method2: function() {\n console.log(\"method2\", this);\n },\n \n // Способ 3: стрелочная (НЕ РЕКОМЕНДУЕТСЯ для методов)\n method3: () => {\n console.log(\"method3\", this); // this не из obj!\n }\n};","type":"unstyled","key":"8jtgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Динамические имена методов (computed names)","type":"header-three","key":"f5rkf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ahkfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":112,"style":"ITALIC"}],"text":"const methodName = \"greet\";\nconst user = {\n [methodName]() {\n console.log(\"Привет!\");\n }\n};\n\nuser.greet(); // \"Привет!\"","type":"unstyled","key":"1hq14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 this в цепочке вызовов","type":"header-three","key":"fcd34"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7obpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":85,"style":"ITALIC"},{"length":19,"offset":317,"style":"ITALIC"}],"text":"const calculator = {\n value: 0,\n \n add(n) {\n this.value += n;\n return this; // возвращаем себя для цепочки\n },\n \n multiply(n) {\n this.value *= n;\n return this;\n },\n \n getValue() {\n return this.value;\n }\n};\n\nconst result = calculator.add(5).multiply(2).add(3).getValue();\nconsole.log(result); // (5 * 2) + 3 = 13","type":"unstyled","key":"6v77b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. this в классах","type":"header-two","key":"24o3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9c29t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":126,"style":"ITALIC"},{"length":33,"offset":342,"style":"ITALIC"},{"length":37,"offset":390,"style":"ITALIC"}],"text":"class User {\n constructor(name) {\n this.name = name;\n }\n \n greet() {\n console.log(`Привет, ${this.name}`);\n }\n \n // Стрелочный метод (сохраняет this)\n greetArrow = () => {\n console.log(`Привет, ${this.name}`);\n }\n}\n\nconst user = new User(\"Анна\");\nconst greet = user.greet;\nconst greetArrow = user.greetArrow;\n\ngreet(); // \"Привет, undefined\" (потеряли)\ngreetArrow(); // \"Привет, Анна\" (стрелка сохранила)","type":"unstyled","key":"fdila"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Реальные паттерны с this","type":"header-two","key":"757ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Привязка обработчиков событий","type":"header-three","key":"6g3un"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"enbm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":158,"style":"ITALIC"},{"length":21,"offset":242,"style":"ITALIC"},{"length":21,"offset":326,"style":"ITALIC"}],"text":"class Button {\n constructor(text) {\n this.text = text;\n this.element = document.createElement(\"button\");\n this.element.textContent = text;\n \n // Вариант 1: bind\n this.element.onclick = this.handleClick.bind(this);\n \n // Вариант 2: стрелка\n this.element.onclick = () => this.handleClick();\n \n // Вариант 3: обёртка\n this.element.onclick = (e) => this.handleClick(e);\n }\n \n handleClick(event) {\n console.log(`Кнопка \"${this.text}\" нажата`);\n }\n}","type":"unstyled","key":"a8mv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Декоратор логирования","type":"header-three","key":"47qp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2aiu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":438,"style":"ITALIC"},{"length":15,"offset":473,"style":"ITALIC"}],"text":"function logMethod(target, name, descriptor) {\n const original = descriptor.value;\n \n descriptor.value = function(...args) {\n console.log(`Вызов ${name} с аргументами:`, args);\n const result = original.apply(this, args);\n console.log(`Результат:`, result);\n return result;\n };\n \n return descriptor;\n}\n\nclass Calculator {\n @logMethod\n add(a, b) {\n return a + b;\n }\n}\n\nconst calc = new Calculator();\ncalc.add(2, 3);\n// Вызов add с аргументами: [2, 3]\n// Результат: 5","type":"unstyled","key":"1ggee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Сборщик событий (Event Bus)","type":"header-three","key":"1lfc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e0gnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":357,"style":"ITALIC"},{"length":29,"offset":681,"style":"ITALIC"}],"text":"class EventBus {\n constructor() {\n this.listeners = {};\n }\n \n on(event, callback) {\n if (!this.listeners[event]) {\n this.listeners[event] = [];\n }\n this.listeners[event].push(callback);\n }\n \n emit(event, data) {\n if (!this.listeners[event]) return;\n this.listeners[event].forEach(callback => {\n callback.call(this, data); // сохраняем контекст\n });\n }\n \n off(event, callback) {\n if (!this.listeners[event]) return;\n this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);\n }\n}\n\nconst bus = new EventBus();\nbus.on(\"user-login\", function(user) {\n console.log(`${user.name} вошёл в систему`);\n console.log(this); // EventBus (благодаря .call)\n});","type":"unstyled","key":"8qmk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Сравнение способов привязки this","type":"header-two","key":"ds4gd"},{"data":{"image":{"id":"69db02f7685b86418635ec26"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9l4vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bi09f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Подводные камни","type":"header-two","key":"2vcpo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: this в setTimeout","type":"header-three","key":"d650k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"al5fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":100,"style":"ITALIC"},{"length":15,"offset":136,"style":"ITALIC"},{"length":10,"offset":200,"style":"ITALIC"},{"length":7,"offset":252,"style":"ITALIC"}],"text":"const obj = {\n name: \"Анна\",\n greet() {\n setTimeout(function() {\n console.log(this.name); // undefined!\n }, 1000);\n }\n};\n\n// Исправление:\nsetTimeout(() => console.log(this.name), 1000); // стрелка\nsetTimeout(this.greet.bind(this), 1000); // bind","type":"unstyled","key":"7t8ls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: this в деструктуризации","type":"header-three","key":"8o840"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fag70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":112,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n greet() {\n console.log(this.name);\n }\n};\n\nconst { greet } = user;\ngreet(); // \"undefined\" (потеряли this)","type":"unstyled","key":"dh3ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: this в прототипах","type":"header-three","key":"68d2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e5b6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":177,"style":"ITALIC"},{"length":27,"offset":207,"style":"ITALIC"}],"text":"function User(name) {\n this.name = name;\n}\n\nUser.prototype.greet = function() {\n console.log(this.name);\n};\n\nconst user = new User(\"Анна\");\nconst greet = user.greet;\ngreet(); // undefined (потеряли this)\n\n// Но user.greet() работает","type":"unstyled","key":"rtp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #4: this в конструкторе при возврате объекта","type":"header-three","key":"c04ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bu3ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":72,"style":"ITALIC"},{"length":27,"offset":158,"style":"ITALIC"},{"length":11,"offset":211,"style":"ITALIC"}],"text":"function User(name) {\n this.name = name;\n return { other: \"object\" }; // возвращаем другой объект\n}\n\nconst user = new User(\"Анна\");\nconsole.log(user.name); // undefined (this потерян)\nconsole.log(user.other); // \"object\"","type":"unstyled","key":"8rt61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Реальный кейс: Vue.js и React","type":"header-two","key":"7b3ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.js","type":"header-three","key":"6e8od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"m9oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":82,"style":"ITALIC"},{"length":9,"offset":161,"style":"ITALIC"},{"length":25,"offset":235,"style":"ITALIC"}],"text":"new Vue({\n data() {\n return {\n name: \"Анна\"\n };\n },\n methods: {\n // this указывает на экземпляр Vue\n greet() {\n console.log(this.name); // \"Анна\"\n \n setTimeout(() => {\n console.log(this.name); // стрелка сохраняет this\n }, 1000);\n }\n }\n});","type":"unstyled","key":"bl4bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React (классовый компонент)","type":"header-three","key":"bi0ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jsx","type":"unstyled","key":"5qji8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":84,"style":"ITALIC"},{"length":46,"offset":231,"style":"ITALIC"}],"text":"class Button extends React.Component {\n constructor(props) {\n super(props);\n // Нужно привязать методы\n this.handleClick = this.handleClick.bind(this);\n }\n \n handleClick() {\n console.log(this.props.label);\n }\n \n // Или использовать стрелку (экспериментально)\n handleClick = () => {\n console.log(this.props.label);\n }\n \n render() {\n return ;\n }\n}","type":"unstyled","key":"5ala1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Правила this (шпаргалка)","type":"header-two","key":"9k949"},{"data":{"image":{"id":"69db0327cc4ccd783809d189"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4lqjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3q779"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест this","type":"header-two","key":"8075o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":29,"offset":13,"style":"BOLD"}],"text":"Значение this определяется в момент вызова, а не в момент создания (кроме стрелок).","type":"ordered-list-item","key":"7stin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Стрелочные функции - самый простой способ сохранить this (но не для методов объектов).","type":"ordered-list-item","key":"73knh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".bind() - создаёт функцию с навсегда привязанным this.","type":"ordered-list-item","key":"fkf4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":7,"style":"BOLD"}],"text":".call() / .apply() - вызывают функцию с заданным this (один раз).","type":"ordered-list-item","key":"31t79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"В методах объектов используйте обычные функции (не стрелки), если хотите иметь доступ к объекту через this.","type":"ordered-list-item","key":"7kpo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"В колбэках всегда проверяйте, не потерялся ли this (используйте стрелку, bind или сохраните в переменную).","type":"ordered-list-item","key":"4jc6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Классы - метод, переданный как колбэк, теряет this (привязывайте в конструкторе или используйте стрелки).","type":"ordered-list-item","key":"4vd8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"4pmsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fl12j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const obj = {\n name: \"Анна\",\n greet() { console.log(this.name); },\n greetArrow: () => { console.log(this.name); }\n};\n\nconst fn = obj.greet;\nconst fnArrow = obj.greetArrow;\n\nfn();\nfnArrow();\n\nsetTimeout(obj.greet, 100);\nsetTimeout(() => obj.greet(), 100);","type":"unstyled","key":"75m0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ:","type":"unstyled","key":"dl6q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fn() - undefined (потеряли this)","type":"unordered-list-item","key":"a6hji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fnArrow() - undefined (стрелка берёт глобальный this)","type":"unordered-list-item","key":"3gira"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout(obj.greet, 100) - undefined (потеряли)","type":"unordered-list-item","key":"e75jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout(() => obj.greet(), 100) - \"Анна\" (стрелка сохранила контекст)","type":"unordered-list-item","key":"66fmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":132,"style":"BOLD"},{"length":3,"offset":163,"style":"BOLD"}],"text":"this в JavaScript - это не проклятие. Это просто другой способ мышления. Как только вы поймёте, что значение this определяется тем, как вызвана функция, а не тем, где она написана, вы перестанете бояться. А когда освоите bind, call и apply - начнёте использовать эту силу в своих интересах. Помните: джедаи не боятся this. Они его контролируют.","type":"unstyled","key":"9j6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-------------------------------------------------------------------------","type":"unstyled","key":"e4e5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-------------------------------------------------------------------------","type":"unstyled","key":"kk2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фабрика миров: Как работает конструктор и оператор new в JavaScript","type":"header-two","key":"3nlti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь задумывались, что происходит за кулисами, когда вы пишете new Array() или new Date()? Или почему в JavaScript нет классов (ну, до ES6 не было), но мы всё равно можем создавать множество однотипных объектов?","type":"unstyled","key":"daq8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаловать в мир конструкторов - фабрик, которые штампуют объекты по чертежу. Это одна из самых misunderstood (недопонятых) тем в JavaScript, но после этой статьи вы будете создавать объекты как заправский фабрикант.","type":"unstyled","key":"fluin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Почему не просто объектный литерал?","type":"header-two","key":"38fg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, нам нужно создать несколько пользователей:","type":"unstyled","key":"5odi1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"12mo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"ITALIC"},{"length":46,"offset":177,"style":"ITALIC"}],"text":"// Способ 1: объектный литерал (ручное производство)\nconst user1 = { name: \"Анна\", age: 25 };\nconst user2 = { name: \"Борис\", age: 30 };\nconst user3 = { name: \"Вика\", age: 28 };\n// Уже на третьем пользователе хочется плакать","type":"unstyled","key":"5b18q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проблемы ручного подхода:","type":"unstyled","key":"cjqvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Дублирование кода - каждый раз пишем одно и то же","type":"unordered-list-item","key":"572h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ошибки - легко пропустить свойство","type":"unordered-list-item","key":"amfrk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Изменения - нужно менять в 100 местах","type":"unordered-list-item","key":"691cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Отсутствие типобезопасности - нет гарантии, что объект правильный","type":"unordered-list-item","key":"3s3eb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: конструктор + оператор new.","type":"unstyled","key":"dv023"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Оператор new: Что он на самом деле делает?","type":"header-two","key":"25uub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"new - это волшебная палочка, которая превращает обычную функцию в фабрику объектов.","type":"unstyled","key":"epo8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"918ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":122,"style":"ITALIC"}],"text":"function User(name, age) {\n this.name = name;\n this.age = age;\n}\n\nconst user = new User(\"Анна\", 25);\nconsole.log(user); // User { name: \"Анна\", age: 25 }","type":"unstyled","key":"a2qb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"},{"length":1,"offset":49,"style":"BOLD"}],"text":"Что происходит внутри, когда вы пишете new User()?","type":"unstyled","key":"4st3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2d7sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"},{"length":37,"offset":58,"style":"ITALIC"},{"length":27,"offset":143,"style":"ITALIC"},{"length":64,"offset":194,"style":"ITALIC"},{"length":65,"offset":317,"style":"ITALIC"},{"length":56,"offset":435,"style":"ITALIC"}],"text":"// То, что вы пишете:\nconst user = new User(\"Анна\", 25);\n\n// То, что делает движок (упрощённо):\nfunction newOperator(Constructor, ...args) {\n // 1. Создаёт пустой объект\n const obj = {};\n \n // 2. Устанавливает прототип (связывает с Constructor.prototype)\n Object.setPrototypeOf(obj, Constructor.prototype);\n \n // 3. Вызывает Constructor с this = obj и переданными аргументами\n const result = Constructor.apply(obj, args);\n \n // 4. Возвращает obj (если Constructor не вернул объект)\n return (result && typeof result === \"object\") ? result : obj;\n}","type":"unstyled","key":"a137p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То есть new делает четыре вещи:","type":"unstyled","key":"287r5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":3,"style":"BOLD"}],"text":"\uD83C\uDFD7️ Создаёт новый пустой объект","type":"ordered-list-item","key":"6si7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDD17 Связывает его с прототипом конструктора","type":"ordered-list-item","key":"cgrd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":2,"style":"BOLD"},{"length":29,"offset":29,"style":"BOLD"}],"text":"\uD83C\uDFAF Вызывает конструктор с this, указывающим на новый объект","type":"ordered-list-item","key":"9efvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDF81 Возвращает новый объект (или то, что вернул конструктор, если это объект)","type":"ordered-list-item","key":"43nko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Прототипы и конструкторы: Неразлучная пара","type":"header-two","key":"96n8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждая функция в JavaScript имеет свойство prototype. Когда мы создаём объект через new, этот объект получает ссылку на Constructor.prototype.","type":"unstyled","key":"meg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c2cho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":45,"style":"ITALIC"},{"length":18,"offset":200,"style":"ITALIC"},{"length":18,"offset":220,"style":"ITALIC"},{"length":7,"offset":300,"style":"ITALIC"}],"text":"function User(name) {\n this.name = name;\n}\n\n// Добавляем метод в прототип\nUser.prototype.greet = function() {\n console.log(`Привет, ${this.name}!`);\n};\n\nconst user = new User(\"Анна\");\nuser.greet(); // \"Привет, Анна!\"\n\n// Проверяем связь\nconsole.log(Object.getPrototypeOf(user) === User.prototype); // true","type":"unstyled","key":"2tkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно: Методы, добавленные в prototype, разделяются между всеми экземплярами. Это экономит память.","type":"unstyled","key":"bncbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"cvfjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"},{"length":32,"offset":174,"style":"ITALIC"},{"length":29,"offset":453,"style":"ITALIC"}],"text":"// Плохо (каждый объект получает свою копию метода)\nfunction BadUser(name) {\n this.name = name;\n this.greet = function() {\n console.log(`Привет, ${this.name}`);\n };\n}\n\n// Хорошо (метод общий для всех)\nfunction GoodUser(name) {\n this.name = name;\n}\nGoodUser.prototype.greet = function() {\n console.log(`Привет, ${this.name}`);\n};\n\nconst user1 = new GoodUser(\"Анна\");\nconst user2 = new GoodUser(\"Борис\");\nconsole.log(user1.greet === user2.greet); // true (один и тот же метод)","type":"unstyled","key":"1hs4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Конструкторы с классами ES6 (синтаксический сахар)","type":"header-two","key":"frm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ES6 ввел классы, но под капотом всё тот же прототипный механизм.","type":"unstyled","key":"953m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"807sk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"},{"length":44,"offset":245,"style":"ITALIC"}],"text":"// Класс (новый синтаксис)\nclass User {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n \n greet() {\n console.log(`Привет, ${this.name}`);\n }\n \n static createAnonymous() {\n return new User(\"Гость\", 0);\n }\n}\n\n// То же самое без класса (старый синтаксис)\nfunction User(name, age) {\n this.name = name;\n this.age = age;\n}\nUser.prototype.greet = function() {\n console.log(`Привет, ${this.name}`);\n};\nUser.createAnonymous = function() {\n return new User(\"Гость\", 0);\n};","type":"unstyled","key":"adp9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Возвращаемое значение конструктора","type":"header-two","key":"9v2b3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно конструктор возвращает this (новый объект). Но можно вернуть что-то другое.","type":"unstyled","key":"1hj1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fos8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"},{"length":25,"offset":73,"style":"ITALIC"},{"length":35,"offset":102,"style":"ITALIC"},{"length":41,"offset":204,"style":"ITALIC"},{"length":34,"offset":249,"style":"ITALIC"},{"length":43,"offset":334,"style":"ITALIC"},{"length":23,"offset":408,"style":"ITALIC"},{"length":35,"offset":490,"style":"ITALIC"},{"length":22,"offset":579,"style":"ITALIC"},{"length":28,"offset":623,"style":"ITALIC"}],"text":"// Стандартное поведение\nfunction Standard(name) {\n this.name = name;\n // неявно возвращает this\n}\n\n// Возврат примитива (игнорируется)\nfunction PrimitiveReturn(name) {\n this.name = name;\n return 42; // примитив → игнорируется, вернётся this\n}\n\n// Возврат объекта (заменяет this)\nfunction ObjectReturn(name) {\n this.name = name; // этот код выполнится, но this не вернётся\n return { other: \"object\" }; // вернётся этот объект\n}\n\nconst p = new PrimitiveReturn(\"Анна\");\nconsole.log(p); // PrimitiveReturn { name: \"Анна\" }\n\nconst o = new ObjectReturn(\"Анна\");\nconsole.log(o); // { other: \"object\" }\nconsole.log(o.name); // undefined (не тот объект)","type":"unstyled","key":"ce43g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Практическое применение: синглтон (один экземпляр на всю программу).","type":"unstyled","key":"ddsal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fdcav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":246,"style":"ITALIC"}],"text":"let instance = null;\n\nfunction Database() {\n if (instance) {\n return instance;\n }\n \n this.connection = \"connected\";\n instance = this;\n return instance;\n}\n\nconst db1 = new Database();\nconst db2 = new Database();\nconsole.log(db1 === db2); // true (один и тот же объект)","type":"unstyled","key":"e5ij1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. instanceof: Проверка родословной","type":"header-two","key":"7b4p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оператор instanceof проверяет, был ли объект создан через определённый конструктор.","type":"unstyled","key":"a8hvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fsbri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":154,"style":"ITALIC"},{"length":39,"offset":199,"style":"ITALIC"},{"length":8,"offset":275,"style":"ITALIC"}],"text":"function User(name) { this.name = name; }\nfunction Admin(name) { this.name = name; }\n\nconst user = new User(\"Анна\");\n\nconsole.log(user instanceof User); // true\nconsole.log(user instanceof Object); // true (все объекты наследники Object)\nconsole.log(user instanceof Admin); // false","type":"unstyled","key":"4pgv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Как работает instanceof: идёт по цепочке прототипов и проверяет, есть ли там Constructor.prototype.","type":"unstyled","key":"ba7ak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"362hr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"}],"text":"// Ручная реализация\nfunction myInstanceof(obj, Constructor) {\n let proto = Object.getPrototypeOf(obj);\n while (proto) {\n if (proto === Constructor.prototype) return true;\n proto = Object.getPrototypeOf(proto);\n }\n return false;\n}","type":"unstyled","key":"3e3r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Реальные паттерны конструкторов","type":"header-two","key":"77dfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Фабрика с валидацией","type":"header-three","key":"7nn4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dqgov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":34,"style":"ITALIC"},{"length":15,"offset":225,"style":"ITALIC"},{"length":30,"offset":324,"style":"ITALIC"},{"length":24,"offset":642,"style":"ITALIC"},{"length":8,"offset":711,"style":"ITALIC"}],"text":"function Product(name, price) {\n // Валидация\n if (!name || name.trim() === \"\") {\n throw new Error(\"Название товара обязательно\");\n }\n if (price < 0) {\n throw new Error(\"Цена не может быть отрицательной\");\n }\n \n // Нормализация\n this.name = name.trim();\n this.price = price;\n this.createdAt = new Date();\n}\n\n// Добавляем методы в прототип\nProduct.prototype.getDiscountedPrice = function(discountPercent) {\n return this.price * (1 - discountPercent / 100);\n};\n\nProduct.prototype.format = function() {\n return `${this.name}: ${this.price} руб.`;\n};\n\nconst laptop = new Product(\"Ноутбук\", 50000);\nconsole.log(laptop.format()); // \"Ноутбук: 50000 руб.\"\nconsole.log(laptop.getDiscountedPrice(10)); // 45000","type":"unstyled","key":"du1q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Конструктор с приватными данными (через замыкание)","type":"header-three","key":"7qo0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9s7su"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":41,"style":"ITALIC"},{"length":38,"offset":123,"style":"ITALIC"},{"length":7,"offset":632,"style":"ITALIC"},{"length":24,"offset":670,"style":"ITALIC"}],"text":"function BankAccount(initialBalance) {\n // Приватная переменная (недоступна снаружи)\n let balance = initialBalance;\n \n // Публичные методы (замыкают balance)\n this.deposit = function(amount) {\n if (amount > 0) {\n balance += amount;\n return true;\n }\n return false;\n };\n \n this.withdraw = function(amount) {\n if (amount > 0 && amount <= balance) {\n balance -= amount;\n return true;\n }\n return false;\n };\n \n this.getBalance = function() {\n return balance;\n };\n}\n\nconst account = new BankAccount(1000);\naccount.deposit(500);\naccount.withdraw(200);\nconsole.log(account.getBalance()); // 1300\nconsole.log(account.balance); // undefined (приватно!)","type":"unstyled","key":"af044"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Цепочка конструкторов (наследование)","type":"header-three","key":"f07bh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"32i8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"ITALIC"},{"length":24,"offset":173,"style":"ITALIC"},{"length":36,"offset":228,"style":"ITALIC"},{"length":21,"offset":317,"style":"ITALIC"},{"length":23,"offset":422,"style":"ITALIC"},{"length":15,"offset":579,"style":"ITALIC"},{"length":18,"offset":610,"style":"ITALIC"},{"length":7,"offset":665,"style":"ITALIC"},{"length":7,"offset":709,"style":"ITALIC"}],"text":"// Базовый конструктор\nfunction Animal(name) {\n this.name = name;\n this.isAlive = true;\n}\nAnimal.prototype.breathe = function() {\n console.log(`${this.name} дышит`);\n};\n\n// Конструктор-наследник\nfunction Dog(name, breed) {\n // Вызываем родительский конструктор\n Animal.call(this, name);\n this.breed = breed;\n}\n\n// Наследуем прототип\nDog.prototype = Object.create(Animal.prototype);\nDog.prototype.constructor = Dog;\n\n// Добавляем свой метод\nDog.prototype.bark = function() {\n console.log(`${this.name} гавкает!`);\n};\n\nconst rex = new Dog(\"Рекс\", \"Овчарка\");\nrex.breathe(); // \"Рекс дышит\"\nrex.bark(); // \"Рекс гавкает!\"\nconsole.log(rex instanceof Dog); // true\nconsole.log(rex instanceof Animal); // true","type":"unstyled","key":"7sod5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.4 Конструктор с подсчётом экземпляров","type":"header-three","key":"5f92a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1rrn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":93,"style":"ITALIC"},{"length":4,"offset":365,"style":"ITALIC"},{"length":27,"offset":400,"style":"ITALIC"}],"text":"function User(name) {\n this.name = name;\n User.instanceCount++;\n}\n\nUser.instanceCount = 0; // статическое свойство\n\nUser.prototype.getInfo = function() {\n return `${this.name} (пользователь ${this.constructor.instanceCount})`;\n};\n\nconst user1 = new User(\"Анна\");\nconst user2 = new User(\"Борис\");\nconst user3 = new User(\"Вика\");\n\nconsole.log(User.instanceCount); // 3\nconsole.log(user2.getInfo()); // \"Борис (пользователь 3)\"","type":"unstyled","key":"776q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Конструкторы для встроенных объектов","type":"header-two","key":"41bp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Даже встроенные объекты создаются через конструкторы.","type":"unstyled","key":"11b2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5nuqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":26,"offset":62,"style":"ITALIC"},{"length":5,"offset":117,"style":"ITALIC"},{"length":9,"offset":124,"style":"ITALIC"},{"length":11,"offset":192,"style":"ITALIC"},{"length":9,"offset":205,"style":"ITALIC"},{"length":12,"offset":265,"style":"ITALIC"},{"length":9,"offset":279,"style":"ITALIC"},{"length":7,"offset":335,"style":"ITALIC"},{"length":23,"offset":369,"style":"ITALIC"}],"text":"// Число\nconst num = new Number(42);\nconsole.log(typeof num); // \"object\" (не примитив!)\nconsole.log(num.valueOf()); // 42\n\n// Строка\nconst str = new String(\"hello\");\nconsole.log(typeof str); // \"object\"\n\n// Массив\nconst arr = new Array(1, 2, 3);\nconsole.log(arr); // [1, 2, 3]\n\n// Объект\nconst obj = new Object();\nobj.name = \"Анна\";\n\n// Дата\nconst date = new Date();\n\n// Регулярное выражение\nconst regex = new RegExp(\"\\\\d+\", \"g\");","type":"unstyled","key":"3psoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Но будьте осторожны: для чисел, строк и булевых значений обычно используют примитивы, а не конструкторы.","type":"unstyled","key":"85qbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ft6h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":12,"offset":96,"style":"ITALIC"},{"length":20,"offset":112,"style":"ITALIC"}],"text":"// Плохо (создаёт объект-обёртку)\nconst strObj = new String(\"hello\");\nif (strObj === \"hello\") { /* false! */ }\n\n// Хорошо (примитив)\nconst strPrim = \"hello\";","type":"unstyled","key":"f47o8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Подводные камни","type":"header-two","key":"8vn0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: Забытый new","type":"header-three","key":"p2qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это самая частая ошибка. Без new функция выполняется как обычная и создаёт глобальные переменные.","type":"unstyled","key":"5cc5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7m60g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":42,"style":"ITALIC"},{"length":13,"offset":97,"style":"ITALIC"},{"length":12,"offset":130,"style":"ITALIC"},{"length":41,"offset":169,"style":"ITALIC"}],"text":"function User(name) {\n this.name = name; // без new this = window\n}\n\nconst user = User(\"Анна\"); // забыли new\nconsole.log(user); // undefined\nconsole.log(window.name); // \"Анна\" (загрязнили глобальный объект!)","type":"unstyled","key":"efnq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"},{"length":1,"offset":22,"style":"BOLD"}],"text":"Защита от забытого new:","type":"unstyled","key":"a67fi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4l3uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":24,"style":"ITALIC"},{"length":31,"offset":153,"style":"ITALIC"},{"length":32,"offset":217,"style":"ITALIC"},{"length":16,"offset":283,"style":"ITALIC"}],"text":"function User(name) {\n // Проверка, вызвана ли функция через new\n if (!(this instanceof User)) {\n return new User(name);\n }\n this.name = name;\n}\n\n// Теперь оба варианта работают\nconst user1 = User(\"Анна\"); // работает (благодаря проверке)\nconst user2 = new User(\"Борис\"); // тоже работает","type":"unstyled","key":"copf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: Стрелочные функции не могут быть конструкторами","type":"header-three","key":"9cnf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3lb9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":104,"style":"ITALIC"}],"text":"const ArrowConstructor = (name) => {\n this.name = name;\n};\n\nconst user = new ArrowConstructor(\"Анна\"); // TypeError!","type":"unstyled","key":"49ma3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: this в конструкторе можно переопределить","type":"header-three","key":"7hqd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ec7ol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":134,"style":"ITALIC"}],"text":"function User(name) {\n this.name = name;\n return { different: \"object\" };\n}\n\nconst user = new User(\"Анна\");\nconsole.log(user.name); // undefined (вернулся другой объект)","type":"unstyled","key":"2r73v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Современные альтернативы конструкторам","type":"header-two","key":"4b3hb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.1 Фабричные функции (проще и безопаснее)","type":"header-three","key":"7f7qu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2o32g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":35,"style":"ITALIC"},{"length":17,"offset":223,"style":"ITALIC"}],"text":"function createUser(name, age) {\n // Нет new, нет this, нет prototype\n return {\n name,\n age,\n greet() {\n console.log(`Привет, ${this.name}`);\n }\n };\n}\n\nconst user = createUser(\"Анна\", 25);\nuser.greet(); // \"Привет, Анна\"","type":"unstyled","key":"aa8ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.2 Классы ES6 (стандарт сейчас)","type":"header-three","key":"49kbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"c640g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class User {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n \n greet() {\n console.log(`Привет, ${this.name}`);\n }\n}","type":"unstyled","key":"5ss4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.3 Object.create() (прототипное наследование в чистом виде)","type":"header-three","key":"3tk5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"87rl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":235,"style":"ITALIC"}],"text":"const userProto = {\n greet() {\n console.log(`Привет, ${this.name}`);\n }\n};\n\nfunction createUser(name) {\n const user = Object.create(userProto);\n user.name = name;\n return user;\n}\n\nconst user = createUser(\"Анна\");\nuser.greet(); // \"Привет, Анна\"","type":"unstyled","key":"af3oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Производительность: Конструкторы vs Фабрики","type":"header-two","key":"9g72r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"d77ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"ITALIC"},{"length":32,"offset":180,"style":"ITALIC"},{"length":44,"offset":317,"style":"ITALIC"},{"length":21,"offset":362,"style":"ITALIC"},{"length":17,"offset":384,"style":"ITALIC"},{"length":44,"offset":402,"style":"ITALIC"}],"text":"// Конструктор (быстрее для множества объектов)\nfunction UserConstructor(name) {\n this.name = name;\n}\nUserConstructor.prototype.greet = function() {\n console.log(this.name);\n};\n\n// Фабрика (медленнее, но проще)\nfunction createUserFactory(name) {\n return {\n name,\n greet() { console.log(this.name); }\n };\n}\n\n// Тест производительности (100000 объектов)\n// Конструктор: ~15ms\n// Фабрика: ~25ms\n// Разница есть, но для 99% случаев не важна","type":"unstyled","key":"3k15a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест конструктора","type":"header-two","key":"feg94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":77,"offset":3,"style":"BOLD"}],"text":"new создаёт объект, связывает прототип, вызывает конструктор, возвращает объект.","type":"ordered-list-item","key":"a8a9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Забытый new - классическая ошибка. Используйте защиту или фабрики.","type":"ordered-list-item","key":"262ju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Методы лучше добавлять в prototype - экономия памяти.","type":"ordered-list-item","key":"5esvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":10,"style":"BOLD"}],"text":"instanceof проверяет принадлежность к конструктору (по прототипу).","type":"ordered-list-item","key":"3k17e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Стрелочные функции не могут быть конструкторами.","type":"ordered-list-item","key":"9dubj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Классы ES6 - современный синтаксис для конструкторов.","type":"ordered-list-item","key":"dj3v8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Фабричные функции - проще и безопаснее, но чуть медленнее.","type":"ordered-list-item","key":"465ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"fl8h2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"eavqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function Rabbit(name) {\n this.name = name;\n}\nRabbit.prototype.sayHi = function() {\n console.log(this.name);\n};\n\nconst rabbit = new Rabbit(\"Банни\");\nconst rabbit2 = Rabbit(\"Банни\");\n\nconsole.log(rabbit);\nconsole.log(rabbit2);\nconsole.log(window.name);","type":"unstyled","key":"dd5ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ:","type":"unstyled","key":"s734"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"rabbit - Rabbit { name: \"Банни\" } (создан через new)","type":"unordered-list-item","key":"b25ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"rabbit2 - undefined (без new функция вернула undefined)","type":"unordered-list-item","key":"424kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"window.name - \"Банни\" (без new this = window, загрязнили глобальный объект)","type":"unordered-list-item","key":"fgno6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конструкторы и оператор new - это фундаментальная часть JavaScript. Даже если вы используете классы ES6, понимание того, как работают конструкторы, помогает писать более эффективный и безопасный код. А умение создавать свои конструкторы открывает дверь в мир объектно-ориентированного программирования в JavaScript. Стройте свои фабрики миров с умом!","type":"unstyled","key":"frd6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---------------------------------------------------------------------------------------","type":"unstyled","key":"723q0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---------------------------------------------------------------------------------------","type":"unstyled","key":"fsot6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мост над пропастью: Как опциональная цепочка ?. спасла миллионы строк кода","type":"header-two","key":"em9st"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь писали такой код?","type":"unstyled","key":"eadiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"47gp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const city = user && user.address && user.address.city;","type":"unstyled","key":"9df70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Или, что ещё хуже:","type":"unstyled","key":"d13pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f2n4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const userName = data && data.profile && data.profile.personal && data.profile.personal.name;","type":"unstyled","key":"9sirn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это называется \"лестница из &&\" или \"пирамида проверок\". Она защищает от ошибки Cannot read property 'city' of undefined, но выглядит ужасно. И вы пишете это снова, и снова, и снова.","type":"unstyled","key":"en7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаложаловать в мир опциональной цепочки ?. - оператора, который делает эти проверки красивыми, короткими и безопасными.","type":"unstyled","key":"ambt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Проблема: TypeError, который преследует каждого","type":"header-two","key":"6uh6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4njsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":66,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\"\n};\n\nconsole.log(user.address.city); // \uD83D\uDCA5 TypeError: Cannot read property 'city' of undefined","type":"unstyled","key":"am5er"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваше приложение падает. Пользователь видит белый экран. Вы ищете, где address стал undefined. Знакомо?","type":"unstyled","key":"c9e1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Старое решение - проверки с &&:","type":"unstyled","key":"7k44f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dp587"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":75,"style":"ITALIC"}],"text":"const city = user && user.address && user.address.city;\nconsole.log(city); // undefined (без ошибки)","type":"unstyled","key":"2efn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работает, но:","type":"unstyled","key":"bq9fc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем глубже вложенность, тем длиннее строка","type":"unordered-list-item","key":"52dij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Легко пропустить одну проверку","type":"unordered-list-item","key":"9u0l6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код становится шумным","type":"unordered-list-item","key":"5b2l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Опциональная цепочка: Кратчайший путь","type":"header-two","key":"dasoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Опциональная цепочка ?. позволяет читать свойство глубоко вложенного объекта без проверки каждого уровня. Если какая-то часть цепочки равна null или undefined, выражение возвращает undefined вместо ошибки.","type":"unstyled","key":"4alk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8kkls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":68,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\"\n};\n\nconsole.log(user?.address?.city); // undefined (без ошибки!)","type":"unstyled","key":"4ce6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Магия: ?. останавливает вычисление, как только встречает null или undefined.","type":"unstyled","key":"bgqb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Синтаксис: Три формы опциональной цепочки","type":"header-two","key":"2rm9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 obj?.prop - чтение свойства","type":"header-three","key":"b9hma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3tmmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":29,"style":"ITALIC"},{"length":80,"offset":46,"style":"ITALIC"}],"text":"const value = obj?.property;\n// Работает как:\n// const value = (obj === null || obj === undefined) ? undefined : obj.property;","type":"unstyled","key":"2p3ll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 obj?.[expr] - динамическое свойство","type":"header-three","key":"8v1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"abot7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const key = \"address\";\nconst city = user?.[key]?.city;","type":"unstyled","key":"a61n0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3 obj?.method() - вызов метода","type":"header-three","key":"6258o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6f3vn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":37,"style":"ITALIC"},{"length":54,"offset":81,"style":"ITALIC"},{"length":35,"offset":136,"style":"ITALIC"}],"text":"const result = user?.getAddress?.();\n// Если user === null/undefined → undefined\n// Если user.getAddress === null/undefined → undefined\n// Иначе вызывает user.getAddress()","type":"unstyled","key":"1tiek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Глубокое погружение: Как это работает","type":"header-two","key":"jvo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"lmua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":122,"style":"ITALIC"},{"length":38,"offset":197,"style":"ITALIC"},{"length":42,"offset":287,"style":"ITALIC"},{"length":12,"offset":409,"style":"ITALIC"}],"text":"const data = {\n user: {\n profile: {\n name: \"Анна\",\n address: {\n city: \"Москва\"\n }\n }\n }\n};\n\n// Без опциональной цепочки\nconst city1 = data.user.profile.address.city;\n\n// С опциональной цепочкой (безопасно)\nconst city2 = data?.user?.profile?.address?.city;\n\n// Что вернётся, если profile отсутствует?\nconst data2 = { user: {} };\nconst city3 = data2?.user?.profile?.address?.city; // undefined","type":"unstyled","key":"6oape"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно: ?. проверяет только ту часть, которая стоит перед ним. Часть после проверяется только если предыдущая существует.","type":"unstyled","key":"euop3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"46cn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"},{"length":33,"offset":37,"style":"ITALIC"},{"length":31,"offset":90,"style":"ITALIC"}],"text":"// Разница между:\nobj?.prop.method // prop проверяется, method — нет\nobj?.prop?.method // проверяются и prop, и method","type":"unstyled","key":"bgppq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Сравнение с традиционными подходами","type":"header-two","key":"6rp41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подход 1: Проверка через if","type":"header-three","key":"1k1fv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"anta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let city;\nif (user && user.address && user.address.city) {\n city = user.address.city;\n} else {\n city = undefined;\n}","type":"unstyled","key":"ene8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подход 2: Логическое И (&&)","type":"header-three","key":"9mm2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9jheh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const city = user && user.address && user.address.city;","type":"unstyled","key":"3v0g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подход 3: try-catch (никто так не делает)","type":"header-three","key":"evome"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dt98e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let city;\ntry {\n city = user.address.city;\n} catch {\n city = undefined;\n}","type":"unstyled","key":"c4rkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подход 4: Опциональная цепочка (победитель)","type":"header-three","key":"50gca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fuel4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const city = user?.address?.city;","type":"unstyled","key":"e6q1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Итог: Опциональная цепочка короче, чище и понятнее всех альтернатив.","type":"unstyled","key":"b129t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Практические примеры","type":"header-two","key":"auha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Работа с API","type":"header-three","key":"cmah2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"amp2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"},{"length":8,"offset":100,"style":"ITALIC"}],"text":"// До\nconst userName = response && response.data && response.data.user && response.data.user.name;\n\n// После\nconst userName = response?.data?.user?.name;","type":"unstyled","key":"8rgen"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Массивы","type":"header-three","key":"45hmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7odmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":86,"style":"ITALIC"},{"length":54,"offset":105,"style":"ITALIC"},{"length":11,"offset":203,"style":"ITALIC"},{"length":12,"offset":259,"style":"ITALIC"},{"length":12,"offset":315,"style":"ITALIC"}],"text":"const users = [\n { name: \"Анна\", address: { city: \"Москва\" } },\n { name: \"Борис\" } // нет address\n];\n\n// Безопасный доступ к элементу массива и его свойству\nconst firstCity = users[0]?.address?.city; // \"Москва\"\nconst secondCity = users[1]?.address?.city; // undefined\nconst tenthCity = users[9]?.address?.city; // undefined","type":"unstyled","key":"7s6ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.3 Вызов методов","type":"header-three","key":"a8bin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"fhequ"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":87,"style":"ITALIC"},{"length":11,"offset":154,"style":"ITALIC"},{"length":18,"offset":167,"style":"ITALIC"},{"length":12,"offset":261,"style":"ITALIC"}],"text":"const user = {\n name: \"Анна\",\n getAddress() {\n return { city: \"Москва\" };\n }\n};\n\n// Безопасный вызов метода\nconst city = user.getAddress?.()?.city; // \"Москва\"\n\n// Если метода нет\nconst user2 = { name: \"Борис\" };\nconst city2 = user2.getAddress?.()?.city; // undefined","type":"unstyled","key":"3s07a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.4 Динамические ключи","type":"header-three","key":"4jf0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"94p4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const key = \"address\";\nconst city = user?.[key]?.city;","type":"unstyled","key":"alnn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.5 Комбинация с nullish coalescing ??","type":"header-three","key":"2ssh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"a21fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":49,"style":"ITALIC"}],"text":"const userName = user?.profile?.name ?? \"Гость\";\n// Если user?.profile?.name === null/undefined → \"Гость\"","type":"unstyled","key":"ep9ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.6 React-компоненты","type":"header-three","key":"6f45s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jsx","type":"unstyled","key":"6k2l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":35,"style":"ITALIC"}],"text":"function UserProfile({ user }) {\n // Безопасно получаем имя\n const name = user?.profile?.name ?? \"Аноним\";\n \n return (\n

{name}

Город: {user?.address?.city ?? \"Не указан\"}

\n );\n}","type":"unstyled","key":"d7g7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Ограничения и подводные камни","type":"header-two","key":"2bvdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: Нельзя использовать для присваивания","type":"header-three","key":"5t7nt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ab5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":14,"offset":64,"style":"ITALIC"}],"text":"// ❌ Ошибка! Нельзя присваивать через ?.\nuser?.name = \"Борис\";\n\n// ✅ Правильно\nif (user) {\n user.name = \"Борис\";\n}","type":"unstyled","key":"c7ghd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: Короткое замыкание","type":"header-three","key":"195s1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1ukob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":47,"style":"ITALIC"},{"length":13,"offset":102,"style":"ITALIC"}],"text":"let user = null;\nlet x = 0;\n\nuser?.sayHi(x++); // user === null → x++ не выполняется!\nconsole.log(x); // 0 (а не 1)","type":"unstyled","key":"bb5hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: Не работает с примитивами (кроме null/undefined)","type":"header-three","key":"6139j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2n93l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":46,"style":"ITALIC"},{"length":16,"offset":67,"style":"ITALIC"},{"length":12,"offset":116,"style":"ITALIC"},{"length":12,"offset":165,"style":"ITALIC"}],"text":"const num = 42;\nconsole.log(num?.toString()); // \"42\" (работает!)\n\n// Но осторожно:\nconsole.log(null?.toString()); // undefined\nconsole.log(undefined?.toString()); // undefined","type":"unstyled","key":"c4sih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #4: Не спасает от ошибок в самом конце","type":"header-three","key":"dvdpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1atng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":31,"style":"ITALIC"},{"length":47,"offset":90,"style":"ITALIC"},{"length":14,"offset":139,"style":"ITALIC"},{"length":12,"offset":176,"style":"ITALIC"}],"text":"const user = { name: \"Анна\" };\n// ❌ Всё равно ошибка, если метода нет\nuser?.getAddress(); // TypeError: user.getAddress is not a function\n\n// ✅ Правильно\nuser?.getAddress?.(); // undefined","type":"unstyled","key":"b604c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #5: Не работает с цепочкой вызовов функций","type":"header-three","key":"1qsbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5190j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"},{"length":41,"offset":51,"style":"ITALIC"}],"text":"// ❌ Не сработает\nconst result = getUser()?.name;\n\n// ✅ Нужно присвоить результат переменной\nconst user = getUser();\nconst name = user?.name;","type":"unstyled","key":"ujvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Реальные кейсы из продакшена","type":"header-two","key":"9tgst"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 Обработка ответа сервера","type":"header-three","key":"9pga6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9cnlf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":154,"style":"ITALIC"}],"text":"async function fetchUserData(userId) {\n try {\n const response = await fetch(`/api/users/${userId}`);\n const data = await response.json();\n \n // Безопасный доступ к глубоким данным\n const userName = data?.user?.personalInfo?.name ?? \"Неизвестно\";\n const userEmail = data?.user?.contact?.email ?? \"email@example.com\";\n const userRoles = data?.user?.permissions?.roles ?? [];\n \n return { userName, userEmail, userRoles };\n } catch (error) {\n console.error(\"Ошибка загрузки:\", error);\n return null;\n }\n}","type":"unstyled","key":"eiudh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 Работа с DOM","type":"header-three","key":"1719e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"achsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"},{"length":15,"offset":118,"style":"ITALIC"},{"length":21,"offset":199,"style":"ITALIC"}],"text":"// Старый способ\nconst buttonText = document.querySelector('.btn') \n && document.querySelector('.btn').textContent;\n\n// Новый способ\nconst buttonText = document.querySelector('.btn')?.textContent;\n\n// С цепочкой методов\nconst parentId = document.querySelector('.modal')?.parentElement?.id;","type":"unstyled","key":"9gf9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.3 Конфигурация приложения","type":"header-three","key":"fv8qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ero9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":83,"style":"ITALIC"}],"text":"const config = {\n api: {\n endpoints: {\n users: \"/api/users\"\n }\n }\n};\n\n// Безопасное получение настроек\nconst apiUrl = config?.api?.baseUrl ?? \"https://default.api.com\";\nconst usersEndpoint = config?.api?.endpoints?.users ?? \"/users\";\nconst timeout = config?.api?.timeout ?? 5000;","type":"unstyled","key":"4gavm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.4 Redux/Vuex стейт","type":"header-three","key":"h3ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4ik0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"},{"length":26,"offset":116,"style":"ITALIC"},{"length":14,"offset":189,"style":"ITALIC"}],"text":"// Без опциональной цепочки\nconst userName = state && state.user && state.user.profile && state.user.profile.name;\n\n// С опциональной цепочкой\nconst userName = state?.user?.profile?.name;\n\n// В редьюсере\nfunction userReducer(state = initialState, action) {\n switch (action.type) {\n case 'UPDATE_USER':\n return {\n ...state,\n user: {\n ...state?.user,\n profile: {\n ...state?.user?.profile,\n name: action.payload.name\n }\n }\n };\n default:\n return state;\n }\n}","type":"unstyled","key":"165ma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Опциональная цепочка в разных средах","type":"header-two","key":"5vvb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузеры","type":"header-three","key":"79if6"},{"data":{"image":{"id":"69db532d6a5aac3c679a1bae"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"606ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ah35r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js","type":"header-three","key":"3pfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bash","type":"unstyled","key":"32c61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"ITALIC"},{"length":17,"offset":63,"style":"ITALIC"}],"text":"# Node.js 14+ поддерживает опциональную цепочку\nnode --version # 14.0.0 или выше","type":"unstyled","key":"tmau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Транспиляция (Babel)","type":"header-three","key":"ahjp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"json","type":"unstyled","key":"6oa3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"ITALIC"}],"text":"// .babelrc\n{\n \"plugins\": [\"@babel/plugin-proposal-optional-chaining\"]\n}","type":"unstyled","key":"bhs3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Опциональная цепочка vs Другие подходы","type":"header-two","key":"btg06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8jtqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":38,"style":"ITALIC"},{"length":34,"offset":119,"style":"ITALIC"},{"length":18,"offset":184,"style":"ITALIC"},{"length":21,"offset":257,"style":"ITALIC"}],"text":"const obj = { a: { b: { c: 42 } } };\n\n// Lodash get (если используете библиотеку)\nconst value1 = _.get(obj, 'a.b.c');\n\n// Опциональная цепочка (нативный)\nconst value2 = obj?.a?.b?.c;\n\n// Ручная проверка\nconst value3 = obj && obj.a && obj.a.b && obj.a.b.c;\n\n// try-catch (абсурд)\nlet value4;\ntry { value4 = obj.a.b.c; } catch { value4 = undefined; }","type":"unstyled","key":"4r71g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Плюсы опциональной цепочки:","type":"unstyled","key":"en7l2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нативная поддержка (без библиотек)","type":"unordered-list-item","key":"eci9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Короткий синтаксис","type":"unordered-list-item","key":"2eb9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работает с методами","type":"unordered-list-item","key":"49sqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Высокая производительность","type":"unordered-list-item","key":"cbrcr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Минусы:","type":"unstyled","key":"26s97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не работает для присваивания","type":"unordered-list-item","key":"dqd42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Требует современный браузер/транспиляцию","type":"unordered-list-item","key":"4r975"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Комбинация с другими операторами","type":"header-two","key":"25igj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"?. + ?? (идеальная пара)","type":"header-three","key":"a99nf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2hsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":0,"style":"ITALIC"},{"length":31,"offset":110,"style":"ITALIC"}],"text":"// Значение по умолчанию, если что-то в цепочке отсутствует\nconst userName = user?.profile?.name ?? \"Гость\";\n\n// Или для более сложной логики\nconst userAge = user?.profile?.age ?? (defaultAge > 0 ? defaultAge : 18);","type":"unstyled","key":"691i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"?. + || (будьте осторожны)","type":"header-three","key":"mq9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2nrhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"},{"length":42,"offset":73,"style":"ITALIC"}],"text":"// Плохо (0, \"\" заменятся)\nconst name = user?.profile?.name || \"Гость\";\n\n// Хорошо (заменяет только null/undefined)\nconst name = user?.profile?.name ?? \"Гость\";","type":"unstyled","key":"ed45h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"?. в шаблонных строках","type":"header-three","key":"95v60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8v2c3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const message = `Пользователь: ${user?.profile?.name ?? \"Неизвестен\"}, \n Город: ${user?.address?.city ?? \"Не указан\"}`;","type":"unstyled","key":"sp56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Продвинутые техники","type":"header-two","key":"7iu2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.1 Своя реализация (для понимания)","type":"header-three","key":"9o9q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"720sj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":363,"style":"ITALIC"},{"length":12,"offset":426,"style":"ITALIC"}],"text":"function optionalChaining(obj, path) {\n const parts = path.split('.');\n let current = obj;\n \n for (const part of parts) {\n if (current === null || current === undefined) {\n return undefined;\n }\n current = current[part];\n }\n \n return current;\n}\n\nconst user = { profile: { name: \"Анна\" } };\nconsole.log(optionalChaining(user, \"profile.name\")); // \"Анна\"\nconsole.log(optionalChaining(user, \"address.city\")); // undefined","type":"unstyled","key":"ffi7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.2 Условный рендеринг в React","type":"header-three","key":"dcc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jsx","type":"unstyled","key":"aah38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function UserCard({ user }) {\n return (\n

{user?.name ?? \"Аноним\"}

{user?.bio?.short ?? \"Нет описания\"}

\n {user?.isPremium && Premium}\n

\n Посты: {user?.stats?.postsCount ?? 0}\n Подписчики: {user?.stats?.followers ?? 0}\n

\n );\n}","type":"unstyled","key":"4corb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест опциональной цепочки","type":"header-two","key":"4jnqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":24,"offset":14,"style":"BOLD"}],"text":"Используйте ?. для безопасного доступа к глубоко вложенным свойствам.","type":"ordered-list-item","key":"4fnji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"},{"length":17,"offset":17,"style":"BOLD"}],"text":"Не используйте ?. для присваивания - это не работает.","type":"ordered-list-item","key":"fpmrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Комбинируйте с ?? для значений по умолчанию.","type":"ordered-list-item","key":"2akep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Помните про короткое замыкание - правая часть может не выполниться.","type":"ordered-list-item","key":"8fv1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Проверяйте методы перед вызовом - obj?.method?.().","type":"ordered-list-item","key":"32g9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Не злоупотребляйте - если структура данных всегда определена, ?. не нужен.","type":"ordered-list-item","key":"688h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"4kgg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"b7du3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const data = {\n user: null\n};\n\nconsole.log(data?.user?.name);\nconsole.log(data?.user?.getName?.());\nconsole.log(data?.user?.address?.city ?? \"Unknown\");\n\nlet x = 0;\nconst result = data?.user?.getName(x++);\nconsole.log(x);","type":"unstyled","key":"9691q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ:","type":"unstyled","key":"6gplu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"undefined (user = null)","type":"unordered-list-item","key":"41o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"undefined (метода нет)","type":"unordered-list-item","key":"dfcqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"Unknown\" (nullish coalescing)","type":"unordered-list-item","key":"bgphc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"0 (из-за короткого замыкания x++ не выполнился)","type":"unordered-list-item","key":"cqq0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Опциональная цепочка - это не просто синтаксический сахар. Это инструмент, который делает код безопаснее и читаемее. Она позволяет забыть о бесконечных проверках на null и undefined и сосредоточиться на реальной логике. ","type":"unstyled","key":"ck185"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"205ja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------","type":"unstyled","key":"8n8s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Секретные ключи: Почему Symbol - самый недооценённый тип данных в JavaScript","type":"header-two","key":"8r052"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы знаете string, number, boolean, object, undefined, null, bigint. Но есть ещё один тип. Таинственный. Скрытый. Многие о нём слышали, но почти никто не использует.","type":"unstyled","key":"1lto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":11,"style":"BOLD"}],"text":"Встречайте Symbol - примитивный тип данных, который появился в ES6 и изменил правила игры. Символы уникальны, невидимы в циклах и идеальны для создания приватных свойств. Они - секретные ключи от ваших объектов.","type":"unstyled","key":"fr9se"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы раскроем все тайны символов и покажем, где они действительно незаменимы.","type":"unstyled","key":"48fid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Что такое Symbol?","type":"header-two","key":"2aq31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol - это уникальный и неизменяемый примитив, который часто используют как идентификатор для свойств объектов.","type":"unstyled","key":"fch4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2egcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":75,"style":"ITALIC"},{"length":11,"offset":137,"style":"ITALIC"}],"text":"const sym1 = Symbol();\nconst sym2 = Symbol();\n\nconsole.log(sym1 === sym2); // false (каждый символ уникален)\nconsole.log(typeof sym1); // \"symbol\"","type":"unstyled","key":"f7asc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Главное свойство: каждый символ уникален. Даже если создать два символа с одинаковым описанием, они будут разными.","type":"unstyled","key":"4cbgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2qp5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":83,"style":"ITALIC"}],"text":"const sym1 = Symbol(\"id\");\nconst sym2 = Symbol(\"id\");\n\nconsole.log(sym1 === sym2); // false (разные символы!)","type":"unstyled","key":"6ss3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Зачем нужны символы? (Мотивация)","type":"header-two","key":"beic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что вы пишете библиотеку, которая добавляет методы к объектам. Как избежать конфликта имён с другими библиотеками?","type":"unstyled","key":"b3fcp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1ugqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"},{"length":45,"offset":73,"style":"ITALIC"},{"length":20,"offset":122,"style":"ITALIC"},{"length":12,"offset":203,"style":"ITALIC"}],"text":"// Ваша библиотека\nfunction myLibrary(obj) {\n obj.id = \"myLibrary-123\"; // Ой! А если у объекта уже есть свойство id?\n}\n\n// Другая библиотека\nfunction otherLibrary(obj) {\n obj.id = \"otherLibrary-456\"; // Конфликт!\n}","type":"unstyled","key":"859ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: символы.","type":"unstyled","key":"2a6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"62ff1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":96,"style":"ITALIC"},{"length":60,"offset":135,"style":"ITALIC"},{"length":17,"offset":238,"style":"ITALIC"}],"text":"const MY_ID = Symbol(\"myLibraryId\");\n\nfunction myLibrary(obj) {\n obj[MY_ID] = \"myLibrary-123\"; // Никто не создаст такой же символ\n}\n\n// Даже если другой символ назовётся так же, он будет другим\nconst ANOTHER_ID = Symbol(\"myLibraryId\"); // другой символ!","type":"unstyled","key":"vcla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Создание символов","type":"header-two","key":"8kefl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1 Базовый символ","type":"header-three","key":"ddoh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"54t46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":40,"style":"ITALIC"}],"text":"const sym = Symbol();\nconsole.log(sym); // Symbol()","type":"unstyled","key":"2b8kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2 Символ с описанием (для отладки)","type":"header-three","key":"17nkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3k63g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":49,"style":"ITALIC"},{"length":21,"offset":98,"style":"ITALIC"}],"text":"const sym = Symbol(\"user.id\");\nconsole.log(sym); // Symbol(user.id)\nconsole.log(sym.description); // \"user.id\" (ES2019)","type":"unstyled","key":"foh39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3 Глобальные символы (реестр)","type":"header-three","key":"ct7fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2vt0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"},{"length":30,"offset":182,"style":"ITALIC"},{"length":27,"offset":214,"style":"ITALIC"},{"length":14,"offset":281,"style":"ITALIC"}],"text":"// Создание или получение из глобального реестра\nconst globalSym = Symbol.for(\"app.theme\");\nconst sameGlobalSym = Symbol.for(\"app.theme\");\n\nconsole.log(globalSym === sameGlobalSym); // true (один и тот же символ)\n\n// Получить ключ из реестра\nconsole.log(Symbol.keyFor(globalSym)); // \"app.theme\"","type":"unstyled","key":"a76f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Разница:","type":"unstyled","key":"6li9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol(\"key\") - уникальный локальный символ","type":"unordered-list-item","key":"8uhsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol.for(\"key\") - глобальный символ (один на всю программу)","type":"unordered-list-item","key":"bo758"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Символы как ключи объектов","type":"header-two","key":"8q6uh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Символы могут быть ключами объектов (наравне со строками).","type":"unstyled","key":"91snj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"biurn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":71,"style":"ITALIC"},{"length":8,"offset":117,"style":"ITALIC"},{"length":31,"offset":149,"style":"ITALIC"}],"text":"const id = Symbol(\"id\");\nconst user = {\n name: \"Анна\",\n [id]: 12345 // символ как ключ\n};\n\nconsole.log(user[id]); // 12345\nconsole.log(user.id); // undefined (обычное свойство)","type":"unstyled","key":"8l8cf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Особенность: свойства-символы не появляются в обычных итерациях.","type":"unstyled","key":"347j4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"93tr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":139,"style":"ITALIC"},{"length":15,"offset":212,"style":"ITALIC"},{"length":27,"offset":264,"style":"ITALIC"},{"length":47,"offset":293,"style":"ITALIC"},{"length":19,"offset":389,"style":"ITALIC"},{"length":34,"offset":457,"style":"ITALIC"}],"text":"const sym = Symbol(\"secret\");\nconst obj = {\n name: \"Анна\",\n age: 25,\n [sym]: \"скрытое значение\"\n};\n\nconsole.log(Object.keys(obj)); // [\"name\", \"age\"] (символ не попал)\nconsole.log(Object.values(obj)); // [\"Анна\", 25]\nconsole.log(JSON.stringify(obj)); // {\"name\":\"Анна\",\"age\":25}\n\n// Но символы доступны через специальные методы\nconsole.log(Object.getOwnPropertySymbols(obj)); // [Symbol(secret)]\nconsole.log(Reflect.ownKeys(obj)); // [\"name\", \"age\", Symbol(secret)]","type":"unstyled","key":"5o26b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Где символы незаменимы","type":"header-two","key":"fml48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Скрытые метаданные","type":"header-three","key":"c5icq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"41k70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":171,"style":"ITALIC"},{"length":18,"offset":241,"style":"ITALIC"},{"length":31,"offset":261,"style":"ITALIC"},{"length":16,"offset":323,"style":"ITALIC"}],"text":"const user = { name: \"Анна\" };\nconst createdAt = Symbol(\"createdAt\");\nconst updatedAt = Symbol(\"updatedAt\");\n\nuser[createdAt] = Date.now();\nuser[updatedAt] = Date.now();\n\n// Обычные методы не видят символы\nconsole.log(JSON.stringify(user)); // {\"name\":\"Анна\"}\n\n// Но мы можем к ним обратиться\nconsole.log(user[createdAt]); // 1672531200000","type":"unstyled","key":"8qi0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Избегание конфликтов в библиотеках","type":"header-three","key":"2slma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"eroio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"},{"length":41,"offset":140,"style":"ITALIC"},{"length":17,"offset":221,"style":"ITALIC"},{"length":17,"offset":322,"style":"ITALIC"}],"text":"// Библиотека 1\nconst _internal = Symbol(\"internal\");\nclass Library1 {\n constructor() {\n this[_internal] = { version: \"1.0.0\" };\n }\n}\n\n// Библиотека 2 (использует тот же класс)\nconst _internal2 = Symbol(\"internal\"); // другой символ!\nclass Library2 {\n enhance(obj) {\n obj[_internal2] = { enhanced: true };\n }\n}\n\n// Конфликта нет!","type":"unstyled","key":"d37qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 Встроенные символы (Symbol.*)","type":"header-three","key":"ftmpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript предоставляет встроенные символы для настройки поведения объектов.","type":"unstyled","key":"do2qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol.iterator - делаем объект итерируемым","type":"header-three","key":"85a6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"915od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":363,"style":"ITALIC"}],"text":"const range = {\n from: 1,\n to: 5,\n \n [Symbol.iterator]() {\n let current = this.from;\n const last = this.to;\n \n return {\n next() {\n if (current <= last) {\n return { value: current++, done: false };\n }\n return { value: undefined, done: true };\n }\n };\n }\n};\n\nfor (const num of range) {\n console.log(num); // 1, 2, 3, 4, 5\n}","type":"unstyled","key":"ci18b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol.toStringTag - кастомное строковое представление","type":"header-three","key":"aspud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"80jg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":159,"style":"ITALIC"}],"text":"class MyClass {\n get [Symbol.toStringTag]() {\n return \"MyCustomClass\";\n }\n}\n\nconst obj = new MyClass();\nconsole.log(Object.prototype.toString.call(obj)); // \"[object MyCustomClass]\"","type":"unstyled","key":"cgr0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol.toPrimitive - контроль преобразования типов","type":"header-three","key":"db7q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f9uar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":248,"style":"ITALIC"},{"length":5,"offset":293,"style":"ITALIC"},{"length":9,"offset":326,"style":"ITALIC"}],"text":"const obj = {\n value: 42,\n \n [Symbol.toPrimitive](hint) {\n if (hint === \"string\") {\n return `Значение: ${this.value}`;\n }\n if (hint === \"number\") {\n return this.value;\n }\n return null;\n }\n};\n\nconsole.log(String(obj)); // \"Значение: 42\"\nconsole.log(+obj); // 42\nconsole.log(obj + \"\"); // \"null\"","type":"unstyled","key":"3pvoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol.hasInstance - кастомный instanceof","type":"header-three","key":"e7tnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9j75s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":137,"style":"ITALIC"}],"text":"class MyArray {\n static [Symbol.hasInstance](instance) {\n return Array.isArray(instance);\n }\n}\n\nconsole.log([] instanceof MyArray); // true (хотя [] не создан через MyArray!)","type":"unstyled","key":"169ls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Полный список встроенных символов","type":"header-two","key":"2pgln"},{"data":{"image":{"id":"69db5486de38c6216277ab2e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5qo7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3k310"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Реальные паттерны использования","type":"header-two","key":"cv0il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Приватные поля (до реальных приватных полей #)","type":"header-three","key":"4bkhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7gml9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":589,"style":"ITALIC"},{"length":23,"offset":632,"style":"ITALIC"},{"length":28,"offset":697,"style":"ITALIC"}],"text":"const _balance = Symbol(\"balance\");\nconst _validate = Symbol(\"validate\");\n\nclass BankAccount {\n constructor(initialBalance) {\n this[_balance] = initialBalance;\n }\n \n [_validate](amount) {\n if (amount < 0) throw new Error(\"Сумма не может быть отрицательной\");\n if (amount > this[_balance]) throw new Error(\"Недостаточно средств\");\n }\n \n withdraw(amount) {\n this[_validate](amount);\n this[_balance] -= amount;\n return this[_balance];\n }\n \n getBalance() {\n return this[_balance];\n }\n}\n\nconst account = new BankAccount(1000);\nconsole.log(account.getBalance()); // 1000\nconsole.log(account._balance); // undefined (не видно)\nconsole.log(account[Symbol(\"balance\")]); // undefined (другой символ)","type":"unstyled","key":"46at8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Константы enum (без конфликтов)","type":"header-three","key":"9h9j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2kfrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":341,"style":"ITALIC"},{"length":70,"offset":354,"style":"ITALIC"}],"text":"const Colors = {\n RED: Symbol(\"red\"),\n GREEN: Symbol(\"green\"),\n BLUE: Symbol(\"blue\")\n};\n\nfunction getColorName(color) {\n switch (color) {\n case Colors.RED: return \"Красный\";\n case Colors.GREEN: return \"Зелёный\";\n case Colors.BLUE: return \"Синий\";\n default: return \"Неизвестный\";\n }\n}\n\nconsole.log(getColorName(Colors.RED)); // \"Красный\"\n// Никто случайно не сравнит Colors.RED со строкой \"red\" (разные типы)","type":"unstyled","key":"4ctrl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Метапрограммирование (перехват операций)","type":"header-three","key":"17b1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ejdlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":248,"style":"ITALIC"}],"text":"const handler = {\n get(target, prop, receiver) {\n if (prop === Symbol.toPrimitive) {\n return () => \"Перехвачено!\";\n }\n return Reflect.get(target, prop, receiver);\n }\n};\n\nconst obj = new Proxy({}, handler);\nconsole.log(String(obj)); // \"Перехвачено!\"","type":"unstyled","key":"3ej8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.4 Фреймворки и DI контейнеры","type":"header-three","key":"b2sj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4o23f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":634,"style":"ITALIC"}],"text":"const INJECTION_KEY = Symbol(\"di:injection\");\n\nclass Container {\n constructor() {\n this[INJECTION_KEY] = new Map();\n }\n \n register(token, factory) {\n this[INJECTION_KEY].set(token, factory);\n }\n \n resolve(token) {\n const factory = this[INJECTION_KEY].get(token);\n if (!factory) throw new Error(`No registration for ${String(token)}`);\n return factory();\n }\n}\n\nconst USER_SERVICE = Symbol(\"UserService\");\nconst container = new Container();\ncontainer.register(USER_SERVICE, () => ({ getUsers: () => [\"Анна\", \"Борис\"] }));\n\nconst userService = container.resolve(USER_SERVICE);\nconsole.log(userService.getUsers()); // [\"Анна\", \"Борис\"]","type":"unstyled","key":"jn5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Подводные камни","type":"header-two","key":"84k6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: Символы не преобразуются в строки автоматически","type":"header-three","key":"e335e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4djms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":57,"style":"ITALIC"},{"length":12,"offset":114,"style":"ITALIC"},{"length":23,"offset":166,"style":"ITALIC"},{"length":15,"offset":233,"style":"ITALIC"}],"text":"const sym = Symbol(\"id\");\nconsole.log(\"Symbol: \" + sym); // TypeError: Cannot convert a Symbol value to a string\n\n// Правильно\nconsole.log(`Symbol: ${String(sym)}`); // \"Symbol: Symbol(id)\"\nconsole.log(`Symbol: ${sym.description}`); // \"Symbol: id\"","type":"unstyled","key":"er55k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: Символы не сериализуются в JSON","type":"header-three","key":"cda7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3mtne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":99,"style":"ITALIC"}],"text":"const obj = {\n name: \"Анна\",\n [Symbol(\"secret\")]: \"секрет\"\n};\n\nconsole.log(JSON.stringify(obj)); // {\"name\":\"Анна\"} (символ пропал)","type":"unstyled","key":"6glq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: Object.assign копирует символы (но осторожно)","type":"header-three","key":"169eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"31afc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":119,"style":"ITALIC"},{"length":60,"offset":141,"style":"ITALIC"},{"length":5,"offset":234,"style":"ITALIC"}],"text":"const sym = Symbol(\"test\");\nconst obj1 = { [sym]: 42 };\nconst obj2 = Object.assign({}, obj1);\n\nconsole.log(obj2[sym]); // 42 (скопировался)\n\n// Но в отличие от обычных свойств, символы не перечисляются\nconsole.log(Object.keys(obj2)); // []","type":"unstyled","key":"f8l1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #4: Глобальные символы не собираются мусором","type":"header-three","key":"67obv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"au8ju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"ITALIC"},{"length":47,"offset":50,"style":"ITALIC"}],"text":"// Symbol.for создаёт символ в глобальном реестре\n// Он живёт, пока живёт реестр (всё приложение)\nSymbol.for(\"never-garbage-collected\");","type":"unstyled","key":"8uuee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Symbol vs другие подходы","type":"header-two","key":"etk9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol vs String как ключи","type":"header-three","key":"3ud3c"},{"data":{"image":{"id":"69db5443f27834023ce52354"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bqr82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4qn3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol vs WeakMap (для приватных данных)","type":"header-three","key":"eqd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3pjnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"},{"length":29,"offset":134,"style":"ITALIC"}],"text":"// Symbol (простой, но обходим)\nconst _secret = Symbol(\"secret\");\nclass User {\n constructor(name) {\n this[_secret] = name;\n }\n}\n\n// WeakMap (более защищённый)\nconst secrets = new WeakMap();\nclass User2 {\n constructor(name) {\n secrets.set(this, name);\n }\n getName() {\n return secrets.get(this);\n }\n}","type":"unstyled","key":"64dr0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Производительность","type":"header-two","key":"3s65i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Символы очень быстрые. Их использование практически не влияет на производительность.","type":"unstyled","key":"5vdmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2url6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"},{"length":8,"offset":178,"style":"ITALIC"},{"length":28,"offset":370,"style":"ITALIC"}],"text":"// Тест (условный)\nconsole.time(\"string-key\");\nfor (let i = 0; i < 1000000; i++) {\n const obj = {};\n obj[\"key\"] = i;\n const val = obj[\"key\"];\n}\nconsole.timeEnd(\"string-key\"); // ~15ms\n\nconsole.time(\"symbol-key\");\nconst sym = Symbol(\"key\");\nfor (let i = 0; i < 1000000; i++) {\n const obj = {};\n obj[sym] = i;\n const val = obj[sym];\n}\nconsole.timeEnd(\"symbol-key\"); // ~15ms (такая же скорость)","type":"unstyled","key":"ba1dp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Когда использовать Symbol?","type":"header-two","key":"2il75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Хорошие кандидаты:","type":"header-three","key":"433dp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Уникальные идентификаторы для свойств (особенно в библиотеках)","type":"unordered-list-item","key":"8vj7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Мета-свойства, которые не должны мешать обычной итерации","type":"unordered-list-item","key":"1mqct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Внутренние флаги и состояния в классах","type":"unordered-list-item","key":"8g4j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Константы enum (избегание конфликтов)","type":"unordered-list-item","key":"e1jie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Кастомизация поведения объектов (через встроенные символы)","type":"unordered-list-item","key":"b8a8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Плохие кандидаты:","type":"header-three","key":"c9237"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Данные, которые нужно сериализовать в JSON","type":"unordered-list-item","key":"e18d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Свойства, которые должны быть видны в Object.keys","type":"unordered-list-item","key":"36dmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Простые случаи, когда строка подойдёт (не усложняйте)","type":"unordered-list-item","key":"6hg6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест символов","type":"header-two","key":"cqb33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Symbol - уникальный примитив - два символа никогда не равны.","type":"ordered-list-item","key":"rbkt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Символы не видны в обычных итерациях - идеальны для метаданных.","type":"ordered-list-item","key":"48p3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Symbol.for() создаёт глобальные символы (один на всю программу).","type":"ordered-list-item","key":"bvvh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Встроенные символы (Symbol.iterator, Symbol.toPrimitive) управляют поведением объектов.","type":"ordered-list-item","key":"b8m52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Не сериализуются в JSON - помните об этом.","type":"ordered-list-item","key":"buv4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Идеальны для констант enum - избегают конфликтов.","type":"ordered-list-item","key":"1ho92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Не для всего - если нужна сериализация, используйте строки.","type":"ordered-list-item","key":"do1l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"dh45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4efbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const sym1 = Symbol(\"id\");\nconst sym2 = Symbol(\"id\");\nconst sym3 = Symbol.for(\"id\");\nconst sym4 = Symbol.for(\"id\");\n\nconsole.log(sym1 === sym2);\nconsole.log(sym3 === sym4);\nconsole.log(sym1 === sym3);\n\nconst obj = {\n [sym1]: \"value1\",\n id: \"value2\"\n};\n\nconsole.log(Object.keys(obj));\nconsole.log(Object.getOwnPropertySymbols(obj));\nconsole.log(JSON.stringify(obj));","type":"unstyled","key":"d8mbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ:","type":"unstyled","key":"b704g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"false (разные локальные символы)","type":"unordered-list-item","key":"32m6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"true (один глобальный символ)","type":"unordered-list-item","key":"7ajfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"false (локальный vs глобальный)","type":"unordered-list-item","key":"bppgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[\"id\"] (только строковый ключ)","type":"unordered-list-item","key":"a1780"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[Symbol(id), Symbol(id)] (два символа)","type":"unordered-list-item","key":"fsfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\"id\":\"value2\"} (символы не попали)","type":"unordered-list-item","key":"2r0bt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol - это тайное оружие JavaScript. Оно редко нужно, но когда нужно — незаменимо. Если вы пишете библиотеку, фреймворк или работаете с метапрограммированием, символы станут вашими лучшими друзьями. В обычном прикладном коде они встречаются реже, но знание о них делает вас более глубоким разработчиком. Используйте символы с умом, и ваш код станет надёжнее и чище.","type":"unstyled","key":"6qpmi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------------------","type":"unstyled","key":"6k4kp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--------------------------------------------------------------------------------------------","type":"unstyled","key":"2d6kf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Алхимия типов: Как JavaScript превращает объекты в примитивы (и почему это важно)","type":"header-two","key":"91vbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь складывали два объекта? Или сравнивали их с числом? Или выводили в консоль и получали [object Object]?","type":"unstyled","key":"8t398"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript - мастер превращений. Когда он встречает объект там, где ожидается число, строка или булево значение, он запускает сложный механизм алхимического преобразования. Этот механизм скрыт от глаз, но управляет поведением вашего кода каждый день.","type":"unstyled","key":"ct1vj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы заглянем за кулисы и узнаем, как объекты становятся примитивами, как управлять этим процессом и почему [] + [] возвращает пустую строку.","type":"unstyled","key":"50eu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. Зачем вообще преобразовывать объекты?","type":"header-two","key":"56rb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript - язык с динамической типизацией. Он постоянно приводит значения к нужным типам:","type":"unstyled","key":"e3atf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3p53n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":55,"style":"ITALIC"},{"length":29,"offset":127,"style":"ITALIC"},{"length":40,"offset":184,"style":"ITALIC"}],"text":"const obj = { value: 42 };\n\nconsole.log(obj + 10); // \"[object Object]10\" (объект стал строкой)\nconsole.log(obj - 10); // NaN (попытка стать числом)\nconsole.log(obj == true); // false (объект сравнивается с булевым)","type":"unstyled","key":"50bo1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В каждой из этих операций JavaScript запускает скрытый механизм преобразования объекта в примитив. Понимание этого механизма помогает писать предсказуемый код и создавать объекты с кастомным поведением.","type":"unstyled","key":"1kif2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. Три хинта: string, number, default","type":"header-two","key":"bn88v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У преобразования объектов есть три \"подсказки\" (hints), которые говорят JavaScript, какой тип ожидается:","type":"unstyled","key":"et2a0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 \"string\" - ожидается строка","type":"header-three","key":"dlokt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ad4nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"ITALIC"},{"length":23,"offset":75,"style":"ITALIC"},{"length":32,"offset":121,"style":"ITALIC"},{"length":18,"offset":176,"style":"ITALIC"},{"length":30,"offset":217,"style":"ITALIC"}],"text":"// Операции, которые вызывают string-преобразование:\nalert(obj); // alert ожидает строку\nString(obj); // явное преобразование в строку\nobj + \"hello\"; // плюс со строкой\nobj.property; // не вызывает преобразование!","type":"unstyled","key":"37huo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.2 \"number\" - ожидается число","type":"header-three","key":"1k13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"anjh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"ITALIC"},{"length":23,"offset":69,"style":"ITALIC"},{"length":15,"offset":115,"style":"ITALIC"},{"length":26,"offset":153,"style":"ITALIC"},{"length":24,"offset":202,"style":"ITALIC"},{"length":25,"offset":249,"style":"ITALIC"}],"text":"// Операции, вызывающие number-преобразование:\nNumber(obj); // явное преобразование\n+obj; // унарный плюс\nobj * 5; // математические операции\nobj > 10; // сравнения (кроме ===)\nMath.sqrt(obj); // математические функции","type":"unstyled","key":"3endv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.3 \"default\" - неясно, что ожидается","type":"header-three","key":"2o9ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1iuai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"},{"length":33,"offset":59,"style":"ITALIC"},{"length":48,"offset":115,"style":"ITALIC"},{"length":31,"offset":186,"style":"ITALIC"}],"text":"// Ситуации, когда hint = \"default\":\nobj == \"hello\"; // нестрогое сравнение со строкой\nobj + 10; // плюс (может быть сложением или конкатенацией)\nobj == 5; // нестрогое сравнение с числом","type":"unstyled","key":"178tu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно: Для большинства встроенных объектов \"default\" обрабатывается так же, как \"number\" (кроме Date и некоторых других).","type":"unstyled","key":"8e7tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Алгоритм преобразования (ToPrimitive)","type":"header-two","key":"8tclc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда JavaScript встречает объект там, где нужен примитив, он запускает алгоритм ToPrimitive(input, hint):","type":"unstyled","key":"9gs1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1te9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"ITALIC"},{"length":41,"offset":59,"style":"ITALIC"},{"length":59,"offset":106,"style":"ITALIC"},{"length":28,"offset":329,"style":"ITALIC"},{"length":42,"offset":586,"style":"ITALIC"}],"text":"// Псевдокод алгоритма\nfunction ToPrimitive(obj, hint) {\n // 1. Если obj уже примитив → вернуть obj\n \n // 2. Если есть метод obj[Symbol.toPrimitive] → вызвать его\n if (obj[Symbol.toPrimitive]) {\n const result = obj[Symbol.toPrimitive](hint);\n if (isPrimitive(result)) return result;\n throw new TypeError();\n }\n \n // 3. Если hint === \"string\"\n if (hint === \"string\") {\n const result = obj.toString();\n if (isPrimitive(result)) return result;\n \n const result2 = obj.valueOf();\n if (isPrimitive(result2)) return result2;\n throw new TypeError();\n }\n \n // 4. Если hint === \"number\" или \"default\"\n if (hint === \"number\" || hint === \"default\") {\n const result = obj.valueOf();\n if (isPrimitive(result)) return result;\n \n const result2 = obj.toString();\n if (isPrimitive(result2)) return result2;\n throw new TypeError();\n }\n}","type":"unstyled","key":"dce41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Методы toString() и valueOf()","type":"header-two","key":"4qh9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый объект наследует методы toString() и valueOf() от Object.prototype.","type":"unstyled","key":"dj1hi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 toString() - строковое представление","type":"header-three","key":"cvobm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f5akt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":51,"style":"ITALIC"},{"length":10,"offset":125,"style":"ITALIC"},{"length":38,"offset":192,"style":"ITALIC"}],"text":"const obj = { a: 1 };\nconsole.log(obj.toString()); // \"[object Object]\"\n\nconst arr = [1, 2, 3];\nconsole.log(arr.toString()); // \"1,2,3\"\n\nconst date = new Date();\nconsole.log(date.toString()); // \"Sun Apr 12 2026 15:30:00 GMT+0700\"","type":"unstyled","key":"3dtdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.2 valueOf() - числовое представление","type":"header-three","key":"62osh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6pt64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":50,"style":"ITALIC"},{"length":36,"offset":138,"style":"ITALIC"},{"length":28,"offset":230,"style":"ITALIC"}],"text":"const obj = { a: 1 };\nconsole.log(obj.valueOf()); // { a: 1 } (возвращает сам объект)\n\nconst arr = [1, 2, 3];\nconsole.log(arr.valueOf()); // [1, 2, 3] (возвращает сам объект)\n\nconst date = new Date();\nconsole.log(date.valueOf()); // 1672531200000 (timestamp)","type":"unstyled","key":"1tvp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Важно: Для большинства объектов valueOf() возвращает сам объект (не примитив). Поэтому в преобразовании обычно участвует toString().","type":"unstyled","key":"ht8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. Встроенные объекты и их преобразование","type":"header-two","key":"82ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.1 Массивы","type":"header-three","key":"8a9rt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"875lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":51,"style":"ITALIC"},{"length":53,"offset":100,"style":"ITALIC"},{"length":38,"offset":181,"style":"ITALIC"},{"length":32,"offset":247,"style":"ITALIC"}],"text":"const arr = [1, 2, 3];\n\nconsole.log(String(arr)); // \"1,2,3\" (toString)\nconsole.log(Number(arr)); // NaN (valueOf → [1,2,3] → toString → \"1,2,3\" → NaN)\nconsole.log(arr + 5); // \"1,2,35\" (строковое преобразование)\nconsole.log(arr - 5); // NaN (числовое преобразование)","type":"unstyled","key":"fbhr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.2 Пустой массив","type":"header-three","key":"dcs6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"32b3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":48,"style":"ITALIC"},{"length":13,"offset":99,"style":"ITALIC"},{"length":21,"offset":142,"style":"ITALIC"},{"length":18,"offset":193,"style":"ITALIC"}],"text":"const empty = [];\n\nconsole.log(String(empty)); // \"\" (пустая строка)\nconsole.log(Number(empty)); // 0 (\"\" → 0)\nconsole.log(empty + 5); // \"5\" (\"\" + 5 = \"5\")\nconsole.log(empty - 5); // -5 (0 - 5 = -5)","type":"unstyled","key":"e1lks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.3 Дата (особый случай)","type":"header-three","key":"5s5vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Date - единственный встроенный объект, у которого \"default\" обрабатывается как \"string\".","type":"unstyled","key":"3k91l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5fi20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":55,"style":"ITALIC"},{"length":24,"offset":136,"style":"ITALIC"},{"length":38,"offset":190,"style":"ITALIC"}],"text":"const date = new Date();\n\nconsole.log(date + 5); // \"Sun Apr 12 2026...5\" (строковое преобразование)\nconsole.log(date - 5); // число (timestamp - 5)\nconsole.log(+date); // timestamp (числовое преобразование)","type":"unstyled","key":"99t2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5.4 Функции","type":"header-three","key":"9u4mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"6dhe2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":67,"style":"ITALIC"},{"length":6,"offset":138,"style":"ITALIC"},{"length":23,"offset":174,"style":"ITALIC"}],"text":"function greet() { return \"Hello\"; }\n\nconsole.log(String(greet)); // \"function greet() { return \"Hello\"; }\"\nconsole.log(Number(greet)); // NaN\nconsole.log(greet + 5); // \"function greet...5\"","type":"unstyled","key":"fcmis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Symbol.toPrimitive - контроль над преобразованием","type":"header-two","key":"8m3oc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современный способ управлять преобразованием - метод [Symbol.toPrimitive].","type":"unstyled","key":"e0qo7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3qqkc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":337,"style":"ITALIC"},{"length":20,"offset":403,"style":"ITALIC"},{"length":32,"offset":457,"style":"ITALIC"}],"text":"const customObj = {\n value: 42,\n \n [Symbol.toPrimitive](hint) {\n console.log(`Хинт: ${hint}`);\n \n switch (hint) {\n case \"string\":\n return `Значение: ${this.value}`;\n case \"number\":\n return this.value;\n case \"default\":\n return this.value * 2;\n }\n }\n};\n\nconsole.log(String(customObj)); // \"Значение: 42\" (hint: string)\nconsole.log(+customObj); // 42 (hint: number)\nconsole.log(customObj + 5); // 89 (hint: default, 42*2+5=89)","type":"unstyled","key":"7lb79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. Сравнение объектов","type":"header-two","key":"3mlj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Строгое сравнение (===)","type":"header-three","key":"2mpku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При строгом сравнении преобразования НЕТ. Сравниваются ссылки.","type":"unstyled","key":"8tmrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4a4l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":94,"style":"ITALIC"},{"length":21,"offset":148,"style":"ITALIC"}],"text":"const obj1 = { a: 1 };\nconst obj2 = { a: 1 };\nconst obj3 = obj1;\n\nconsole.log(obj1 === obj2); // false (разные объекты)\nconsole.log(obj1 === obj3); // true (одна ссылка)","type":"unstyled","key":"fl3ni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Нестрогое сравнение (==)","type":"header-three","key":"2qir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При нестрогом сравнении объекты преобразуются в примитивы.","type":"unstyled","key":"b4irs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ahk5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":63,"style":"ITALIC"},{"length":25,"offset":109,"style":"ITALIC"}],"text":"const obj = { valueOf: () => 42 };\n\nconsole.log(obj == 42); // true (obj → 42)\nconsole.log(obj == \"42\"); // true (obj → 42 → \"42\")","type":"unstyled","key":"5gac0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.3 Сравнение массивов","type":"header-three","key":"1oad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1lh2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":28,"style":"ITALIC"},{"length":21,"offset":89,"style":"ITALIC"},{"length":23,"offset":139,"style":"ITALIC"},{"length":30,"offset":191,"style":"ITALIC"}],"text":"console.log([] == false); // true ([] → \"\" → 0, false → 0)\nconsole.log([] == 0); // true ([] → \"\" → 0)\nconsole.log([1] == 1); // true ([1] → \"1\" → 1)\nconsole.log([1,2] == 3); // false ([1,2] → \"1,2\" → NaN)","type":"unstyled","key":"beant"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Классические загадки (разбор)","type":"header-two","key":"3koh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 [] + []","type":"header-three","key":"clcgu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"99obs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":22,"style":"ITALIC"},{"length":35,"offset":28,"style":"ITALIC"},{"length":33,"offset":64,"style":"ITALIC"},{"length":34,"offset":98,"style":"ITALIC"},{"length":32,"offset":133,"style":"ITALIC"},{"length":18,"offset":166,"style":"ITALIC"}],"text":"console.log([] + []); // \"\"\n// 1. Hint = \"default\" (оператор +)\n// 2. [][Symbol.toPrimitive]? нет\n// 3. valueOf() → [] (не примитив)\n// 4. toString() → \"\" (примитив)\n// 5. \"\" + \"\" = \"\"","type":"unstyled","key":"eeskf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 [] + {}","type":"header-three","key":"6e45k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"236sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":22,"style":"ITALIC"},{"length":21,"offset":43,"style":"ITALIC"},{"length":36,"offset":65,"style":"ITALIC"},{"length":38,"offset":102,"style":"ITALIC"},{"length":45,"offset":141,"style":"ITALIC"}],"text":"console.log([] + {}); // \"[object Object]\"\n// [] → \"\" (как выше)\n// {} → valueOf() → {} (не примитив)\n// {} → toString() → \"[object Object]\"\n// \"\" + \"[object Object]\" = \"[object Object]\"","type":"unstyled","key":"4mjta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.3 {} + []","type":"header-three","key":"cinh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4r4al"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":22,"style":"ITALIC"},{"length":60,"offset":48,"style":"ITALIC"},{"length":36,"offset":109,"style":"ITALIC"},{"length":37,"offset":146,"style":"ITALIC"}],"text":"console.log({} + []); // 0 (в некоторых средах)\n// ВАЖНО: в начале строки {} интерпретируется как блок кода!\n// Поэтому реально выполняется: + []\n// + [] → Number([]) → Number(\"\") → 0","type":"unstyled","key":"5jj0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.4 ![]","type":"header-three","key":"epelj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e342c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":18,"style":"ITALIC"},{"length":33,"offset":27,"style":"ITALIC"},{"length":16,"offset":61,"style":"ITALIC"}],"text":"console.log(![]); // false\n// [] → true (объект всегда true)\n// !true → false","type":"unstyled","key":"5ik84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.5 [] == ![]","type":"header-three","key":"alv72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"f2fuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":24,"style":"ITALIC"},{"length":21,"offset":32,"style":"ITALIC"},{"length":21,"offset":54,"style":"ITALIC"},{"length":41,"offset":76,"style":"ITALIC"},{"length":29,"offset":118,"style":"ITALIC"},{"length":23,"offset":148,"style":"ITALIC"}],"text":"console.log([] == ![]); // true\n// Шаг 1: ![] → false\n// Шаг 2: [] == false\n// Шаг 3: ToNumber([]) → ToNumber(\"\") → 0\n// Шаг 4: ToNumber(false) → 0\n// Шаг 5: 0 == 0 → true","type":"unstyled","key":"eakj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Создание объектов с кастомным преобразованием","type":"header-two","key":"97gmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1 Числоподобный объект","type":"header-three","key":"aole1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ag5ib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":281,"style":"ITALIC"},{"length":5,"offset":320,"style":"ITALIC"},{"length":7,"offset":359,"style":"ITALIC"},{"length":5,"offset":424,"style":"ITALIC"}],"text":"const NumberLike = {\n value: 10,\n \n [Symbol.toPrimitive](hint) {\n if (hint === \"number\" || hint === \"default\") {\n return this.value;\n }\n return String(this.value);\n },\n \n increment() {\n this.value++;\n return this;\n }\n};\n\nconsole.log(NumberLike + 5); // 15\nconsole.log(NumberLike * 2); // 20\nconsole.log(String(NumberLike)); // \"10\"\nNumberLike.increment();\nconsole.log(NumberLike + 5); // 16","type":"unstyled","key":"bgb39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2 Диапазон чисел","type":"header-three","key":"e7kol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9dktr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":218,"style":"ITALIC"},{"length":18,"offset":276,"style":"ITALIC"},{"length":12,"offset":333,"style":"ITALIC"},{"length":6,"offset":376,"style":"ITALIC"},{"length":14,"offset":413,"style":"ITALIC"}],"text":"const Range = {\n from: 1,\n to: 10,\n \n [Symbol.toPrimitive](hint) {\n if (hint === \"string\") {\n return `[${this.from}..${this.to}]`;\n }\n if (hint === \"number\") {\n return (this.from + this.to) / 2; // среднее значение\n }\n return this.to - this.from; // длина диапазона\n }\n};\n\nconsole.log(String(Range)); // \"[1..10]\"\nconsole.log(+Range); // 5.5\nconsole.log(Range + 0); // 9 (длина 9)","type":"unstyled","key":"tdg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.3 Безопасные вычисления","type":"header-three","key":"c7s0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"37e3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":403,"style":"ITALIC"}],"text":"class SafeNumber {\n constructor(value) {\n this.value = value;\n }\n \n [Symbol.toPrimitive](hint) {\n if (hint === \"number\") {\n if (isNaN(this.value)) return 0;\n if (!isFinite(this.value)) return 0;\n return this.value;\n }\n if (hint === \"string\") {\n return String(this.value);\n }\n return this.value;\n }\n}\n\nconst safe = new SafeNumber(NaN);\nconsole.log(safe + 10); // 10 (NaN превратился в 0)","type":"unstyled","key":"6gh9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Преобразование в булевы значения","type":"header-two","key":"28l04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":73,"style":"BOLD"}],"text":"Преобразование объекта в булево значение происходит по простому правилу: любой объект → true (даже пустой).","type":"unstyled","key":"4qa9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bpqbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":34,"style":"ITALIC"},{"length":7,"offset":76,"style":"ITALIC"},{"length":24,"offset":126,"style":"ITALIC"}],"text":"console.log(Boolean({})); // true\nconsole.log(Boolean([])); // true\nconsole.log(Boolean(new Boolean(false))); // true (объект-обёртка)","type":"unstyled","key":"2ulc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Исключений нет. Это важно помнить:","type":"unstyled","key":"ah0vg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7ut37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":52,"style":"ITALIC"},{"length":14,"offset":120,"style":"ITALIC"}],"text":"if ([]) {\n console.log(\"Пустой массив - true!\");\n} // Выполнится!\n\nif ({}) {\n console.log(\"Пустой объект - true!\");\n} // Выполнится!","type":"unstyled","key":"dq8pk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Практические применения","type":"header-two","key":"5qgk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.1 Автоматическая валидация","type":"header-three","key":"94kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bjeeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":425,"style":"ITALIC"}],"text":"class ValidatedNumber {\n constructor(value, min, max) {\n this.value = value;\n this.min = min;\n this.max = max;\n }\n \n [Symbol.toPrimitive](hint) {\n if (hint === \"number\") {\n if (this.value < this.min) return this.min;\n if (this.value > this.max) return this.max;\n return this.value;\n }\n return String(this.value);\n }\n}\n\nconst age = new ValidatedNumber(150, 0, 120);\nconsole.log(age + 5); // 125 (ограничено 120)","type":"unstyled","key":"eskju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.2 Ленивые вычисления","type":"header-three","key":"67p3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"3bkt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":559,"style":"ITALIC"},{"length":50,"offset":619,"style":"ITALIC"}],"text":"class LazyValue {\n constructor(computeFn) {\n this.computeFn = computeFn;\n this.cached = null;\n this.computed = false;\n }\n \n [Symbol.toPrimitive](hint) {\n if (!this.computed) {\n this.cached = this.computeFn();\n this.computed = true;\n }\n if (hint === \"string\") {\n return String(this.cached);\n }\n if (hint === \"number\") {\n return Number(this.cached);\n }\n return this.cached;\n }\n}\n\nconst expensive = new LazyValue(() => {\n console.log(\"Тяжёлые вычисления...\");\n return 42;\n});\n\nconsole.log(expensive + 5); // \"Тяжёлые вычисления...\" → 47\nconsole.log(expensive * 2); // 84 (используется кэш, повторных вычислений нет)","type":"unstyled","key":"ddc93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.3 Единицы измерения","type":"header-three","key":"61c99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bcuhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":475,"style":"ITALIC"},{"length":9,"offset":521,"style":"ITALIC"},{"length":7,"offset":561,"style":"ITALIC"}],"text":"class Distance {\n constructor(meters) {\n this.meters = meters;\n }\n \n static km(value) {\n return new Distance(value * 1000);\n }\n \n [Symbol.toPrimitive](hint) {\n if (hint === \"number\") {\n return this.meters;\n }\n if (hint === \"string\") {\n if (this.meters >= 1000) {\n return `${this.meters / 1000} км`;\n }\n return `${this.meters} м`;\n }\n return this.meters;\n }\n}\n\nconst dist = Distance.km(5);\nconsole.log(dist + 500); // 5500 (метры)\nconsole.log(String(dist)); // \"5 км\"\nconsole.log(dist < 6000); // true","type":"unstyled","key":"cjd30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 12. Подводные камни","type":"header-two","key":"60fd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: Неявное преобразование в логических операторах","type":"header-three","key":"1ireb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ghs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":115,"style":"ITALIC"}],"text":"const obj = {\n valueOf: () => 0,\n toString: () => \"true\"\n};\n\nif (obj) {\n console.log(\"Это выполнится всегда!\"); // Объект всегда true\n}\n\nif (obj == true) {\n console.log(\"А это зависит от преобразования\");\n}","type":"unstyled","key":"dgfhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: Преобразование Date","type":"header-three","key":"50d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"gbon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":61,"style":"ITALIC"},{"length":24,"offset":122,"style":"ITALIC"},{"length":47,"offset":148,"style":"ITALIC"}],"text":"const date = new Date(2024, 0, 1);\nconsole.log(date + 1); // \"Mon Jan 01 2024 ...1\" (строка)\nconsole.log(date - 1); // число (timestamp - 1)\n\n// Из-за разного поведения сложения и вычитания","type":"unstyled","key":"66jcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: Symbol.toPrimitive должен возвращать примитив","type":"header-three","key":"e22jh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4ncnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":56,"style":"ITALIC"},{"length":54,"offset":109,"style":"ITALIC"}],"text":"const obj = {\n [Symbol.toPrimitive]() {\n return {}; // ❌ возвращает объект\n }\n};\n\nconsole.log(obj + 5); // TypeError: Cannot convert object to primitive value","type":"unstyled","key":"45vlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #4: valueOf и toString могут вернуть примитив, но не обязаны","type":"header-three","key":"dm88l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9rg0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":43,"style":"ITALIC"},{"length":19,"offset":98,"style":"ITALIC"},{"length":54,"offset":148,"style":"ITALIC"}],"text":"const obj = {\n valueOf() {\n return {}; // ❌ вернули объект\n },\n toString() {\n return {}; // ❌ вернули объект\n }\n};\n\nconsole.log(obj + 5); // TypeError: Cannot convert object to primitive value","type":"unstyled","key":"41vhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест преобразования","type":"header-two","key":"b7pa0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Три хинта: \"string\", \"number\", \"default\".","type":"ordered-list-item","key":"hah3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Алгоритм: Symbol.toPrimitive → valueOf → toString.","type":"ordered-list-item","key":"4e9b3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Объекты всегда true в булевом контексте.","type":"ordered-list-item","key":"5qvgc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":4,"style":"BOLD"}],"text":"Date — особый случай: \"default\" = \"string\".","type":"ordered-list-item","key":"1adrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Symbol.toPrimitive — современный способ контроля преобразования.","type":"ordered-list-item","key":"5puma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Пустой массив → \"\" → 0.","type":"ordered-list-item","key":"2ae7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":7,"style":"BOLD"}],"text":"valueOf для обычных объектов возвращает сам объект (не примитив).","type":"ordered-list-item","key":"df291"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"3ck9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"eudjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const obj = {\n [Symbol.toPrimitive](hint) {\n if (hint === \"number\") return 10;\n if (hint === \"string\") return \"twenty\";\n return 30;\n }\n};\n\nconsole.log(+obj);\nconsole.log(String(obj));\nconsole.log(obj + 5);\nconsole.log(obj == 30);","type":"unstyled","key":"3litv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ:","type":"unstyled","key":"9i3au"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10 (hint: number)","type":"unordered-list-item","key":"cfvcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"twenty\" (hint: string)","type":"unordered-list-item","key":"erm4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"35 (hint: default → 30 + 5)","type":"unordered-list-item","key":"36mvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"true (30 == 30)","type":"unordered-list-item","key":"knhp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Преобразование объектов в примитивы - одна из самых сложных и непонятых тем в JavaScript. Но когда вы понимаете механизм, перестаёте удивляться [] + [] === \"\" и начинаете использовать эту силу для создания элегантных API. Управляйте преобразованиями своих объектов, и ваш код станет и красивее, и предсказуемее.","type":"unstyled","key":"cmpq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4og3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"djscb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5ktaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dm89e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"m8RC74OOujibvJpUK9bU"}],"entityMap":{}},"mentions":[]}