Что такое прототипное наследование в JavaScript?

Суть прототипного наследования

В JavaScript нет классического наследования через классы, как в C++ или Java. Вместо этого каждый объект имеет внутреннюю ссылку [[Prototype]] (доступную через __proto__ или Object.getPrototypeOf()), которая указывает на другой объект — его прототип. Когда вы обращаетесь к свойству или методу объекта, движок сначала ищет его в самом объекте, а если не находит — поднимается по цепочке прототипов вверх.

Цепочка прототипов заканчивается на Object.prototype, чей прототип равен null. Если свойство не найдено нигде в цепочке, возвращается undefined.

Способы создания наследования

Через Object.create()

Самый прямой способ установить прототип:

const animal = {
  eat() {
    console.log(`${this.name} ест`);
  }
};

// dog наследует от animal
const dog = Object.create(animal);
dog.name = 'Рекс';
dog.eat(); // "Рекс ест"

Через функции-конструкторы

При вызове функции с new создаётся объект, чей прототип — это Constructor.prototype:

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(`${this.name} ест`);
};

const cat = new Animal('Мурзик');
cat.eat(); // "Мурзик ест"
// Прототип cat указывает на Animal.prototype
console.log(Object.getPrototypeOf(cat) === Animal.prototype); // true

Через классы (синтаксический сахар)

Классы ES2015 — это обёртка над прототипным наследованием:

class Animal {
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(`${this.name} ест`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} лает`);
  }
}

const rex = new Dog('Рекс');
rex.eat();  // унаследовано от Animal
rex.bark(); // собственный метод Dog

Как работает поиск свойств

Допустим, у нас есть цепочка: obj -> A.prototype -> Object.prototype -> null. При вызове obj.toString():

1. Движок ищет toString в самом obj — не находит.
2. Идёт в A.prototype — не находит.
3. Идёт в Object.prototype — находит и вызывает.

Особенности и подводные камни

• Запись свойств не идёт по цепочке: присваивание obj.x = 1 всегда создаёт собственное свойство в obj, а не модифицирует прототип.
• Методы перекрывают прототипные: если в объекте есть своё свойство с тем же именем, оно "затеняет" прототипное (shadowing).
• Изменение прототипа на лету (Object.setPrototypeOf) — медленная операция и ломает оптимизации движка.
• Все объекты в JS наследуют от Object.prototype, кроме созданных через Object.create(null).

Проверка наследования

class A {}
class B extends A {}
const b = new B();

console.log(b instanceof B); // true
console.log(b instanceof A); // true
console.log(A.prototype.isPrototypeOf(b)); // true