их • Есть прототипы • Есть наследование на прототипах – Делегирующее прототипное наследование • Все можно менять во время работы – Цепочку наследования можно менять – Прототипы можно менять – На классах так сделать нельзя • Можно изменить прототипы базовых "классов"
прототипа • Любой объект имеет ссылку на прототип – И примитив также* – Имеет с рождения – По умолчанию – Object.prototype • Делегирование – Мы можем пользоваться функциями прототипа не имея собственных • Цепочка прототипов – Каждый прототип это тот же объект – Который также может иметь прототип – У прототипа прототипа также может быть прототип
вход 2 операнда – Функция должна иметь свойство prototype • Создает временный объект (obj) • Добавляет свойство __proto__ – obj.__proto__ = Constructor.prototype • Вызывает конструктор над объектом – Constructor.apply(obj, arguments) • Конструктор вернул примитив. Результат obj • Иначе то, что вернул конструктор
{ throw new TypeError(); } if (typeof Constructor.prototype === "undefined") { throw new TypeError(); } var obj = { __proto__: Constructor.prototype }; var result = Constructor.apply(obj, args); if (typeof result === "object" && result !== null || typeof result === "function") { return result; } return obj; } Оператор new в коде
Grandfather.prototype.color = 'green'; Пример new var gf = new Grandfather(); gf.color; // "green" // Это аналогично var gf = { __proto__: Grandfather.prototype }; gf.color; // "green"
() {}; Grandfather.prototype.color = 'green'; // Конструктор Father var Father = function () {}; typeof Father.prototype === "object"; // Для цепочки нам нужно получить вот это Father.prototype = { __proto__: Grandfather.prototype };
Grandfather.prototype.color = 'green'; var Father = function () {}; // Конструктор Father Father.prototype = new Grandfather(); // Наследуем var Son = function () {}; // Конструктор Son Son.prototype = new Father(); // Наследуем var g = new Grandfather(); // Экземпляр "класса" Grandfather var f = new Father(); // Экземпляр "класса" Father var s = new Son(); // Экземпляр "класса" Son // Изначально все зеленые console.log([g.color, f.color, s.color]); // ["green", "green", "green"] Пример с мутантами
Grandfather.prototype.color = 'blue'; // Все синие console.log([g.color, f.color, s.color]); // ["blue", "blue", "blue"] // Отец решил все вернуть для себя и своего потомства Father.prototype.color = 'green'; // Хотя мог исделать и так: // Grandfather.prototype.color = 'green'; // Цвет вернулся console.log([g.color, f.color, s.color]); // ["blue", "green", "green"] Пример с мутантами
s = { color: 'black', // Поменял только собственное свойство __proto__: { // Son.prototype __proto__: { // Father.prototype color: 'green', // Отец решил вернуть цвет __proto__: { // Grandfather.prototype color: 'blue', // Дед решил поменять цвет __proto__: { // Object.prototype // Много разных свойств __proto__: null } } } } }; Цепочка прототипов: Son
{ alert('Mua-ha-ha'); return ["Mua-ha-ha!"]; }; Grandfather.prototype.color = 'green'; // Конструктор Father var Father = function () {}; Father.prototype = new Grandfather();
{ alert('Mua-ha-ha'); return "Mua-ha-ha!"; }; Grandfather.prototype.color = 'green'; // Конструктор Father var Father = function () {}; Father.prototype = new Grandfather();
просто средство подмешать prototype function inherits(Constructor, SuperConstructor) { var F = function () {}; // Временный, чистый конструктор // Сохраняем ссылку F.prototype = SuperConstructor.prototype; // Применяем __proto__ = prototype Constructor.prototype = new F(); } Функция inherits или подобная var Grandfather = function () {}; // Конструктор Grandfather Grandfather.prototype.color = 'green'; var Father = function () {}; // Конструктор Father // Father.prototype = new Grandfather(); inherits(Father, Grandfather); // Наследуем
var Grandfather = function () {}; // Конструктор Grandfather Grandfather.prototype.color = 'green'; var Father = function () {}; // Конструктор Father // Father.prototype = new Grandfather(); // Что она делает - понятно Father.prototype = Object.create(Grandfather.prototype); // Полная и абсолютно честная версия Father.prototype = Object.create(Grandfather.prototype, { constructor: { value: Father, enumerable: false, writable: true, configurable: true } }); ECMAScript 5 – Object.create()
Father(); var s = new Son(); s instanceof Son === true; // OK s instanceof Father === true; // OK? s instanceof Grandfather === true; // OK?? // Неужели множественное наследование??? s instanceof Object === true; // WAT??? s instanceof Array === false; // ОК! Оператор instanceof
= function () { return 'I am ' + this.name; }; var Father = function (name) { Grandfather.call(this, name); }; Father.prototype.hello = function () { return Grandfather.prototype.hello.call(this) + ' – Father'; }; Вызов метода родителя
такой: var Grandfather = function () {}; // Конструктор Grandfather Grandfather.prototype.color = 'blue'; var Father = function () {}; // Конструктор Father Father.prototype = Object.create(Grandfather.prototype); Father.prototype.color = 'green'; ECMAScript 6 class
Array.prototype.indexOf = function (searchElement) { for (var i = 0; i < this.length; i++) { if (this[i] === searchElement) { return i; } } return -1; }; } [1, 2, 3, 4].indexOf(3); // 2 Polyfill для Array#indexOf Внимание! Это не полная реализация – не используйте ее! Все, что влезло в слайд. Array indexOf method http://clck.ru/3mm5x
Прототипное наследование • Цепочка прототипов – inherits, Object.create() • __proto__ и prototype • Оператор new • Оператор instanceof • Оператор точка и [] • Много библиотек для классов • Трансляция в JavaScript – крайний случай
azproduction
shoin
kaityo256
amarelo_n24
kuro_wd
robertshih
matleenalaakso
tibbelit
signer
atp
learnenergy
event2020
phodgson
chriscoyier
bermonpainter
rmw
malarkey
jnunemaker
tammielis
robhawkes
brianwarren
yeseniaperezcruz
danielanewman
samlambert
![30 // Смысла нет Grandfather.prototype.color = 'blue'; console.log([g.color, f.color, s.color]);](https://files.speakerdeck.com/presentations/5093f581b79f8e000200942a/slide_29.jpg){kind=link}
![Оператор "точка" и [] Получение свойств](https://files.speakerdeck.com/presentations/5093f581b79f8e000200942a/slide_38.jpg){kind=link}
![41 Оператор "точка" и [] • getProperty(obj, name): *! •](https://files.speakerdeck.com/presentations/5093f581b79f8e000200942a/slide_40.jpg){kind=link}
