Теория: Прототипы

В JavaScript почти каждый объект связан с прототипом. Это базовый механизм наследования в языке.

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

Откуда у объекта методы, которых нет в нем самом

const obj = { key: 'value' };

obj.toString();
obj.valueOf();

Object.getOwnPropertyNames(obj);
// [ 'key' ]

toString и valueOf работают, хотя в собственных свойствах объекта их нет.

Ответ: эти методы лежат в прототипе.

Как получить прототип

const obj = { key: 'value' };
const proto = Object.getPrototypeOf(obj);

Внутри движка это связывается через внутренний слот [[Prototype]].

Как идет поиск свойства

Когда вы пишете obj.name, движок делает примерно так:

1. ищет name в самом объекте
2. если не найдено, идет в прототип
3. повторяет подъем по цепочке
4. если цепочка закончилась (null), возвращает undefined

Упрощенная версия:

const get = (obj, property) => {
  if (obj.hasOwnProperty(property)) {
    return obj[property];
  }
  const proto = Object.getPrototypeOf(obj);
  if (proto === null) {
    return undefined;
  }
  return get(proto, property);
};

Связь функций, prototype и new

У функции-конструктора есть свойство prototype. При new F() созданный объект линкуется именно с F.prototype.

function F() {}
const obj = new F();

Object.getPrototypeOf(obj) === F.prototype; // true

Это и есть фундамент "классового" поведения в JS.

Изменение прототипа и перекрытие

Если добавить свойство в F.prototype, его увидят все объекты, связанные с этим прототипом.

Если задать свойство напрямую в конкретном объекте, оно перекроет одноименное свойство из прототипа.

Это важно понимать, чтобы не получать неочевидные побочные эффекты при изменении общей прототипной области.

Итоги

Прототип в JavaScript не экзотика, а центральный механизм модели объектов.

Если вы понимаете цепочку прототипов, то лучше понимаете и классы, и наследование, и поведение instanceof, и причину многих "странностей" языка.