Перейти к содержимому

Подробный разбор конструкторов JavaScript и оператора new

Введение в конструкторы и оператор new

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

Как работают конструкторы

Функция-конструктор в JavaScript выглядит как любая другая функция, но по соглашению она называется с заглавной буквы, чтобы отличать её от обычных функций. Когда оператор new вызывает функцию-конструктор, происходит несколько действий:

  1. Создание нового объекта: JavaScript автоматически создает для вас новый объект.
  2. Установка прототипа: Этот новый объект настраивается на использование шаблона, которым является прототип функции-конструктора. Это означает, что он наследует свойства и методы, определенные там.
  3. Выполнение конструктора: Функция-конструктор выполняется с переданными аргументами, и внутри этой функции this ссылается на только что созданный новый объект.
  4. Возврат объекта: После выполнения своей задачи конструктора новый объект автоматически возвращается, если только вы явно не вернете другой объект из конструктора.

INFO

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

Пример: Базовая функция-конструктор


Output appears here after Run.

Пояснение: В этом примере User — это функция-конструктор, которая инициализирует свойства name, age и метод greet для вновь создаваемых объектов. Выражение new User('John', 30) создает новый экземпляр User с именем "John" и возрастом 30.

Использование конструкторов для сложных объектов

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

Пример: Конструктор с методами


Output appears here after Run.

Пояснение: Конструктор Car настраивает каждый объект автомобиля с определенными свойствами и методом, который отображает информацию об автомобиле.

Пример: Методы прототипа


Output appears here after Run.

Пояснение: Добавляя introduce в прототип Employee, все экземпляры разделяют один и тот же метод, что более эффективно с точки зрения использования памяти, чем определение его непосредственно в конструкторе.

WARNING

Рекомендуется использовать классы ES6 для определения объектов и конструкторов для более чистого и читаемого кода.

Лучшие практики работы с конструкторами

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

1. Соглашение об именах

Лучшая практика: Всегда начинайте имена конструкторов с заглавной буквы, чтобы отличать их от обычных функций. Это распространенное соглашение в JavaScript и многих других языках программирования, которое помогает разработчикам быстро идентифицировать функции-конструкторы.

Пример:


Output appears here after Run.

Пояснение: Функция-конструктор Laptop начинается с заглавной буквы, что указывает на то, что она предназначена для использования с оператором new для создания новых объектов.

2. Разделение логики

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

Пример:


Output appears here after Run.

Пояснение: Метод describe добавлен в прототип Book, что означает, что все экземпляры Book разделяют один и тот же метод describe. Это более эффективно, чем если бы describe был определен внутри конструктора, что привело бы к созданию новой функции для каждого экземпляра книги.

3. Возвращаемые значения

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

Пример:


Output appears here after Run.

Пояснение: Несмотря на попытку вернуть строку из конструктора Player, JavaScript игнорирует это возвращаемое значение, потому что оно не является объектом. Новый экземпляр Player возвращается, как и ожидалось.

Заключение

Понимание и использование конструкторов и оператора new в JavaScript необходимо для эффективного объектно-ориентированного программирования. Следуя приведенным здесь соглашениям и лучшим практикам, разработчики могут создавать организованный, эффективный и масштабируемый код. Конструкторы предоставляют мощный механизм для инициализации новых объектов и определения их поведения структурированным и интуитивно понятным образом.

Практика

Что происходит при вызове функции с помощью 'new' в JavaScript?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.