Прототипное наследование

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

У каждого объекта есть служебное поле [[Prototype]] — ссылка либо на другой объект, либо на null. Двойные квадратные скобки означают, что это внутреннее поле: напрямую его не видно, к нему нет обычного доступа по имени, но движок заглядывает в него постоянно.

Смысл ссылки простой. Читаем obj.prop — если своего такого свойства нет, движок идёт по [[Prototype]] и ищет там. Объект как будто говорит: «У меня этого нет, но я знаю, у кого спросить».

js

const animal = { eats: true };
const rabbit = { jumps: true };
Object.setPrototypeOf(rabbit, animal);

console.log(rabbit.jumps);
console.log(rabbit.eats);

Сначала предположите, что выведет код

Прототип — не копия. У rabbit нет свойства eats, он просто знает адрес, по которому за ним сходить.

Прочитать прототип — Object.getPrototypeOf(obj), задать существующему объекту — Object.setPrototypeOf(obj, proto). А если объект только создаётся, удобнее сразу родить его с нужным прототипом: Object.create(proto).

js

const animal = { eats: true };
const rabbit = Object.create(animal);

console.log(Object.getPrototypeOf(rabbit) === animal);
console.log(rabbit.__proto__ === animal);
console.log(Object.create(null) instanceof Object);

Сначала предположите, что выведет код

Вы часто встретите в старом коде obj.__proto__ — это исторический геттер-сеттер для того же самого поля. Он работает в браузерах и никуда не денется ради совместимости, но в спецификации помечен как устаревший. В новом коде пишите Object.getPrototypeOf и Object.create.

__proto__ — обычное на вид имя свойства, и это его беда. Если вы складываете в объект данные, пришедшие извне (например, ключи из формы или JSON), то ключ "__proto__" вместо записи данных попытается сменить объекту прототип. Отсюда целый класс уязвимостей — «загрязнение прототипа».

js

const bag = {};
bag["__proto__"] = { hacked: true };

console.log(bag.hacked);
console.log(Object.keys(bag).length);
console.log(Object.getPrototypeOf(bag).hacked);

Сначала предположите, что выведет код

Прототип сам может иметь прототип — получается цепочка. Движок идёт по ней снизу вверх и останавливается на первом объекте, где нужное имя нашлось. Если цепочка кончилась, а свойства нет — результат undefined, без всякой ошибки.

js

const animal = { eats: true };
const rabbit = Object.create(animal);
const longEar = Object.create(rabbit);
longEar.earLength = 10;

console.log(longEar.eats);
console.log(longEar.hasOwnProperty("eats"));
console.log(longEar.wings);

Сначала предположите, что выведет код

Отличить «своё» от «унаследованного» помогает hasOwnProperty или более современный Object.hasOwn(obj, key). Оператор in, наоборот, смотрит всю цепочку целиком — это разные вопросы и разные ответы.

Object.keys вернёт только собственные ключи, а for...in переберёт ещё и унаследованные перечислимые. Свойства из Object.prototype в перебор не попадают: они помечены как неперечислимые.

js

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.jumps = true;

console.log(Object.keys(rabbit));
for (const key in rabbit) console.log(key);

Сначала предположите, что выведет код

Ключевая асимметрия: по цепочке ходит только чтение. Присваивание obj.prop = value создаёт или меняет свойство в самом obj, даже если такое имя уже лежит в прототипе. Прототип при этом остаётся нетронутым, а новое собственное свойство просто закрывает его собой.

js

const animal = { eats: true };
const rabbit = Object.create(animal);

rabbit.eats = false;
console.log(rabbit.eats);
console.log(animal.eats);

Сначала предположите, что выведет код

Из того же правила следует поведение this в унаследованных методах. Метод может лежать сколь угодно высоко в цепочке, но this внутри него — это объект перед точкой, тот, у которого метод вызвали. Поэтому один метод в прототипе спокойно обслуживает сотни объектов, работая с данными каждого.

js

const user = {
  name: "Аня",
  hello() { return `Привет, ${this.name}`; }
};
const admin = Object.create(user);
admin.name = "Борис";

console.log(admin.hello());
console.log(user.hello());

Сначала предположите, что выведет код

Объектный литерал {} выглядит пустым, но пустым не является: его прототипом автоматически становится Object.prototype. Оттуда берутся toString, hasOwnProperty, valueOf и прочая базовая обвязка. А прототип самого Object.prototype — это null, то есть конец цепочки.

js

const plain = {};

console.log(Object.getPrototypeOf(plain) === Object.prototype);
console.log(plain.toString());
console.log(Object.getPrototypeOf(Object.prototype));

Сначала предположите, что выведет код

Так же устроены и остальные встроенные типы: у массива в цепочке стоит Array.prototype (с map, push и остальными), а уже за ним — Object.prototype. Отсюда правило: чем длиннее цепочка, тем дальше идти движку, но искать он будет ровно до первого совпадения.

Значение	Цепочка прототипов
{}	Object.prototype → null
[]	Array.prototype → Object.prototype → null
function f(){}	Function.prototype → Object.prototype → null
Object.create(null)	null

Object.create(null) создаёт объект, у которого [[Prototype]] сразу равен null. У него нет ни toString, ни hasOwnProperty — вообще ничего унаследованного. Такой объект нельзя вывести через alert и склеить со строкой, зато он идеален как словарь: любые ключи от пользователя, никаких сюрпризов.

js

const plain = {};
const dict = Object.create(null);

console.log(typeof plain.toString);
console.log(typeof dict.toString);
console.log("toString" in dict);

Сначала предположите, что выведет код

Если чистый словарь нужен часто, есть готовый инструмент — Map. Он и ключи любого типа держит, и порядок вставки сохраняет. А Object.create(null) остаётся тогда, когда нужен именно обычный объект, но без наследства.

У каждого объекта есть скрытая ссылка [[Prototype]] — на другой объект или на null.
Читать прототип — Object.getPrototypeOf, создавать с прототипом — Object.create; __proto__ устарел и опасен при работе с внешними данными.
Чтение свойства идёт вверх по цепочке до первого совпадения, иначе undefined; запись всегда попадает в сам объект.
this в унаследованном методе — это объект перед точкой, а не тот, где метод лежит.
Цепочка обычного объекта заканчивается на Object.prototype, а Object.create(null) даёт чистый словарь вообще без наследства.

1/3Что выведет код? const a = { x: 1 }; const b = Object.create(a); b.x = 2; console.log(a.x);

2/3В прототипе объекта есть свойство size. Что вернёт obj.hasOwnProperty("size")?

3/3Чему равен Object.getPrototypeOf(Object.prototype)?

Счётчик на общем прототипе

Два объекта наследуют от одного прототипа со счётчиком и методом inc. Не запуская код, скажите, что выведет последняя строка — и объясните, почему proto.count оказался именно таким.

js

const proto = { count: 0, inc() { this.count++; } };
const a = Object.create(proto);
const b = Object.create(proto);

a.inc(); a.inc(); b.inc();
console.log(a.count, b.count, proto.count); // ?

Сначала предположите, что выведет код

Выведет 2 1 0.

Строка this.count++ — это на самом деле this.count = this.count + 1: сначала чтение, потом запись. Чтение при первом вызове уходит по цепочке в proto и возвращает 0, а запись, как всегда, происходит в сам объект — у a появляется собственное count со значением 1. Второй вызов уже читает и пишет только своё свойство, поэтому у a получается 2, у b — 1.

Прототип не менялся ни разу, его count так и остался 0. Общими у объектов оказались методы, а данные — у каждого свои. Если бы счётчик правда должен был быть общим, менять пришлось бы явно: proto.count++.

Длина цепочки прототипов

Напишите функцию chainLength(obj), которая возвращает число звеньев прототипов до null. Для обычного объекта это 1 (только Object.prototype), для объекта без прототипа — 0.

js

function chainLength(obj) {
  // ваш код
  return 0;
}

console.log(chainLength({}));                  // после решения: 1
console.log(chainLength(Object.create({})));   // после решения: 2
console.log(chainLength(Object.create(null))); // после решения: 0
console.log(chainLength([]));                  // после решения: 2

Сначала предположите, что выведет код

Достаточно идти вверх по цепочке, пока Object.getPrototypeOf не вернёт null, и считать шаги.

jsлистинг · не запускается

function chainLength(obj) {
  let n = 0;
  let cur = Object.getPrototypeOf(obj);
  while (cur !== null) {
    n++;
    cur = Object.getPrototypeOf(cur);
  }
  return n;
}

console.log(chainLength({}), chainLength([])); // 1 2

function chainLength(obj) {
  let n = 0;
  let cur = Object.getPrototypeOf(obj);
  while (cur !== null) {
    n++;
    cur = Object.getPrototypeOf(cur);
  }
  return n;
}

console.log(chainLength({}), chainLength([])); // 1 2

У массива звеньев два: Array.prototype и за ним Object.prototype. Проверять условие удобно именно через !== null, а не на «ложность»: сравнение с null точно описывает конец цепочки и не спутает его ни с чем другим.

Прототипное наследование

Видеоразбор темы за 5–7 минут

Скрытая ссылка [[Prototype]]объект помнит, у кого спросить

Object.getPrototypeOfкак посмотреть и как задать прототип

Поиск по цепочкевверх до первого совпадения

Читаем вверх, пишем вниззапись всегда в сам объект

Object.prototype в конце цепочкиоткуда у пустого объекта методы

Объект без прототипачистый словарь без наследства

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Счётчик на общем прототипе

Длина цепочки прототипов