Как работает прототипное наследование?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Средний
#JavaScript #Объекты #База JS

Краткий ответ

Прототипное наследование — это способ, которым объекты в JavaScript наследуют свойства и методы от других объектов. В отличие от классического наследования, здесь нет классов — объекты наследуются напрямую от других объектов через ссылку proto.


Полный ответ

Прототипное наследование — это основной способ наследования в JavaScript. Оно отличается от наследования в других языках, где есть классы.

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

Каждый объект может иметь прототип — другой объект, от которого он наследует свойства:

const parent = { name: 'Родитель' };
const child = Object.create(parent);
console.log(child.name); // 'Родитель' — через прототип

Как работает наследование

Ссылка proto

const obj = {};
console.log(obj.__proto__); // Ссылка на прототип

Цепочка наследования

// obj → Object.prototype → null
const obj = {};

Простые примеры

Создание с прототипом

const animal = { 
  type: 'животное',
  speak() { 
    console.log('Я ' + this.type); 
  } 
};
 
const dog = Object.create(animal);
dog.type = 'собака';
dog.speak(); // 'Я собака'

Наследование методов

const parent = {
  greet() { return 'Привет!'; }
};
 
const child = Object.create(parent);
console.log(child.greet()); // 'Привет!' — метод из прототипа

Важные особенности

1. Поиск свойств

const parent = { name: 'Родитель' };
const child = Object.create(parent);
child.age = 25;
 
console.log(child.age); // 25 — собственное свойство
console.log(child.name); // 'Родитель' — из прототипа

2. Переопределение свойств

const parent = { name: 'Родитель' };
const child = Object.create(parent);
 
// Переопределяем свойство
child.name = 'Ребёнок';
console.log(child.name); // 'Ребёнок' — собственное значение

Когда использовать прототипное наследование

Для расширения объектов

// Базовый объект
const vehicle = {
  move() { console.log('Двигаюсь'); }
};
 
// Расширяем его
const car = Object.create(vehicle);
car.wheels = 4;

Для экономии памяти

// Методы в прототипе — одна копия для всех
const parent = {
  sharedMethod() { /* логика */ }
};
 
const obj1 = Object.create(parent);
const obj2 = Object.create(parent);
// Оба объекта используют один метод

Частые ошибки

1. Путаница с классами

// ❌ Думаем как в классах
class Parent {}
class Child extends Parent {}
 
// ✅ В прототипном наследовании
const parent = {};
const child = Object.create(parent);

2. Изменение прототипа после создания

// ❌ Сложный способ
const obj = {};
Object.setPrototypeOf(obj, { name: 'Новый прототип' });
 
// ✅ Простой способ
const parent = { name: 'Прототип' };
const child = Object.create(parent);

Простые правила

  1. Прототип — объект, от которого наследуются свойства
  2. proto — ссылка на прототип объекта
  3. Object.create() — правильный способ создания с прототипом
  4. Поиск — сначала в объекте, потом в прототипе
  5. Переопределение — свойства объекта важнее прототипа

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


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪