[{"data":1,"prerenderedAt":2178},["ShallowReactive",2],{"$fuJkPqVHqj33f5HNRJ41RezUnBe2qUk56MfotcgoNxfQ":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":154,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":157,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":162,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":507,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":729,"mdc-7vnkqo-key":749,"mdc--gxprbp-key":771,"mdc-syn61a-key":785,"mdc-706w56-key":807,"mdc--jb3jq1-key":821,"mdc-dezln2-key":853,"mdc-d2t367-key":904,"mdc--a03fkk-key":955,"mdc-uppg3l-key":971,"mdc-yeqov9-key":1191,"mdc--84n03h-key":1326,"mdc--yve9wt-key":1382,"mdc-3aq4r4-key":1428,"mdc--du2fcb-key":1467,"mdc--csgam6-key":1483,"mdc-394zwc-key":1522,"mdc--xzk45m-key":1554,"mdc--q2um6t-key":1584,"mdc-3vkyay-key":1650,"mdc-9tbikk-key":1672,"mdc-au1kge-key":1712,"mdc--9l1h4l-key":1769,"mdc--9yelrk-key":1811,"mdc-ze5qcz-key":1886,"mdc-z52egl-key":1899},{"content":4,"quizQuestionContent":124,"type":143,"pageMeta":144},[5,9,13,16,20,23,27,30,34,37,41,45,48,52,55,59,62,66,70,73,77,80,83,87,90,93,96,100,104,107,111,114,118,121],{"id":6,"value":7,"isTypeH1":8},"1953","this в JavaScript: контекст вызова и правила",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4543","Что такое this простыми словами","what-is-this-in-simple-words",{"id":14,"value":15,"isTypeParagraph":8},"10437","`this` — это специальное значение (не «переменная в обычном смысле»), доступное внутри функции, которое обычно указывает на объект, через который функция была вызвана. Иначе говоря, `this` отвечает на вопрос: «какой объект является получателем вызова прямо сейчас».\n\nВажно различать два похожих утверждения:\n- «Функция объявлена внутри объекта» (место объявления)\n- «Функция вызвана как метод объекта» (форма вызова)\n\n`this` в обычных функциях зависит именно от формы вызова.",{"id":17,"value":18,"anchor":19,"isTypeH2":8},"4544","Главное правило: this вычисляется при вызове","main-rule-this-is-determined-at-call-time",{"id":21,"value":22,"isTypeParagraph":8},"10438","Для обычных функций (function declaration, function expression, методы объектов и классов) действует принцип: значение `this` определяется тем, как функция вызвана.",{"id":24,"value":25,"anchor":26,"isTypeH2":8},"4545","Таблица: как определяется this","table-how-this-is-determined",{"id":28,"value":29,"isTypeParagraph":8},"10439","| Как вызывается функция | Пример вызова | Какое значение `this` |\n|---|---|---|\n| Обычный вызов | `fn()` | В нестрогом режиме: глобальный объект (в браузере часто `window`); в строгом режиме: `undefined` |\n| Вызов как метод | `obj.fn()` | `obj` (объект слева от точки на момент вызова) |\n| Явная установка контекста | `fn.call(ctx, a)` / `fn.apply(ctx, [a])` | `ctx` |\n| Привязка контекста навсегда | `fn.bind(ctx)` | Всегда `ctx` при вызове полученной функции |\n| Конструктор | `new Fn()` | Новый созданный объект |\n| Стрелочная функция | `() => this` | `this` берётся из внешнего лексического окружения и не меняется `call/apply/bind` |\n",{"id":31,"value":32,"anchor":33,"isTypeH2":8},"4546","Схема принятия решения","decision-flow",{"id":35,"value":36,"isTypeParagraph":8},"10440","Упрощённый порядок проверки для вычисления `this`:\n\n1) Если функция стрелочная, то `this` берётся снаружи (лексически)\n2) Иначе, если вызов с `new`, то `this` — новый объект\n3) Иначе, если есть `bind`, то `this` — привязанный объект\n4) Иначе, если вызов через `call/apply`, то `this` — переданный объект\n5) Иначе, если вызов как `obj.method()`, то `this` — `obj` (то, что слева от точки)\n6) Иначе обычный вызов: `this` равен `undefined` в strict mode, либо глобальному объекту в нестрогом режиме",{"id":38,"value":39,"anchor":40,"isTypeH2":8},"4547","Разбор каждого способа вызова с примерами","breakdown-of-each-call-form-with-examples",{"id":42,"value":43,"anchor":44,"isTypeH3":8},"4561","Обычный вызов: fn()","plain-call-fn",{"id":46,"value":47,"isTypeParagraph":8},"10441","В обычном вызове нет объекта-получателя, поэтому `this` подставляется по правилам режима выполнения.\n\n```\n// Нестрогий режим (пример для браузера)\nfunction g() {\n  return this === window;\n}\nconsole.log(g()); // true (часто так в браузере, если не модуль и не strict)\n```\n\n```\n// Строгий режим\nfunction s() {\n  \"use strict\";\n  return this;\n}\nconsole.log(s()); // undefined\n```\n\nЗамечание: в современных проектах часто используются ES-модули и строгий режим, поэтому ожидание «`this` всегда `window`» является небезопасным.",{"id":49,"value":50,"anchor":51,"isTypeH3":8},"4562","Вызов как метод: obj.fn()","method-call-obj-fn",{"id":53,"value":54,"isTypeParagraph":8},"10442","Если функция вызывается через свойство объекта, то `this` получает значение объекта слева от точки.\n\n```\nconst user = {\n  name: \"Ирина\",\n  getName() {\n    return this.name;\n  }\n};\n\nconsole.log(user.getName()); // \"Ирина\"\n```\n\nКлючевой момент: важна форма вызова, а не то, где функция была написана. При «отрыве» метода `this` теряется.\n\n```\nconst user = {\n  name: \"Ирина\",\n  getName() {\n    return this.name;\n  }\n};\n\nconst fn = user.getName;\nconsole.log(fn()); // strict: ошибка (this = undefined), non-strict: может быть window.name\n```\n",{"id":56,"value":57,"anchor":58,"isTypeH3":8},"4563","call и apply: явная установка this","call-and-apply-explicit-this",{"id":60,"value":61,"isTypeParagraph":8},"10443","`call` принимает аргументы списком, `apply` принимает массив аргументов. Оба метода устанавливают `this` явно.\n\n```\nfunction sum(a, b) {\n  return this.base + a + b;\n}\n\nconst ctx = { base: 10 };\n\nconsole.log(sum.call(ctx, 1, 2));    // 13\nconsole.log(sum.apply(ctx, [1, 2])); // 13\n```",{"id":63,"description":64,"titleAlert":65,"isTypeAlertInfo":8},"693","Это прямое доказательство, что `this` не «вшит» в функцию навсегда, а задаётся вызовом.\n",null,{"id":67,"value":68,"anchor":69,"isTypeH3":8},"4564","bind: фиксированная привязка this","bind-fixed-this-binding",{"id":71,"value":72,"isTypeParagraph":8},"10444","`bind` возвращает новую функцию с заранее привязанным `this`. Эта привязка не зависит от дальнейшей формы вызова.\n\n```\nfunction greet() {\n  return \"Привет, \" + this.name;\n}\n\nconst user = { name: \"Олег\" };\nconst bound = greet.bind(user);\n\nconsole.log(bound()); // \"Привет, Олег\"\n```\n\n```\nconst other = { name: \"Наталья\" };\nconsole.log(bound.call(other)); // всё равно \"Привет, Олег\"\n```",{"id":74,"value":75,"anchor":76,"isTypeH3":8},"4565","new: конструктор создаёт новый this","new-creates-a-new-this",{"id":78,"value":79,"isTypeParagraph":8},"10445","Вызов с `new` создаёт новый объект и делает его значением `this` внутри функции-конструктора.\n\n```\nfunction Person(name) {\n  this.name = name;\n}\n\nconst p = new Person(\"Анна\");\nconsole.log(p.name); // \"Анна\"\n```",{"id":81,"description":82,"titleAlert":65,"isTypeAlertWarning":8},"757","Вызов функции-конструктора без `new` часто приводит к некорректному `this` (в strict mode это обычно `undefined`, в нестрогом режиме — глобальный объект), поэтому такая запись считается источником ошибок.",{"id":84,"value":85,"anchor":86,"isTypeH3":8},"4566","Стрелочные функции: this берётся снаружи","arrow-functions-this-comes-from-outer-scope",{"id":88,"value":89,"isTypeParagraph":8},"10446","Стрелочная функция не создаёт собственный `this`. Вместо этого она «захватывает» `this` из внешней области, где была создана.\n\nЭто удобно для колбэков внутри методов, когда требуется сохранить контекст объекта.\n\n```\nconst counter = {\n  value: 0,\n  incLater() {\n    setTimeout(() => {\n      this.value++;\n      console.log(this.value);\n    }, 10);\n  }\n};\n\ncounter.incLater(); // 1\n```\n\nЕсли заменить стрелочную функцию на обычную, `this` внутри колбэка будет определяться способом вызова колбэка, а не объектом `counter`.\n\n```\nconst counter = {\n  value: 0,\n  incLater() {\n    setTimeout(function () {\n      \"use strict\";\n      // this здесь undefined, так как это обычный вызов функции\n      // console.log(this.value); // ошибка\n    }, 10);\n  }\n};\n```\n",{"id":91,"description":92,"titleAlert":65,"isTypeAlertWarning":8},"758","Стрелочные функции плохо подходят в роли методов, если требуется динамический `this` при вызове `obj.method()`.",{"id":94,"value":95,"isTypeParagraph":8},"10447","```\nconst obj = {\n  x: 1,\n  getX: () => this && this.x\n};\n\nconsole.log(obj.getX()); // обычно undefined, так как this взят снаружи\n```\n",{"id":97,"value":98,"anchor":99,"isTypeH2":8},"4548","Частые ситуации в JS","common-cases-in-js",{"id":101,"value":102,"anchor":103,"isTypeH3":8},"4567","Обработчики событий DOM","dom-event-handlers",{"id":105,"value":106,"isTypeParagraph":8},"10448","В DOM-обработчиках, добавленных через `addEventListener`, обычная функция обычно получает `this`, равный элементу, на котором сработало событие. У стрелочной функции такого поведения нет, потому что `this` у неё лексический.\n\n```\nconst button = document.querySelector(\"button\");\n\nbutton.addEventListener(\"click\", function () {\n  console.log(this === button); // true\n});\n\nbutton.addEventListener(\"click\", () => {\n  console.log(this === button); // false\n});\n```",{"id":108,"value":109,"anchor":110,"isTypeH3":8},"4568","Методы классов и потеря контекста","class-methods-and-lost-context",{"id":112,"value":113,"isTypeParagraph":8},"10449","Методы классов — это обычные функции. При присваивании метода в переменную и вызове как `fn()` контекст теряется.\n\n```\nclass User {\n  constructor(name) {\n    this.name = name;\n  }\n  getName() {\n    return this.name;\n  }\n}\n\nconst u = new User(\"Светлана\");\nconst fn = u.getName;\n\ntry {\n  console.log(fn()); // strict: ошибка, так как this = undefined\n} catch (e) {\n  console.log(\"Ошибка из-за потерянного this\");\n}\n```\n\nТиповые способы избежать проблемы:\n- фиксировать контекст через `bind` (например, в конструкторе),\n- использовать стрелочную функцию там, где требуется лексический `this` (например, для колбэка), но не как универсальную замену методов.",{"id":115,"value":116,"anchor":117,"isTypeH3":8},"4569","Минимальная связь со спецификацией (без углубления)","minimal-connection-to-the-spec-without-deep-dive",{"id":119,"value":120,"isTypeParagraph":8},"10450","В ECMAScript значение `this` при вызове обычной функции связано с тем, вызывается ли функция как «свойство объекта» (когда есть база вызова, например в `obj.fn()`), или как самостоятельная функция `fn()`. Для стрелочных функций `this` не формируется механизмом вызова, а берётся из внешнего лексического окружения.\n\nНа практике это сводится к правилу: необходимо смотреть на форму вызова, а не на место объявления функции.",{"id":122,"value":123,"isTypeParagraph":8},"10451","В итоге: `this` в JavaScript (для обычных функций) определяется в момент вызова и зависит от формы вызова (`obj.fn()`, `call/apply`, `bind`, `new`). В строгом режиме при обычном вызове `fn()` значение `this` равно `undefined`. У стрелочных функций `this` берётся из внешней области и не меняется при `call/apply/bind`.",{"id":125,"options":126,"hint":140,"solution":141,"description":142},"1182",[127,131,134,137],{"id":128,"label":129,"isCorrect":130},"4872","`this` всегда указывает на объект, в котором функция была объявлена  ",false,{"id":132,"label":133,"isCorrect":130},"4873","`this` всегда равен `window` в браузере, независимо от строгого режима ",{"id":135,"label":136,"isCorrect":130},"4874","`this` — это переменная, которая копируется в функцию при её создании и не может измениться при вызове",{"id":138,"label":139,"isCorrect":8},"4875","this — это значение контекста, которое вычисляется при вызове функции по тому, как именно она вызывается (`obj.fn()`, `fn.call(...)`, `new Fn()` и т. п.)","Для выбора верного пункта в тесте достаточно представить одну и ту же функцию, вызванную разными способами: `obj.fn()`, `fn.call(obj)`, `new Fn()` и `fn()` (особенно в strict mode). Если результаты по `this` различаются, значит `this` вычисляется при вызове, и верным является утверждение про зависимость от способа вызова.","**Правильный ответ - 4**: `this` — это значение контекста, которое вычисляется при вызове функции по тому, как именно она вызывается (`obj.fn()`, `fn.call(...)`, `new Fn()` и т. п.)\n\n**Почему варианты 1–3 неверны**\n\nВариант 1 («this всегда указывает на объект, в котором функция была объявлена») неверен, потому что одну и ту же функцию можно присвоить разным объектам и вызвать через них, и `this` будет разным.\n\n```\nfunction showName() {\n  return this && this.name;\n}\n\nconst a = { name: \"A\", showName };\nconst b = { name: \"B\", showName };\n\nconsole.log(a.showName()); // \"A\"\nconsole.log(b.showName()); // \"B\"\n```\n\nВариант 2 («this всегда равен window в браузере, независимо от строгого режима») неверен по причинам:\n- В строгом режиме при обычном вызове функции `this` равен `undefined`, а не `window`\n- В ES-модулях верхнеуровневый `this` не равен `window`\n- Вне браузера глобальный объект не `window`, а `window` может отсутствовать\n\n```\nfunction f() {\n  \"use strict\";\n  return this;\n}\n\nconsole.log(f()); // undefined\n```\n\nВариант 3 («this копируется в функцию при создании и не может измениться при вызове») неверен, потому что для обычных функций `this` задаётся при вызове. Его можно явно подменять через `call` и `apply`, фиксировать через `bind`, а также получать новый `this` через `new`.\n\n```function f() {\n  return this.x;\n}\n\nconst obj1 = { x: 1 };\nconst obj2 = { x: 2 };\n\nconsole.log(f.call(obj1)); // 1\nconsole.log(f.call(obj2)); // 2\n```","Что такое `this` в JavaScript?","quizQuestion",{"title":145,"description":146,"ogTitle":7,"ogDescription":146,"ogImageUrl":147,"canonical":65,"ogLocale":148,"ogSiteName":149,"ogImageType":150,"ogImageWidth":151,"ogImageHeight":152,"ogType":153,"ogUrl":65},"Что такое this в JavaScript?","Разбор this: как определяется, строгий режим, стрелочные функции, bind/call/apply, new, классы и частые ошибки.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":155,"siteUrl":156},"GOOD WEB JOB!","https://goodwebjob.ru",[158],{"label":159,"slug":160,"to":161},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":163,"navigationSublist":171},[164,167],{"path":161,"isActive":130,"name":165,"icon":166,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":168,"isActive":8,"name":169,"icon":170,"isNavbarMobileDisabled":130},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[172,181,208,220,226,366,390,399,405,468,489,495],{"title":173,"list":174,"isOpened":130},"Bash",[175,178],{"name":176,"path":177,"isActive":130},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":179,"path":180,"isActive":130},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":182,"list":183,"isOpened":130},"CSS",[184,187,190,193,196,199,202,205],{"name":185,"path":186,"isActive":130},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":188,"path":189,"isActive":130},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":191,"path":192,"isActive":130},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":194,"path":195,"isActive":130},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":197,"path":198,"isActive":130},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":200,"path":201,"isActive":130},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":203,"path":204,"isActive":130},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":206,"path":207,"isActive":130},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":209,"list":210,"isOpened":130},"Git",[211,214,217],{"name":212,"path":213,"isActive":130},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":215,"path":216,"isActive":130},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":218,"path":219,"isActive":130},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":221,"list":222,"isOpened":130},"HTML",[223],{"name":224,"path":225,"isActive":130},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":227,"list":228,"isOpened":130},"JavaScript",[229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363],{"name":230,"path":231,"isActive":130},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":233,"path":234,"isActive":130},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":236,"path":237,"isActive":130},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":239,"path":240,"isActive":130},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":242,"path":243,"isActive":130},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":245,"path":246,"isActive":130},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":248,"path":249,"isActive":130},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":251,"path":252,"isActive":130},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":254,"path":255,"isActive":130},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":257,"path":258,"isActive":130},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":260,"path":261,"isActive":130},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":263,"path":264,"isActive":130},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":266,"path":267,"isActive":130},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":269,"path":270,"isActive":130},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":272,"path":273,"isActive":130},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":145,"path":275,"isActive":130},"/technical-interview/tasks/what-is-this-in-javascript",{"name":277,"path":278,"isActive":130},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":280,"path":281,"isActive":130},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":283,"path":284,"isActive":130},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":286,"path":287,"isActive":130},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":289,"path":290,"isActive":130},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":292,"path":293,"isActive":130},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":295,"path":296,"isActive":130},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":298,"path":299,"isActive":130},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":301,"path":302,"isActive":130},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":304,"path":305,"isActive":130},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":307,"path":308,"isActive":130},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":310,"path":311,"isActive":130},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":313,"path":314,"isActive":130},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":316,"path":317,"isActive":130},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":319,"path":320,"isActive":130},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":322,"path":323,"isActive":130},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":325,"path":326,"isActive":130},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":328,"path":329,"isActive":130},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":331,"path":332,"isActive":130},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":334,"path":335,"isActive":130},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":337,"path":338,"isActive":130}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":340,"path":341,"isActive":130},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":343,"path":344,"isActive":130},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":346,"path":347,"isActive":130},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":349,"path":350,"isActive":130},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":352,"path":353,"isActive":130},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":355,"path":356,"isActive":130},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":358,"path":359,"isActive":130},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":361,"path":362,"isActive":130},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":364,"path":365,"isActive":130},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":367,"list":368,"isOpened":130},"React",[369,372,375,378,381,384,387],{"name":370,"path":371,"isActive":130},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":373,"path":374,"isActive":130},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":376,"path":377,"isActive":130},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":379,"path":380,"isActive":130},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":382,"path":383,"isActive":130},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":385,"path":386,"isActive":130},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":388,"path":389,"isActive":130},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":391,"list":392,"isOpened":130},"Алгоритмы",[393,396],{"name":394,"path":395,"isActive":130},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":397,"path":398,"isActive":130},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":400,"list":401,"isOpened":130},"Дебаггинг",[402],{"name":403,"path":404,"isActive":130},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":406,"list":407,"isOpened":130},"Компьютерные сети",[408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465],{"name":409,"path":410,"isActive":130},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":412,"path":413,"isActive":130},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":415,"path":416,"isActive":130},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":418,"path":419,"isActive":130},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":421,"path":422,"isActive":130},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":424,"path":425,"isActive":130},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":427,"path":428,"isActive":130},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":430,"path":431,"isActive":130},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":433,"path":434,"isActive":130},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":436,"path":437,"isActive":130},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":439,"path":440,"isActive":130},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":442,"path":443,"isActive":130},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":445,"path":446,"isActive":130},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":448,"path":449,"isActive":130},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":451,"path":452,"isActive":130},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":454,"path":455,"isActive":130},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":457,"path":458,"isActive":130},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":460,"path":461,"isActive":130},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":463,"path":464,"isActive":130},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":466,"path":467,"isActive":130},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":469,"list":470,"isOpened":130},"Отрисовка в браузере",[471,474,477,480,483,486],{"name":472,"path":473,"isActive":130},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":475,"path":476,"isActive":130},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":478,"path":479,"isActive":130},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":481,"path":482,"isActive":130},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":484,"path":485,"isActive":130},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":487,"path":488,"isActive":130},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":490,"list":491,"isOpened":130},"Ревью кода",[492],{"name":493,"path":494,"isActive":130},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":496,"list":497,"isOpened":130},"Теория вероятности",[498,501,504],{"name":499,"path":500,"isActive":130},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":502,"path":503,"isActive":130},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":505,"path":506,"isActive":130},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":508},[509,512,514,516,518,521,524,526,528,530,532,534,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,706,708,710,712,714,716,718,719,721,723,725,727],{"name":510,"value":511},"Теоретические задания","theoretical-tasks",{"name":266,"value":513},"what-this-code-will-return-typeof-function",{"name":165,"value":515},"where-to-begin",{"name":233,"value":517},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":519,"value":520},"Backend","backend",{"name":522,"value":523},"Frontend","frontend",{"name":230,"value":525},"prototype-what-logical-values-will-be-received-in-console-log",{"name":346,"value":527},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":337,"value":529},"find-non-repeating-numbers-in-an-array",{"name":310,"value":531},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":316,"value":533},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":535,"value":536},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":322,"value":538},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":239,"value":540},"what-value-will-the-console-output-with-object-property",{"name":242,"value":542},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":313,"value":544},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":343,"value":546},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":349,"value":548},"determines-whether-a-word-is-a-palindrome",{"name":328,"value":550},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":355,"value":552},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":319,"value":554},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":325,"value":556},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":331,"value":558},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":364,"value":560},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":334,"value":562},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":340,"value":564},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":245,"value":566},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":248,"value":568},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":260,"value":570},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":263,"value":572},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":361,"value":574},"unifying-values-in-an-array",{"name":352,"value":576},"flattening-the-array",{"name":251,"value":578},"what-will-the-book-get-upper-name-method-return",{"name":358,"value":580},"string-compression",{"name":257,"value":582},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":269,"value":584},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":409,"value":586},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":415,"value":588},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":418,"value":590},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":421,"value":592},"key-differences-between-tcp-and-udp",{"name":424,"value":594},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":427,"value":596},"what-is-http-and-what-does-it-consist-of",{"name":430,"value":598},"what-are-http-headers-and-why-do-we-need-them",{"name":433,"value":600},"what-are-http-parameters",{"name":436,"value":602},"where-is-the-html-code-located-in-the-http-response-structure",{"name":224,"value":604},"what-is-html",{"name":439,"value":606},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":442,"value":608},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":445,"value":610},"what-is-a-cookie",{"name":448,"value":612},"who-initiates-the-cookie-recording-in-the-browser",{"name":451,"value":614},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":616,"value":617},"Лайвкодинг","livecoding",{"name":236,"value":619},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":457,"value":621},"is-everything-that-goes-through-https-secure",{"name":460,"value":623},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":463,"value":625},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":475,"value":627},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":472,"value":629},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":478,"value":631},"what-is-blocking-the-page-rendering-in-the-browser",{"name":481,"value":633},"what-is-dom-in-a-browser-what-is-cssom",{"name":484,"value":635},"what-are-nodes-in-the-dom",{"name":487,"value":637},"what-does-cssom-consist-of",{"name":185,"value":639},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":188,"value":641},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":191,"value":643},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":194,"value":645},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":197,"value":647},"there-is-an-html-code-will-font-weight-affect-span",{"name":200,"value":649},"what-are-the-differences-between-flexbox-and-grid",{"name":203,"value":651},"do-flexbox-and-grid-replace-each-other",{"name":206,"value":653},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":169,"value":655},"tasks",{"name":272,"value":657},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":145,"value":659},"what-is-this-in-javascript",{"name":277,"value":661},"what-is-an-event-loop-and-how-does-it-work",{"name":280,"value":663},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":283,"value":665},"what-does-the-typeof-operator-show-in-javascript",{"name":286,"value":667},"what-types-of-data-exist-in-javascript",{"name":289,"value":669},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":292,"value":671},"what-will-typeof-return-for-an-array",{"name":295,"value":673},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":298,"value":675},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":301,"value":677},"what-does-typeof-return-for-new-set-in-javascript",{"name":370,"value":679},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":376,"value":681},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":379,"value":683},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":382,"value":685},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":385,"value":687},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":403,"value":689},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":212,"value":691},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":215,"value":693},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":218,"value":695},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":493,"value":697},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":176,"value":699},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":179,"value":701},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":394,"value":703},"what-is-algorithmic-complexity",{"name":397,"value":705},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":304,"value":707},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":466,"value":709},"how-can-a-user-be-authorized-on-a-website",{"name":307,"value":711},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":499,"value":713},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":502,"value":715},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":505,"value":717},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":159,"value":160},{"name":454,"value":720},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":412,"value":722},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":254,"value":724},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":373,"value":726},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":388,"value":728},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":730,"copyright":733,"reportError":734,"socialNetwork":736},{"link":731,"title":732},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":735,"link":731},"Сообщить об ошибке",{"label":737,"socialNetworkList":738},"Мы в соцсетях:",[739,742,745],{"icon":65,"link":740,"title":741},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":743,"link":731,"title":744},"ic:baseline-telegram","Telegram",{"icon":746,"link":747,"title":748},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":750,"body":751},{},{"type":752,"children":753},"root",[754],{"type":755,"tag":756,"props":757,"children":758},"element","p",{},[759,762,769],{"type":760,"value":761},"text","Что такое ",{"type":755,"tag":763,"props":764,"children":766},"code",{"className":765},[],[767],{"type":760,"value":768},"this",{"type":760,"value":770}," в JavaScript?",{"data":772,"body":773},{},{"type":752,"children":774},[775],{"type":755,"tag":756,"props":776,"children":777},{},[778,783],{"type":755,"tag":763,"props":779,"children":781},{"className":780},[],[782],{"type":760,"value":768},{"type":760,"value":784}," всегда указывает на объект, в котором функция была объявлена",{"data":786,"body":787},{},{"type":752,"children":788},[789],{"type":755,"tag":756,"props":790,"children":791},{},[792,797,799,805],{"type":755,"tag":763,"props":793,"children":795},{"className":794},[],[796],{"type":760,"value":768},{"type":760,"value":798}," всегда равен ",{"type":755,"tag":763,"props":800,"children":802},{"className":801},[],[803],{"type":760,"value":804},"window",{"type":760,"value":806}," в браузере, независимо от строгого режима",{"data":808,"body":809},{},{"type":752,"children":810},[811],{"type":755,"tag":756,"props":812,"children":813},{},[814,819],{"type":755,"tag":763,"props":815,"children":817},{"className":816},[],[818],{"type":760,"value":768},{"type":760,"value":820}," — это переменная, которая копируется в функцию при её создании и не может измениться при вызове",{"data":822,"body":823},{},{"type":752,"children":824},[825],{"type":755,"tag":756,"props":826,"children":827},{},[828,830,836,838,844,845,851],{"type":760,"value":829},"this — это значение контекста, которое вычисляется при вызове функции по тому, как именно она вызывается (",{"type":755,"tag":763,"props":831,"children":833},{"className":832},[],[834],{"type":760,"value":835},"obj.fn()",{"type":760,"value":837},", ",{"type":755,"tag":763,"props":839,"children":841},{"className":840},[],[842],{"type":760,"value":843},"fn.call(...)",{"type":760,"value":837},{"type":755,"tag":763,"props":846,"children":848},{"className":847},[],[849],{"type":760,"value":850},"new Fn()",{"type":760,"value":852}," и т. п.)",{"data":854,"body":855},{},{"type":752,"children":856},[857],{"type":755,"tag":756,"props":858,"children":859},{},[860,862,867,868,874,875,880,882,888,890,895,897,902],{"type":760,"value":861},"Для выбора верного пункта в тесте достаточно представить одну и ту же функцию, вызванную разными способами: ",{"type":755,"tag":763,"props":863,"children":865},{"className":864},[],[866],{"type":760,"value":835},{"type":760,"value":837},{"type":755,"tag":763,"props":869,"children":871},{"className":870},[],[872],{"type":760,"value":873},"fn.call(obj)",{"type":760,"value":837},{"type":755,"tag":763,"props":876,"children":878},{"className":877},[],[879],{"type":760,"value":850},{"type":760,"value":881}," и ",{"type":755,"tag":763,"props":883,"children":885},{"className":884},[],[886],{"type":760,"value":887},"fn()",{"type":760,"value":889}," (особенно в strict mode). Если результаты по ",{"type":755,"tag":763,"props":891,"children":893},{"className":892},[],[894],{"type":760,"value":768},{"type":760,"value":896}," различаются, значит ",{"type":755,"tag":763,"props":898,"children":900},{"className":899},[],[901],{"type":760,"value":768},{"type":760,"value":903}," вычисляется при вызове, и верным является утверждение про зависимость от способа вызова.",{"data":905,"body":906},{},{"type":752,"children":907},[908,925,930,945],{"type":755,"tag":756,"props":909,"children":910},{},[911,916,918,923],{"type":755,"tag":763,"props":912,"children":914},{"className":913},[],[915],{"type":760,"value":768},{"type":760,"value":917}," — это специальное значение (не «переменная в обычном смысле»), доступное внутри функции, которое обычно указывает на объект, через который функция была вызвана. Иначе говоря, ",{"type":755,"tag":763,"props":919,"children":921},{"className":920},[],[922],{"type":760,"value":768},{"type":760,"value":924}," отвечает на вопрос: «какой объект является получателем вызова прямо сейчас».",{"type":755,"tag":756,"props":926,"children":927},{},[928],{"type":760,"value":929},"Важно различать два похожих утверждения:",{"type":755,"tag":931,"props":932,"children":933},"ul",{},[934,940],{"type":755,"tag":935,"props":936,"children":937},"li",{},[938],{"type":760,"value":939},"«Функция объявлена внутри объекта» (место объявления)",{"type":755,"tag":935,"props":941,"children":942},{},[943],{"type":760,"value":944},"«Функция вызвана как метод объекта» (форма вызова)",{"type":755,"tag":756,"props":946,"children":947},{},[948,953],{"type":755,"tag":763,"props":949,"children":951},{"className":950},[],[952],{"type":760,"value":768},{"type":760,"value":954}," в обычных функциях зависит именно от формы вызова.",{"data":956,"body":957},{},{"type":752,"children":958},[959],{"type":755,"tag":756,"props":960,"children":961},{},[962,964,969],{"type":760,"value":963},"Для обычных функций (function declaration, function expression, методы объектов и классов) действует принцип: значение ",{"type":755,"tag":763,"props":965,"children":967},{"className":966},[],[968],{"type":760,"value":768},{"type":760,"value":970}," определяется тем, как функция вызвана.",{"data":972,"body":973},{},{"type":752,"children":974},[975],{"type":755,"tag":976,"props":977,"children":978},"table",{},[979,1008],{"type":755,"tag":980,"props":981,"children":982},"thead",{},[983],{"type":755,"tag":984,"props":985,"children":986},"tr",{},[987,993,998],{"type":755,"tag":988,"props":989,"children":990},"th",{},[991],{"type":760,"value":992},"Как вызывается функция",{"type":755,"tag":988,"props":994,"children":995},{},[996],{"type":760,"value":997},"Пример вызова",{"type":755,"tag":988,"props":999,"children":1000},{},[1001,1003],{"type":760,"value":1002},"Какое значение ",{"type":755,"tag":763,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":760,"value":768},{"type":755,"tag":1009,"props":1010,"children":1011},"tbody",{},[1012,1047,1074,1108,1137,1158],{"type":755,"tag":984,"props":1013,"children":1014},{},[1015,1021,1029],{"type":755,"tag":1016,"props":1017,"children":1018},"td",{},[1019],{"type":760,"value":1020},"Обычный вызов",{"type":755,"tag":1016,"props":1022,"children":1023},{},[1024],{"type":755,"tag":763,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":760,"value":887},{"type":755,"tag":1016,"props":1030,"children":1031},{},[1032,1034,1039,1041],{"type":760,"value":1033},"В нестрогом режиме: глобальный объект (в браузере часто ",{"type":755,"tag":763,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":760,"value":804},{"type":760,"value":1040},"); в строгом режиме: ",{"type":755,"tag":763,"props":1042,"children":1044},{"className":1043},[],[1045],{"type":760,"value":1046},"undefined",{"type":755,"tag":984,"props":1048,"children":1049},{},[1050,1055,1063],{"type":755,"tag":1016,"props":1051,"children":1052},{},[1053],{"type":760,"value":1054},"Вызов как метод",{"type":755,"tag":1016,"props":1056,"children":1057},{},[1058],{"type":755,"tag":763,"props":1059,"children":1061},{"className":1060},[],[1062],{"type":760,"value":835},{"type":755,"tag":1016,"props":1064,"children":1065},{},[1066,1072],{"type":755,"tag":763,"props":1067,"children":1069},{"className":1068},[],[1070],{"type":760,"value":1071},"obj",{"type":760,"value":1073}," (объект слева от точки на момент вызова)",{"type":755,"tag":984,"props":1075,"children":1076},{},[1077,1082,1099],{"type":755,"tag":1016,"props":1078,"children":1079},{},[1080],{"type":760,"value":1081},"Явная установка контекста",{"type":755,"tag":1016,"props":1083,"children":1084},{},[1085,1091,1093],{"type":755,"tag":763,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":760,"value":1090},"fn.call(ctx, a)",{"type":760,"value":1092}," / ",{"type":755,"tag":763,"props":1094,"children":1096},{"className":1095},[],[1097],{"type":760,"value":1098},"fn.apply(ctx, [a])",{"type":755,"tag":1016,"props":1100,"children":1101},{},[1102],{"type":755,"tag":763,"props":1103,"children":1105},{"className":1104},[],[1106],{"type":760,"value":1107},"ctx",{"type":755,"tag":984,"props":1109,"children":1110},{},[1111,1116,1125],{"type":755,"tag":1016,"props":1112,"children":1113},{},[1114],{"type":760,"value":1115},"Привязка контекста навсегда",{"type":755,"tag":1016,"props":1117,"children":1118},{},[1119],{"type":755,"tag":763,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":760,"value":1124},"fn.bind(ctx)",{"type":755,"tag":1016,"props":1126,"children":1127},{},[1128,1130,1135],{"type":760,"value":1129},"Всегда ",{"type":755,"tag":763,"props":1131,"children":1133},{"className":1132},[],[1134],{"type":760,"value":1107},{"type":760,"value":1136}," при вызове полученной функции",{"type":755,"tag":984,"props":1138,"children":1139},{},[1140,1145,1153],{"type":755,"tag":1016,"props":1141,"children":1142},{},[1143],{"type":760,"value":1144},"Конструктор",{"type":755,"tag":1016,"props":1146,"children":1147},{},[1148],{"type":755,"tag":763,"props":1149,"children":1151},{"className":1150},[],[1152],{"type":760,"value":850},{"type":755,"tag":1016,"props":1154,"children":1155},{},[1156],{"type":760,"value":1157},"Новый созданный объект",{"type":755,"tag":984,"props":1159,"children":1160},{},[1161,1166,1175],{"type":755,"tag":1016,"props":1162,"children":1163},{},[1164],{"type":760,"value":1165},"Стрелочная функция",{"type":755,"tag":1016,"props":1167,"children":1168},{},[1169],{"type":755,"tag":763,"props":1170,"children":1172},{"className":1171},[],[1173],{"type":760,"value":1174},"() => this",{"type":755,"tag":1016,"props":1176,"children":1177},{},[1178,1183,1185],{"type":755,"tag":763,"props":1179,"children":1181},{"className":1180},[],[1182],{"type":760,"value":768},{"type":760,"value":1184}," берётся из внешнего лексического окружения и не меняется ",{"type":755,"tag":763,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":760,"value":1190},"call/apply/bind",{"data":1192,"body":1193},{},{"type":752,"children":1194},[1195,1207],{"type":755,"tag":756,"props":1196,"children":1197},{},[1198,1200,1205],{"type":760,"value":1199},"Упрощённый порядок проверки для вычисления ",{"type":755,"tag":763,"props":1201,"children":1203},{"className":1202},[],[1204],{"type":760,"value":768},{"type":760,"value":1206},":",{"type":755,"tag":1208,"props":1209,"children":1210},"ol",{},[1211,1223,1243,1262,1281,1307],{"type":755,"tag":935,"props":1212,"children":1213},{},[1214,1216,1221],{"type":760,"value":1215},"Если функция стрелочная, то ",{"type":755,"tag":763,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":760,"value":768},{"type":760,"value":1222}," берётся снаружи (лексически)",{"type":755,"tag":935,"props":1224,"children":1225},{},[1226,1228,1234,1236,1241],{"type":760,"value":1227},"Иначе, если вызов с ",{"type":755,"tag":763,"props":1229,"children":1231},{"className":1230},[],[1232],{"type":760,"value":1233},"new",{"type":760,"value":1235},", то ",{"type":755,"tag":763,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":760,"value":768},{"type":760,"value":1242}," — новый объект",{"type":755,"tag":935,"props":1244,"children":1245},{},[1246,1248,1254,1255,1260],{"type":760,"value":1247},"Иначе, если есть ",{"type":755,"tag":763,"props":1249,"children":1251},{"className":1250},[],[1252],{"type":760,"value":1253},"bind",{"type":760,"value":1235},{"type":755,"tag":763,"props":1256,"children":1258},{"className":1257},[],[1259],{"type":760,"value":768},{"type":760,"value":1261}," — привязанный объект",{"type":755,"tag":935,"props":1263,"children":1264},{},[1265,1267,1273,1274,1279],{"type":760,"value":1266},"Иначе, если вызов через ",{"type":755,"tag":763,"props":1268,"children":1270},{"className":1269},[],[1271],{"type":760,"value":1272},"call/apply",{"type":760,"value":1235},{"type":755,"tag":763,"props":1275,"children":1277},{"className":1276},[],[1278],{"type":760,"value":768},{"type":760,"value":1280}," — переданный объект",{"type":755,"tag":935,"props":1282,"children":1283},{},[1284,1286,1292,1293,1298,1300,1305],{"type":760,"value":1285},"Иначе, если вызов как ",{"type":755,"tag":763,"props":1287,"children":1289},{"className":1288},[],[1290],{"type":760,"value":1291},"obj.method()",{"type":760,"value":1235},{"type":755,"tag":763,"props":1294,"children":1296},{"className":1295},[],[1297],{"type":760,"value":768},{"type":760,"value":1299}," — ",{"type":755,"tag":763,"props":1301,"children":1303},{"className":1302},[],[1304],{"type":760,"value":1071},{"type":760,"value":1306}," (то, что слева от точки)",{"type":755,"tag":935,"props":1308,"children":1309},{},[1310,1312,1317,1319,1324],{"type":760,"value":1311},"Иначе обычный вызов: ",{"type":755,"tag":763,"props":1313,"children":1315},{"className":1314},[],[1316],{"type":760,"value":768},{"type":760,"value":1318}," равен ",{"type":755,"tag":763,"props":1320,"children":1322},{"className":1321},[],[1323],{"type":760,"value":1046},{"type":760,"value":1325}," в strict mode, либо глобальному объекту в нестрогом режиме",{"data":1327,"body":1328},{},{"type":752,"children":1329},[1330,1342,1354,1363],{"type":755,"tag":756,"props":1331,"children":1332},{},[1333,1335,1340],{"type":760,"value":1334},"В обычном вызове нет объекта-получателя, поэтому ",{"type":755,"tag":763,"props":1336,"children":1338},{"className":1337},[],[1339],{"type":760,"value":768},{"type":760,"value":1341}," подставляется по правилам режима выполнения.",{"type":755,"tag":1343,"props":1344,"children":1348},"pre",{"className":1345,"code":1347,"language":760},[1346],"language-text","// Нестрогий режим (пример для браузера)\nfunction g() {\n  return this === window;\n}\nconsole.log(g()); // true (часто так в браузере, если не модуль и не strict)\n",[1349],{"type":755,"tag":763,"props":1350,"children":1352},{"__ignoreMap":1351},"",[1353],{"type":760,"value":1347},{"type":755,"tag":1343,"props":1355,"children":1358},{"className":1356,"code":1357,"language":760},[1346],"// Строгий режим\nfunction s() {\n  \"use strict\";\n  return this;\n}\nconsole.log(s()); // undefined\n",[1359],{"type":755,"tag":763,"props":1360,"children":1361},{"__ignoreMap":1351},[1362],{"type":760,"value":1357},{"type":755,"tag":756,"props":1364,"children":1365},{},[1366,1368,1373,1375,1380],{"type":760,"value":1367},"Замечание: в современных проектах часто используются ES-модули и строгий режим, поэтому ожидание «",{"type":755,"tag":763,"props":1369,"children":1371},{"className":1370},[],[1372],{"type":760,"value":768},{"type":760,"value":1374}," всегда ",{"type":755,"tag":763,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":760,"value":804},{"type":760,"value":1381},"» является небезопасным.",{"data":1383,"body":1384},{},{"type":752,"children":1385},[1386,1398,1407,1419],{"type":755,"tag":756,"props":1387,"children":1388},{},[1389,1391,1396],{"type":760,"value":1390},"Если функция вызывается через свойство объекта, то ",{"type":755,"tag":763,"props":1392,"children":1394},{"className":1393},[],[1395],{"type":760,"value":768},{"type":760,"value":1397}," получает значение объекта слева от точки.",{"type":755,"tag":1343,"props":1399,"children":1402},{"className":1400,"code":1401,"language":760},[1346],"const user = {\n  name: \"Ирина\",\n  getName() {\n    return this.name;\n  }\n};\n\nconsole.log(user.getName()); // \"Ирина\"\n",[1403],{"type":755,"tag":763,"props":1404,"children":1405},{"__ignoreMap":1351},[1406],{"type":760,"value":1401},{"type":755,"tag":756,"props":1408,"children":1409},{},[1410,1412,1417],{"type":760,"value":1411},"Ключевой момент: важна форма вызова, а не то, где функция была написана. При «отрыве» метода ",{"type":755,"tag":763,"props":1413,"children":1415},{"className":1414},[],[1416],{"type":760,"value":768},{"type":760,"value":1418}," теряется.",{"type":755,"tag":1343,"props":1420,"children":1423},{"className":1421,"code":1422,"language":760},[1346],"const user = {\n  name: \"Ирина\",\n  getName() {\n    return this.name;\n  }\n};\n\nconst fn = user.getName;\nconsole.log(fn()); // strict: ошибка (this = undefined), non-strict: может быть window.name\n",[1424],{"type":755,"tag":763,"props":1425,"children":1426},{"__ignoreMap":1351},[1427],{"type":760,"value":1422},{"data":1429,"body":1430},{},{"type":752,"children":1431},[1432,1458],{"type":755,"tag":756,"props":1433,"children":1434},{},[1435,1441,1443,1449,1451,1456],{"type":755,"tag":763,"props":1436,"children":1438},{"className":1437},[],[1439],{"type":760,"value":1440},"call",{"type":760,"value":1442}," принимает аргументы списком, ",{"type":755,"tag":763,"props":1444,"children":1446},{"className":1445},[],[1447],{"type":760,"value":1448},"apply",{"type":760,"value":1450}," принимает массив аргументов. Оба метода устанавливают ",{"type":755,"tag":763,"props":1452,"children":1454},{"className":1453},[],[1455],{"type":760,"value":768},{"type":760,"value":1457}," явно.",{"type":755,"tag":1343,"props":1459,"children":1462},{"className":1460,"code":1461,"language":760},[1346],"function sum(a, b) {\n  return this.base + a + b;\n}\n\nconst ctx = { base: 10 };\n\nconsole.log(sum.call(ctx, 1, 2));    // 13\nconsole.log(sum.apply(ctx, [1, 2])); // 13\n",[1463],{"type":755,"tag":763,"props":1464,"children":1465},{"__ignoreMap":1351},[1466],{"type":760,"value":1461},{"data":1468,"body":1469},{},{"type":752,"children":1470},[1471],{"type":755,"tag":756,"props":1472,"children":1473},{},[1474,1476,1481],{"type":760,"value":1475},"Это прямое доказательство, что ",{"type":755,"tag":763,"props":1477,"children":1479},{"className":1478},[],[1480],{"type":760,"value":768},{"type":760,"value":1482}," не «вшит» в функцию навсегда, а задаётся вызовом.",{"data":1484,"body":1485},{},{"type":752,"children":1486},[1487,1504,1513],{"type":755,"tag":756,"props":1488,"children":1489},{},[1490,1495,1497,1502],{"type":755,"tag":763,"props":1491,"children":1493},{"className":1492},[],[1494],{"type":760,"value":1253},{"type":760,"value":1496}," возвращает новую функцию с заранее привязанным ",{"type":755,"tag":763,"props":1498,"children":1500},{"className":1499},[],[1501],{"type":760,"value":768},{"type":760,"value":1503},". Эта привязка не зависит от дальнейшей формы вызова.",{"type":755,"tag":1343,"props":1505,"children":1508},{"className":1506,"code":1507,"language":760},[1346],"function greet() {\n  return \"Привет, \" + this.name;\n}\n\nconst user = { name: \"Олег\" };\nconst bound = greet.bind(user);\n\nconsole.log(bound()); // \"Привет, Олег\"\n",[1509],{"type":755,"tag":763,"props":1510,"children":1511},{"__ignoreMap":1351},[1512],{"type":760,"value":1507},{"type":755,"tag":1343,"props":1514,"children":1517},{"className":1515,"code":1516,"language":760},[1346],"const other = { name: \"Наталья\" };\nconsole.log(bound.call(other)); // всё равно \"Привет, Олег\"\n",[1518],{"type":755,"tag":763,"props":1519,"children":1520},{"__ignoreMap":1351},[1521],{"type":760,"value":1516},{"data":1523,"body":1524},{},{"type":752,"children":1525},[1526,1545],{"type":755,"tag":756,"props":1527,"children":1528},{},[1529,1531,1536,1538,1543],{"type":760,"value":1530},"Вызов с ",{"type":755,"tag":763,"props":1532,"children":1534},{"className":1533},[],[1535],{"type":760,"value":1233},{"type":760,"value":1537}," создаёт новый объект и делает его значением ",{"type":755,"tag":763,"props":1539,"children":1541},{"className":1540},[],[1542],{"type":760,"value":768},{"type":760,"value":1544}," внутри функции-конструктора.",{"type":755,"tag":1343,"props":1546,"children":1549},{"className":1547,"code":1548,"language":760},[1346],"function Person(name) {\n  this.name = name;\n}\n\nconst p = new Person(\"Анна\");\nconsole.log(p.name); // \"Анна\"\n",[1550],{"type":755,"tag":763,"props":1551,"children":1552},{"__ignoreMap":1351},[1553],{"type":760,"value":1548},{"data":1555,"body":1556},{},{"type":752,"children":1557},[1558],{"type":755,"tag":756,"props":1559,"children":1560},{},[1561,1563,1568,1570,1575,1577,1582],{"type":760,"value":1562},"Вызов функции-конструктора без ",{"type":755,"tag":763,"props":1564,"children":1566},{"className":1565},[],[1567],{"type":760,"value":1233},{"type":760,"value":1569}," часто приводит к некорректному ",{"type":755,"tag":763,"props":1571,"children":1573},{"className":1572},[],[1574],{"type":760,"value":768},{"type":760,"value":1576}," (в strict mode это обычно ",{"type":755,"tag":763,"props":1578,"children":1580},{"className":1579},[],[1581],{"type":760,"value":1046},{"type":760,"value":1583},", в нестрогом режиме — глобальный объект), поэтому такая запись считается источником ошибок.",{"data":1585,"body":1586},{},{"type":752,"children":1587},[1588,1607,1612,1621,1641],{"type":755,"tag":756,"props":1589,"children":1590},{},[1591,1593,1598,1600,1605],{"type":760,"value":1592},"Стрелочная функция не создаёт собственный ",{"type":755,"tag":763,"props":1594,"children":1596},{"className":1595},[],[1597],{"type":760,"value":768},{"type":760,"value":1599},". Вместо этого она «захватывает» ",{"type":755,"tag":763,"props":1601,"children":1603},{"className":1602},[],[1604],{"type":760,"value":768},{"type":760,"value":1606}," из внешней области, где была создана.",{"type":755,"tag":756,"props":1608,"children":1609},{},[1610],{"type":760,"value":1611},"Это удобно для колбэков внутри методов, когда требуется сохранить контекст объекта.",{"type":755,"tag":1343,"props":1613,"children":1616},{"className":1614,"code":1615,"language":760},[1346],"const counter = {\n  value: 0,\n  incLater() {\n    setTimeout(() => {\n      this.value++;\n      console.log(this.value);\n    }, 10);\n  }\n};\n\ncounter.incLater(); // 1\n",[1617],{"type":755,"tag":763,"props":1618,"children":1619},{"__ignoreMap":1351},[1620],{"type":760,"value":1615},{"type":755,"tag":756,"props":1622,"children":1623},{},[1624,1626,1631,1633,1639],{"type":760,"value":1625},"Если заменить стрелочную функцию на обычную, ",{"type":755,"tag":763,"props":1627,"children":1629},{"className":1628},[],[1630],{"type":760,"value":768},{"type":760,"value":1632}," внутри колбэка будет определяться способом вызова колбэка, а не объектом ",{"type":755,"tag":763,"props":1634,"children":1636},{"className":1635},[],[1637],{"type":760,"value":1638},"counter",{"type":760,"value":1640},".",{"type":755,"tag":1343,"props":1642,"children":1645},{"className":1643,"code":1644,"language":760},[1346],"const counter = {\n  value: 0,\n  incLater() {\n    setTimeout(function () {\n      \"use strict\";\n      // this здесь undefined, так как это обычный вызов функции\n      // console.log(this.value); // ошибка\n    }, 10);\n  }\n};\n",[1646],{"type":755,"tag":763,"props":1647,"children":1648},{"__ignoreMap":1351},[1649],{"type":760,"value":1644},{"data":1651,"body":1652},{},{"type":752,"children":1653},[1654],{"type":755,"tag":756,"props":1655,"children":1656},{},[1657,1659,1664,1666,1671],{"type":760,"value":1658},"Стрелочные функции плохо подходят в роли методов, если требуется динамический ",{"type":755,"tag":763,"props":1660,"children":1662},{"className":1661},[],[1663],{"type":760,"value":768},{"type":760,"value":1665}," при вызове ",{"type":755,"tag":763,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":760,"value":1291},{"type":760,"value":1640},{"data":1673,"body":1674},{},{"type":752,"children":1675},[1676,1703],{"type":755,"tag":756,"props":1677,"children":1678},{},[1679,1681,1687,1689,1694,1696,1701],{"type":760,"value":1680},"В DOM-обработчиках, добавленных через ",{"type":755,"tag":763,"props":1682,"children":1684},{"className":1683},[],[1685],{"type":760,"value":1686},"addEventListener",{"type":760,"value":1688},", обычная функция обычно получает ",{"type":755,"tag":763,"props":1690,"children":1692},{"className":1691},[],[1693],{"type":760,"value":768},{"type":760,"value":1695},", равный элементу, на котором сработало событие. У стрелочной функции такого поведения нет, потому что ",{"type":755,"tag":763,"props":1697,"children":1699},{"className":1698},[],[1700],{"type":760,"value":768},{"type":760,"value":1702}," у неё лексический.",{"type":755,"tag":1343,"props":1704,"children":1707},{"className":1705,"code":1706,"language":760},[1346],"const button = document.querySelector(\"button\");\n\nbutton.addEventListener(\"click\", function () {\n  console.log(this === button); // true\n});\n\nbutton.addEventListener(\"click\", () => {\n  console.log(this === button); // false\n});\n",[1708],{"type":755,"tag":763,"props":1709,"children":1710},{"__ignoreMap":1351},[1711],{"type":760,"value":1706},{"data":1713,"body":1714},{},{"type":752,"children":1715},[1716,1728,1737,1742],{"type":755,"tag":756,"props":1717,"children":1718},{},[1719,1721,1726],{"type":760,"value":1720},"Методы классов — это обычные функции. При присваивании метода в переменную и вызове как ",{"type":755,"tag":763,"props":1722,"children":1724},{"className":1723},[],[1725],{"type":760,"value":887},{"type":760,"value":1727}," контекст теряется.",{"type":755,"tag":1343,"props":1729,"children":1732},{"className":1730,"code":1731,"language":760},[1346],"class User {\n  constructor(name) {\n    this.name = name;\n  }\n  getName() {\n    return this.name;\n  }\n}\n\nconst u = new User(\"Светлана\");\nconst fn = u.getName;\n\ntry {\n  console.log(fn()); // strict: ошибка, так как this = undefined\n} catch (e) {\n  console.log(\"Ошибка из-за потерянного this\");\n}\n",[1733],{"type":755,"tag":763,"props":1734,"children":1735},{"__ignoreMap":1351},[1736],{"type":760,"value":1731},{"type":755,"tag":756,"props":1738,"children":1739},{},[1740],{"type":760,"value":1741},"Типовые способы избежать проблемы:",{"type":755,"tag":931,"props":1743,"children":1744},{},[1745,1757],{"type":755,"tag":935,"props":1746,"children":1747},{},[1748,1750,1755],{"type":760,"value":1749},"фиксировать контекст через ",{"type":755,"tag":763,"props":1751,"children":1753},{"className":1752},[],[1754],{"type":760,"value":1253},{"type":760,"value":1756}," (например, в конструкторе),",{"type":755,"tag":935,"props":1758,"children":1759},{},[1760,1762,1767],{"type":760,"value":1761},"использовать стрелочную функцию там, где требуется лексический ",{"type":755,"tag":763,"props":1763,"children":1765},{"className":1764},[],[1766],{"type":760,"value":768},{"type":760,"value":1768}," (например, для колбэка), но не как универсальную замену методов.",{"data":1770,"body":1771},{},{"type":752,"children":1772},[1773,1806],{"type":755,"tag":756,"props":1774,"children":1775},{},[1776,1778,1783,1785,1790,1792,1797,1799,1804],{"type":760,"value":1777},"В ECMAScript значение ",{"type":755,"tag":763,"props":1779,"children":1781},{"className":1780},[],[1782],{"type":760,"value":768},{"type":760,"value":1784}," при вызове обычной функции связано с тем, вызывается ли функция как «свойство объекта» (когда есть база вызова, например в ",{"type":755,"tag":763,"props":1786,"children":1788},{"className":1787},[],[1789],{"type":760,"value":835},{"type":760,"value":1791},"), или как самостоятельная функция ",{"type":755,"tag":763,"props":1793,"children":1795},{"className":1794},[],[1796],{"type":760,"value":887},{"type":760,"value":1798},". Для стрелочных функций ",{"type":755,"tag":763,"props":1800,"children":1802},{"className":1801},[],[1803],{"type":760,"value":768},{"type":760,"value":1805}," не формируется механизмом вызова, а берётся из внешнего лексического окружения.",{"type":755,"tag":756,"props":1807,"children":1808},{},[1809],{"type":760,"value":1810},"На практике это сводится к правилу: необходимо смотреть на форму вызова, а не на место объявления функции.",{"data":1812,"body":1813},{},{"type":752,"children":1814},[1815],{"type":755,"tag":756,"props":1816,"children":1817},{},[1818,1820,1825,1827,1832,1833,1838,1839,1844,1845,1850,1852,1857,1859,1864,1866,1871,1873,1878,1880,1885],{"type":760,"value":1819},"В итоге: ",{"type":755,"tag":763,"props":1821,"children":1823},{"className":1822},[],[1824],{"type":760,"value":768},{"type":760,"value":1826}," в JavaScript (для обычных функций) определяется в момент вызова и зависит от формы вызова (",{"type":755,"tag":763,"props":1828,"children":1830},{"className":1829},[],[1831],{"type":760,"value":835},{"type":760,"value":837},{"type":755,"tag":763,"props":1834,"children":1836},{"className":1835},[],[1837],{"type":760,"value":1272},{"type":760,"value":837},{"type":755,"tag":763,"props":1840,"children":1842},{"className":1841},[],[1843],{"type":760,"value":1253},{"type":760,"value":837},{"type":755,"tag":763,"props":1846,"children":1848},{"className":1847},[],[1849],{"type":760,"value":1233},{"type":760,"value":1851},"). В строгом режиме при обычном вызове ",{"type":755,"tag":763,"props":1853,"children":1855},{"className":1854},[],[1856],{"type":760,"value":887},{"type":760,"value":1858}," значение ",{"type":755,"tag":763,"props":1860,"children":1862},{"className":1861},[],[1863],{"type":760,"value":768},{"type":760,"value":1865}," равно ",{"type":755,"tag":763,"props":1867,"children":1869},{"className":1868},[],[1870],{"type":760,"value":1046},{"type":760,"value":1872},". У стрелочных функций ",{"type":755,"tag":763,"props":1874,"children":1876},{"className":1875},[],[1877],{"type":760,"value":768},{"type":760,"value":1879}," берётся из внешней области и не меняется при ",{"type":755,"tag":763,"props":1881,"children":1883},{"className":1882},[],[1884],{"type":760,"value":1190},{"type":760,"value":1640},{"data":1887,"body":1888},{},{"type":752,"children":1889},[1890],{"type":755,"tag":1343,"props":1891,"children":1894},{"className":1892,"code":1893,"language":760},[1346],"const obj = {\n  x: 1,\n  getX: () => this && this.x\n};\n\nconsole.log(obj.getX()); // обычно undefined, так как this взят снаружи\n",[1895],{"type":755,"tag":763,"props":1896,"children":1897},{"__ignoreMap":1351},[1898],{"type":760,"value":1893},{"data":1900,"body":1901},{},{"type":752,"children":1902},[1903,1939,1947,1959,1968,1973,2035,2044,2089,2172],{"type":755,"tag":756,"props":1904,"children":1905},{},[1906,1912,1914,1919,1921,1926,1927,1932,1933,1938],{"type":755,"tag":1907,"props":1908,"children":1909},"strong",{},[1910],{"type":760,"value":1911},"Правильный ответ - 4",{"type":760,"value":1913},": ",{"type":755,"tag":763,"props":1915,"children":1917},{"className":1916},[],[1918],{"type":760,"value":768},{"type":760,"value":1920}," — это значение контекста, которое вычисляется при вызове функции по тому, как именно она вызывается (",{"type":755,"tag":763,"props":1922,"children":1924},{"className":1923},[],[1925],{"type":760,"value":835},{"type":760,"value":837},{"type":755,"tag":763,"props":1928,"children":1930},{"className":1929},[],[1931],{"type":760,"value":843},{"type":760,"value":837},{"type":755,"tag":763,"props":1934,"children":1936},{"className":1935},[],[1937],{"type":760,"value":850},{"type":760,"value":852},{"type":755,"tag":756,"props":1940,"children":1941},{},[1942],{"type":755,"tag":1907,"props":1943,"children":1944},{},[1945],{"type":760,"value":1946},"Почему варианты 1–3 неверны",{"type":755,"tag":756,"props":1948,"children":1949},{},[1950,1952,1957],{"type":760,"value":1951},"Вариант 1 («this всегда указывает на объект, в котором функция была объявлена») неверен, потому что одну и ту же функцию можно присвоить разным объектам и вызвать через них, и ",{"type":755,"tag":763,"props":1953,"children":1955},{"className":1954},[],[1956],{"type":760,"value":768},{"type":760,"value":1958}," будет разным.",{"type":755,"tag":1343,"props":1960,"children":1963},{"className":1961,"code":1962,"language":760},[1346],"function showName() {\n  return this && this.name;\n}\n\nconst a = { name: \"A\", showName };\nconst b = { name: \"B\", showName };\n\nconsole.log(a.showName()); // \"A\"\nconsole.log(b.showName()); // \"B\"\n",[1964],{"type":755,"tag":763,"props":1965,"children":1966},{"__ignoreMap":1351},[1967],{"type":760,"value":1962},{"type":755,"tag":756,"props":1969,"children":1970},{},[1971],{"type":760,"value":1972},"Вариант 2 («this всегда равен window в браузере, независимо от строгого режима») неверен по причинам:",{"type":755,"tag":931,"props":1974,"children":1975},{},[1976,1999,2016],{"type":755,"tag":935,"props":1977,"children":1978},{},[1979,1981,1986,1987,1992,1994],{"type":760,"value":1980},"В строгом режиме при обычном вызове функции ",{"type":755,"tag":763,"props":1982,"children":1984},{"className":1983},[],[1985],{"type":760,"value":768},{"type":760,"value":1318},{"type":755,"tag":763,"props":1988,"children":1990},{"className":1989},[],[1991],{"type":760,"value":1046},{"type":760,"value":1993},", а не ",{"type":755,"tag":763,"props":1995,"children":1997},{"className":1996},[],[1998],{"type":760,"value":804},{"type":755,"tag":935,"props":2000,"children":2001},{},[2002,2004,2009,2011],{"type":760,"value":2003},"В ES-модулях верхнеуровневый ",{"type":755,"tag":763,"props":2005,"children":2007},{"className":2006},[],[2008],{"type":760,"value":768},{"type":760,"value":2010}," не равен ",{"type":755,"tag":763,"props":2012,"children":2014},{"className":2013},[],[2015],{"type":760,"value":804},{"type":755,"tag":935,"props":2017,"children":2018},{},[2019,2021,2026,2028,2033],{"type":760,"value":2020},"Вне браузера глобальный объект не ",{"type":755,"tag":763,"props":2022,"children":2024},{"className":2023},[],[2025],{"type":760,"value":804},{"type":760,"value":2027},", а ",{"type":755,"tag":763,"props":2029,"children":2031},{"className":2030},[],[2032],{"type":760,"value":804},{"type":760,"value":2034}," может отсутствовать",{"type":755,"tag":1343,"props":2036,"children":2039},{"className":2037,"code":2038,"language":760},[1346],"function f() {\n  \"use strict\";\n  return this;\n}\n\nconsole.log(f()); // undefined\n",[2040],{"type":755,"tag":763,"props":2041,"children":2042},{"__ignoreMap":1351},[2043],{"type":760,"value":2038},{"type":755,"tag":756,"props":2045,"children":2046},{},[2047,2049,2054,2056,2061,2062,2067,2069,2074,2076,2081,2083,2088],{"type":760,"value":2048},"Вариант 3 («this копируется в функцию при создании и не может измениться при вызове») неверен, потому что для обычных функций ",{"type":755,"tag":763,"props":2050,"children":2052},{"className":2051},[],[2053],{"type":760,"value":768},{"type":760,"value":2055}," задаётся при вызове. Его можно явно подменять через ",{"type":755,"tag":763,"props":2057,"children":2059},{"className":2058},[],[2060],{"type":760,"value":1440},{"type":760,"value":881},{"type":755,"tag":763,"props":2063,"children":2065},{"className":2064},[],[2066],{"type":760,"value":1448},{"type":760,"value":2068},", фиксировать через ",{"type":755,"tag":763,"props":2070,"children":2072},{"className":2071},[],[2073],{"type":760,"value":1253},{"type":760,"value":2075},", а также получать новый ",{"type":755,"tag":763,"props":2077,"children":2079},{"className":2078},[],[2080],{"type":760,"value":768},{"type":760,"value":2082}," через ",{"type":755,"tag":763,"props":2084,"children":2086},{"className":2085},[],[2087],{"type":760,"value":1233},{"type":760,"value":1640},{"type":755,"tag":1343,"props":2090,"children":2095},{"className":2091,"code":2092,"language":2093,"meta":2094,"style":1351},"language-function shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  return this.x;\n}\n\nconst obj1 = { x: 1 };\nconst obj2 = { x: 2 };\n\nconsole.log(f.call(obj1)); // 1\nconsole.log(f.call(obj2)); // 2\n","function","f() {",[2096],{"type":755,"tag":763,"props":2097,"children":2098},{"__ignoreMap":1351},[2099,2110,2119,2128,2137,2146,2154,2163],{"type":755,"tag":2100,"props":2101,"children":2104},"span",{"class":2102,"line":2103},"line",1,[2105],{"type":755,"tag":2100,"props":2106,"children":2107},{},[2108],{"type":760,"value":2109},"  return this.x;\n",{"type":755,"tag":2100,"props":2111,"children":2113},{"class":2102,"line":2112},2,[2114],{"type":755,"tag":2100,"props":2115,"children":2116},{},[2117],{"type":760,"value":2118},"}\n",{"type":755,"tag":2100,"props":2120,"children":2122},{"class":2102,"line":2121},3,[2123],{"type":755,"tag":2100,"props":2124,"children":2125},{"emptyLinePlaceholder":8},[2126],{"type":760,"value":2127},"\n",{"type":755,"tag":2100,"props":2129,"children":2131},{"class":2102,"line":2130},4,[2132],{"type":755,"tag":2100,"props":2133,"children":2134},{},[2135],{"type":760,"value":2136},"const obj1 = { x: 1 };\n",{"type":755,"tag":2100,"props":2138,"children":2140},{"class":2102,"line":2139},5,[2141],{"type":755,"tag":2100,"props":2142,"children":2143},{},[2144],{"type":760,"value":2145},"const obj2 = { x: 2 };\n",{"type":755,"tag":2100,"props":2147,"children":2149},{"class":2102,"line":2148},6,[2150],{"type":755,"tag":2100,"props":2151,"children":2152},{"emptyLinePlaceholder":8},[2153],{"type":760,"value":2127},{"type":755,"tag":2100,"props":2155,"children":2157},{"class":2102,"line":2156},7,[2158],{"type":755,"tag":2100,"props":2159,"children":2160},{},[2161],{"type":760,"value":2162},"console.log(f.call(obj1)); // 1\n",{"type":755,"tag":2100,"props":2164,"children":2166},{"class":2102,"line":2165},8,[2167],{"type":755,"tag":2100,"props":2168,"children":2169},{},[2170],{"type":760,"value":2171},"console.log(f.call(obj2)); // 2\n",{"type":755,"tag":2173,"props":2174,"children":2175},"style",{},[2176],{"type":760,"value":2177},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",1775735658941]