31:[{"id":"f9dfdf5de95286da65440dcfd47576a28f19a8461b29dcb38f72108f08b39484e5c781e487f768982c0421bfd151f37d6001876adaef5e30312d7cf92d7dbbd4","href":"https://static.observableusercontent.com/files/f9dfdf5de95286da65440dcfd47576a28f19a8461b29dcb38f72108f08b39484e5c781e487f768982c0421bfd151f37d6001876adaef5e30312d7cf92d7dbbd4","name":"image.png","type":"image/png","lastModified":1637577423440.397,"size":4110}] 2f:{"title":"Классы и ООП, прототипное наследование, this (7/9)","cells":[{"id":0,"value":"# Классы и ООП, прототипное наследование, this (7/9)\n ***\n### Оглавление\n- [ООП](#oop)\n- [Классы](#classes)\n- [Прототипное наследование](#prototype)\n- [this](#_this)\n\n***","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"oop = md`## ООП\nОбъектно-ориентированное программирование (ООП) позволяет группировать функции и данные в единой сущности – «объекте».\nПри объектно-ориентированной разработке мы описываем происходящее на уровне объектов, которые создаются, меняют свои свойства, взаимодействуют друг с другом и со страницей.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`\nПример создания объекта:\n\\`\\`\\`javascript\nfunction User(name) {\n \n this.sayHi = function() {\n alert( \"Привет, я \" + name );\n };\n \n}\n\nconst vasya = new User(\"Вася\"); // создали пользователя с именем Вася\nvasya.sayHi(); // пользователь умеет говорить \"Привет, я Вася\"\n\\`\\`\\`\nЗдесь мы видим ярко выраженную сущность – User (посетитель). Используя терминологию ООП, такие конструкторы часто называют классами, то есть можно сказать \"класс User\".\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"classes = md`
\n## Классы\nВ объектно-ориентированном программировании класс – это расширяемый шаблон кода для создания объектов, который устанавливает в них начальные значения (свойства) и реализацию поведения (методы). \n \nВ JavaScript есть продвинутая конструкция «class», которая предоставляет новые возможности, полезные для объектно-ориентированного программирования`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`\n### Синтаксис \"class\" \nБазовый синтаксис выглядит так: \n\\`\\`\\`javascript\nclass MyClass {\n // методы класса\n constructor() { ... }\n method1() { ... }\n method2() { ... }\n method3() { ... }\n ...\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`\nЧтобы создать объект класса, нужно использовать вызов \\`new MyClass()\\` \nПри этом автоматически вызывается метод \\`constructor()\\`, в нём мы можем инициализировать объект. \nНапример:\n\\`\\`\\`javascript\nclass User {\n\n constructor(name) {\n this.name = name;\n }\n\n sayHi() {\n alert(this.name);\n }\n\n}\n\n// Использование:\nconst user = new User(\"Иван\"); // создаётся объект user класса User\nuser.sayHi(); // у объекта вызываем метод sayHi(), который выведет \"Иван\"\n\\`\\`\\`\nКогда вызывается \\`new User(\"Иван\")\\`: \n- Создаётся новый объект. \n- constructor запускается с заданным аргументом и сохраняет его в \\`this\\`.name. \nЗатем можно вызывать на объекте методы, такие как user.sayHi().\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`\n### Class Expression \nКак и функции, классы можно определять внутри другого выражения, передавать, возвращать, присваивать и т.д. \nПример Class Expression (по аналогии с Function Expression):\n\\`\\`\\`javascript\nlet User = class {\n sayHi() {\n alert(\"Привет\");\n }\n};\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"prototype = md `
\n## Прототипное наследование\nВ программировании мы часто хотим взять что-то и расширить. \n \nНапример, у нас есть объект user со своими свойствами и методами, и мы хотим создать объекты admin и guest как его слегка изменённые варианты. Мы хотели бы повторно использовать то, что есть у объекта user, не копировать/переопределять его методы, а просто создать новый объект на его основе. \n \nПрототипное наследование — это возможность языка, которая помогает в этом.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"### [[Prototype]] \nВ JavaScript объекты имеют специальное скрытое свойство [[Prototype]], которое либо равно null, либо ссылается на другой объект. \nЭтот объект называется «прототип»:\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nТаким образом, когда мы хотим прочитать свойство из object, а оно отсутствует, JavaScript автоматически берёт его из прототипа. \nВ программировании такой механизм называется «прототипным наследованием». \nМногие интересные возможности языка и техники программирования основываются на нём.","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"Свойство [[Prototype]] является внутренним и скрытым, но есть много способов задать его. \nОдним из них является использование \\__proto\\__, например так:","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"md`\n\\`\\`\\`javascript\nlet animal = {\n eats: true\n};\nlet rabbit = {\n jumps: true\n};\n\nrabbit.__proto__ = animal;\n\\`\\`\\`\nТеперь animal является прототипом rabbit\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`\n
\nЕсли мы ищем свойство в rabbit, а оно отсутствует, JavaScript автоматически берёт его из animal. \nНапример:\n\\`\\`\\`javascript\nlet animal = {\n eats: true\n};\nlet rabbit = {\n jumps: true\n};\n\nrabbit.__proto__ = animal; // (*)\n\n// теперь мы можем найти оба свойства в rabbit:\nalert( rabbit.eats ); // true (**)\nalert( rabbit.jumps ); // true\n\\`\\`\\`\nЗдесь строка (\\\\*) устанавливает animal как прототип для rabbit. \nЗатем, когда alert пытается прочитать свойство rabbit.eats (**), его нет в rabbit, поэтому JavaScript следует по ссылке [[Prototype]] и находит его в animal:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"_this = md`\n
\n# \\`this\\` \nКак правило, методу объекта необходим доступ к информации, которая хранится в объекте, чтобы выполнить с ней какие-либо действия. \nДля доступа к информации внутри объекта метод может использовать ключевое слово \\`this\\`. \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md `\n
\nЗначение \\`this\\` – это объект «перед точкой», который использовался для вызова метода. \nНапример:\n\\`\\`\\`javascript\nlet user = {\n name: \"Джон\",\n age: 30,\n\n sayHi() {\n // this - это \"текущий объект\"\n alert(this.name);\n }\n\n};\n\nuser.sayHi(); // Джон\n\\`\\`\\`\nЗдесь во время выполнения кода user.sayHi() значением \\`this\\` будет являться user (ссылка на объект user).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`\n
\nТехнически также возможно получить доступ к объекту без ключевого слова \\`this\\`, ссылаясь на него через внешнюю переменную (в которой хранится ссылка на этот объект):\n\\`\\`\\`javascript\nlet user = {\n name: \"Джон\",\n age: 30,\n\n sayHi() {\n alert(user.name); // используем переменную \"user\" вместо ключевого слова \"this\"\n }\n\n};\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`\nНо такой код будет ненадёжным. Если мы решим скопировать ссылку на объект user в другую переменную, например, admin = user, и перезапишем переменную user чем-то другим, тогда будет осуществлён доступ к неправильному объекту при вызове метода из admin. \n \nЭто показано ниже:\n\\`\\`\\`javascript\nlet user = {\n name: \"Джон\",\n age: 30,\n\n sayHi() {\n alert( user.name ); // приведёт к ошибке\n }\n\n};\n\n\nlet admin = user;\nuser = null; // обнулим переменную для наглядности, теперь она не хранит ссылку на объект.\n\nadmin.sayHi(); // Ошибка! Внутри sayHi() используется user, которая больше не ссылается на объект!\n\\`\\`\\`\nЕсли мы используем \\`this\\`.name вместо user.name внутри alert, тогда этот код будет работать.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md `\n
\n### \\`this\\` не является фиксированным\nВ JavaScript ключевое слово \\`this\\` ведёт себя иначе, чем в большинстве других языков программирования. Оно может использоваться в любой функции.\n\nВ этом коде нет синтаксической ошибки:\n\\`\\`\\`javascript\nfunction sayHi() {\n alert( this.name );\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md `\n
\nЗначение \\`this\\` вычисляется во время выполнения кода и зависит от контекста. \nНапример, здесь одна и та же функция назначена двум разным объектам и имеет различное значение \\`this\\` при вызовах:\n\\`\\`\\`javascript\nlet user = { name: \"Джон\" };\nlet admin = { name: \"Админ\" };\n\nfunction sayHi() {\n alert( this.name );\n}\n\n// используем одну и ту же функцию в двух объектах\nuser.f = sayHi;\nadmin.f = sayHi;\n\n// вызовы функции, приведённые ниже, имеют разное значение this\n// \"this\" внутри функции является ссылкой на объект, который указан \"перед точкой\"\nuser.f(); // Джон (this == user)\nadmin.f(); // Админ (this == admin)\n\\`\\`\\`\nПравило простое: при вызове obj.f() значение \\`this\\` внутри f равно obj. Так что, в приведённом примере это user или admin.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md `\n
\n### У стрелочных функций нет \\`this\\`\nСтрелочные функции особенные: у них нет своего «собственного» \\`this\\`. Если мы используем \\`this\\` внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции.\n\nНапример, здесь arrow() использует значение \\`this\\` из внешнего метода user.sayHi():\n\\`\\`\\`javascript\nlet user = {\n firstName: \"Илья\",\n sayHi() {\n let arrow = () => alert(this.firstName);\n arrow();\n }\n};\n\nuser.sayHi(); // Илья\n\\`\\`\\`\nЭто является особенностью стрелочных функций. Они полезны, когда мы на самом деле не хотим иметь отдельное значение \\`this\\`, а хотим брать его из внешнего контекста. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"
\n### [JS интенсив от Сергея Соловьева](https://observablehq.com/@solovevserg/js-course?collection=@solovevserg/js)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}