38. constructor и super

JavaScript: Мозги. Урок: constructor и super

Иллюстрация к уроку В этом уроке мы разберем важные концепции объектно-ориентированного программирования в JavaScript: конструкторы (constructor) и ключевое слово super. Они необходимы для создания и расширения классов, позволяя создавать сложные иерархии объектов.

Конструктор (constructor)

Конструктор – это специальный метод внутри класса, который вызывается при создании нового экземпляра этого класса с помощью оператора new. Он инициализирует свойства объекта. Если конструктор не определен явно, JavaScript создаст конструктор по умолчанию.

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

  sayHello() {
    console.log(`Привет, я ${this.name}!`);
  }
}

const animal = new Animal("Барсик");
animal.sayHello(); // Выведет: Привет, я Барсик!

В этом примере, constructor принимает аргумент name и присваивает его свойству this.name. this ссылается на создаваемый объект.

Ключевое слово super

Ключевое слово super используется внутри дочернего класса для вызова конструктора родительского класса или для доступа к методам родительского класса. Это крайне важно при наследовании.

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Вызываем конструктор родительского класса (Animal)
    this.breed = breed;
  }

  bark() {
    console.log("Гав!");
  }

  sayHello() {
    super.sayHello(); // Вызываем метод sayHello родительского класса
    console.log(`Я породы ${this.breed}.`);
  }
}

const dog = new Dog("Рекс", "Дворняга");
dog.sayHello(); // Выведет: Привет, я Рекс!  Я породы Дворняга.
dog.bark(); // Выведет: Гав!

В этом примере, Dog наследуется от Animal. В конструкторе Dog мы вызываем super(name) для инициализации свойства name из родительского класса. Также, мы переопределили метод sayHello, вызвав родительский метод super.sayHello() и добавив свою логику.

Практический пример кода

Рассмотрим более сложный пример с DOM:

<!DOCTYPE html>
<html>
<head>
  <title>Constructor and Super Example</title>
</head>
<body>
  <div id="container"></div>
  <script>
    class Component {
      constructor(elementId) {
        this.element = document.getElementById(elementId);
      }

      render(content) {
        this.element.innerHTML = content;
      }
    }

    class Button extends Component {
      constructor(elementId, text) {
        super(elementId);
        this.text = text;
      }

      render() {
        super.render(`<button>${this.text}</button>`);
      }
    }

    const button = new Button("container", "Click Me!");
    button.render();
  </script>
</body>
</html>

Здесь Component – базовый класс для работы с DOM-элементами. Button наследуется от Component и добавляет свойство text и переопределяет метод render для создания кнопки.

Жизненный пример

Во фреймворке React, constructor и super активно используются при создании компонентов, особенно классовых. Компонент может наследовать от React.Component, и в его конструкторе необходимо вызвать super(props), чтобы правильно инициализировать компонент и получить доступ к this.props. В Redux, при создании middleware, часто создаются классы, которые расширяют базовые классы или используют паттерны, где super играет важную роль в наследовании функциональности. В Node.js, в модулях для работы с базами данных, например, Mongoose, модели часто создаются как классы, наследующие от базовых классов Mongoose, и super используется для инициализации схемы и других параметров модели.

Ключевые моменты

constructor - метод для инициализации объекта при создании экземпляра класса.
super() - вызывает конструктор родительского класса. Необходимо вызывать в конструкторе дочернего класса до обращения к this.
super.methodName() - вызывает метод родительского класса.
Наследование позволяет создавать иерархии классов и повторно использовать код.
constructor и super – фундаментальные концепции ООП в JavaScript.