В чем разница между ООП в JavaScript и ООП без прототипов?

ООП в JavaScript и разница с ООП без прототипов

Введение

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

ООП с прототипами в JavaScript

Прототипное наследование (Prototypal Inheritance)

В JavaScript каждый объект имеет скрытую ссылку на другой объект, называемую прототипом (accessed via __proto__ или Object.getPrototypeOf()).

// Создание объекта-прототипа
const animalPrototype = {
  speak() {
    console.log('Животное издает звук');
  }
};

// Создание объекта с прототипом
const dog = Object.create(animalPrototype);
dog.breed = 'Лабрадор';

dog.speak(); // Выведет: Животное издает звук
console.log(dog.breed); // Выведет: Лабрадор

Constructor Functions (ES5 стиль)

Долгое время в JS использовались функции-конструкторы:

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

Animal.prototype.speak = function() {
  console.log(this.name + ' издает звук');
};

const dog = new Animal('Шарик');
dog.speak(); // Выведет: Шарик издает звук

ES6 Классы (синтаксический сахар)

В ES6 появился синтаксис классов, но под капотом это тот же самый прототип:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' издает звук');
  }
}

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

const dog = new Dog('Шарик');
dog.speak(); // Выведет: Шарик издает звук
dog.bark();  // Выведет: Шарик лает

Как работает цепочка прототипов

class Vehicle {
  drive() {
    console.log('Вождение');
  }
}

class Car extends Vehicle {
  honk() {
    console.log('Бип-бип');
  }
}

const car = new Car();
car.drive();  // найдет в Vehicle
car.honk();   // найдет в Car
console.log(Object.getPrototypeOf(car)); // Car.prototype
console.log(Object.getPrototypeOf(Object.getPrototypeOf(car))); // Vehicle.prototype

Классическое ООП в других языках

В классических языках ООП (Java, C++, Python) наследование работает по-другому:

// Java — класс-на-класс наследование
class Animal {
  public void speak() {
    System.out.println("Животное издает звук");
  }
}

class Dog extends Animal {
  public void bark() {
    System.out.println("Лает");
  }
}

В классических языках:

• Есть четкое разделение между классом (шаблон) и экземпляром (объект)
• Наследование идет через иерархию классов
• У каждого класса есть копия методов (или указатели)

Ключевые отличия прототипного ООП

Примеры различий в практике

1. Динамическое добавление методов (прототипное)

const dog = { name: 'Шарик' };

// Добавляем метод в runtime
dog.bark = function() {
  console.log(this.name + ' лает');
};

dog.bark(); // Шарик лает

В классических языках это невозможно в runtime.

2. Делегирование вместо копирования

const animalMethods = {
  eat() { console.log('Ест'); }
};

const dog = Object.create(animalMethods);
dog.name = 'Шарик';

// Метод ищется в цепочке, не скопирован
dog.eat(); // Выведет: Ест

3. Конкатенативное наследование (более современный подход)

// Вместо классов используем функции, возвращающие объекты
const createAnimal = (name) => ({
  name,
  speak() {
    console.log(this.name + ' издает звук');
  }
});

const createDog = (name) => ({
  ...createAnimal(name),
  bark() {
    console.log(this.name + ' лает');
  }
});

const dog = createDog('Шарик');
dog.speak();
dog.bark();

Преимущества прототипного ООП

• Гибкость: можно менять объекты в runtime
• Простота: нет необходимости в сложной иерархии классов
• Производительность: общие методы хранятся в одном месте (прототипе)
• Композиция: легче комбинировать функциональность

Недостатки прототипного ООП

• Путаница: this и прототипы сложны для новичков
• Производительность: поиск по цепочке прототипов медленнее
• Отсутствие инкапсуляции: сложнее скрывать private данные

Современный JavaScript

Сейчас в JavaScript часто используют функциональное программирование вместе с классами:

class User {
  #password; // Private field (ES2022)

  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  authenticate(pwd) {
    return this.#password === pwd;
  }
}

const user = new User('Ivan', 'secret123');

Выводы

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