Создание классов в JavaScript: методы и способы наследования

Быстрый ответ

class Figure {
  constructor(color) {
    this.color = color;
  }

  draw() {
    console.log('Рисую фигуру');
  }
}

const sketch = new Figure('red');
sketch.draw(); // Вывод: Рисую фигуру

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

Эксперименты с прототипами

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

Animal.prototype.speak = function() {
  console.log(this.name + ' говорит: "Мууу..."');
}

const cow = new Animal("Burenka");
cow.speak(); // Буренка говорит: "Мууу..."

JavaScript предоставляет уникальную возможность использовать прототипное наследование. Благодаря этому, вы можете изменять прототипы классов даже после запуска кода, что расширяет возможности, но также может вызвать затруднения при неправильном использовании.

Замыкания для обеспечения приватности

function Car(maxSpeed) {
  let currentSpeed = 0;

  this.maxSpeed = maxSpeed;

  this.accelerate = function() {
    if (currentSpeed < maxSpeed) {
       currentSpeed++;
    }
    console.log(`Текущая скорость: ${currentSpeed} км/ч`);
  };
}

const car = new Car(180);
car.accelerate();

Замыкания позволяют скрыть внутренние данные функций, создавая "приватное" пространство для свойств. Это улучшает безопасность, но одновременно увеличивает затраты памяти, т.к. в каждом экземпляре хранятся уникальные функции.

Вдохновение из библиотек

// Пример расширения класса с использованием библиотеки Prototype
var Emu = Class.create(Bird, {
  initialize: function($super, name) {
    $super(name); // Вызов метода initialize класса Bird
  },

  run: function() {
    console.log(`${this.name} бежит с удивительной скоростью!`);
  }
});

Популярные библиотеки, такие как Prototype и jQuery, предоставляют средства для имитации классов и демонстрируют примеры их практического применения.

Знакомство с классами ES2015

const privateData = new WeakMap();

class Car {
  constructor(maxSpeed) {
    privateData.set(this, { speed: 0 });
    this.maxSpeed = maxSpeed;
  }

  accelerate() {
    let data = privateData.get(this);
    if (data.speed < this.maxSpeed) {
      data.speed++;
    }
    console.log(`Текущая скорость: ${data.speed} км/ч`);
  }
}

const auto = new Car(250);
auto.accelerate();

Со введением ES2015 ключевое слово class предлагает нам более краткий синтаксис для работы с классами и готовность к будущим обновлениям ECMAScript. Однако для поддержки всех браузеров в настоящее время потребуется использовать инструменты для транспиляции, такие как Babel.

Вне классов

const createRobot = name => ({
  name,
  speak() { console.log(`${this.name}: Бип-боп!`); }
});

const robot = createRobot("R2D2");
robot.speak(); // R2D2: Бип-боп!

Наконец, можно использовать такие методы, как фабричный метод, модульный паттерн и композицию объектов для создания объектов. Эти подходы дают определённые преимущества, но могут показаться нестандартными для тех, кто привык к классическому ООП.