Зачем нужно ключевое слово new?

Ключевое слово new в JavaScript: назначение и применение

Ключевое слово new используется для создания нового экземпляра объекта из функции-конструктора или класса. Это фундаментальная концепция объектно-ориентированного программирования в JavaScript.

Основное назначение

Слово new выполняет следующие действия:

1. Создаёт новый пустой объект
2. Устанавливает прототип этого объекта на прототип конструктора
3. Вызывает конструктор с контекстом this, указывающим на новый объект
4. Возвращает новый объект (если конструктор не возвращает другой объект)

История и контекст

В старом JavaScript использовались функции-конструкторы:

// Функция-конструктор (старый способ)
function User(name, email) {
  this.name = name;
  this.email = email;
  this.isActive = true;
}

// Создание экземпляра через new
const user1 = new User('Иван', 'ivan@example.com');
const user2 = new User('Мария', 'maria@example.com');

console.log(user1);
// { name: 'Иван', email: 'ivan@example.com', isActive: true }

console.log(user1 instanceof User); // true

Без new функция работает по-другому:

// БЕЗ new — функция просто выполняется
const result = User('Пётр', 'petr@example.com');

console.log(result); // undefined
console.log(window.name); // 'Пётр' (в браузере! Это плохо!)

Без new контекст this указывает на глобальный объект — ошибка.

Современный подход: классы

В ES6+ используются классы, которые внутри используют тот же механизм new:

// Современный способ — класс
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.isActive = true;
  }

  // Методы класса
  getInfo() {
    return `${this.name} (${this.email})`;
  }
}

// Создание экземпляра — используется new
const user1 = new User('Алекс', 'alex@example.com');
const user2 = new User('Яна', 'yana@example.com');

console.log(user1.getInfo()); // Алекс (alex@example.com)
console.log(user1 instanceof User); // true

Практические примеры

1. Создание объектов с состоянием

class Product {
  constructor(name, price, quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }

  getTotalPrice() {
    return this.price * this.quantity;
  }

  reduceQuantity(amount) {
    this.quantity -= amount;
  }
}

const laptop = new Product('Ноутбук', 50000, 3);
console.log(laptop.getTotalPrice()); // 150000

laptop.reduceQuantity(1);
console.log(laptop.quantity); // 2

2. Встроенные конструкторы JavaScript

// Date — встроенный конструктор
const now = new Date();
console.log(now);

// Array — также создаётся с new
const arr = new Array(1, 2, 3);

// Object
const obj = new Object();

// RegExp — регулярное выражение
const pattern = new RegExp('\\d+', 'g');

3. Наследование классов

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

  speak() {
    console.log(`${this.name} издаёт звук`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog('Макс', 'Лабрадор');
dog.speak(); // Макс лает
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true

4. Фабричный паттерн

class Button {
  constructor(type, label) {
    this.type = type; // 'primary', 'secondary', 'danger'
    this.label = label;
  }

  getStyles() {
    const styles = {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-300 text-black',
      danger: 'bg-red-500 text-white'
    };
    return styles[this.type];
  }
}

class ButtonFactory {
  static createPrimaryButton(label) {
    return new Button('primary', label);
  }

  static createSecondaryButton(label) {
    return new Button('secondary', label);
  }

  static createDangerButton(label) {
    return new Button('danger', label);
  }
}

const submitBtn = ButtonFactory.createPrimaryButton('Отправить');
const cancelBtn = ButtonFactory.createSecondaryButton('Отмена');

console.log(submitBtn.getStyles()); // bg-blue-500 text-white

5. Работа с прототипами

function Vehicle(brand, model) {
  this.brand = brand;
  this.model = model;
}

// Методы в прототипе (экономия памяти)
Vehicle.prototype.getInfo = function() {
  return `${this.brand} ${this.model}`;
};

const car1 = new Vehicle('Toyota', 'Camry');
const car2 = new Vehicle('Honda', 'Civic');

console.log(car1.getInfo()); // Toyota Camry
console.log(car2.getInfo()); // Honda Civic

// Оба объекта используют один метод из прототипа
console.log(car1.getInfo === car2.getInfo); // true (один и тот же метод)

React компоненты (различие)

В современном React используются функциональные компоненты (без new):

// ✅ Функциональный компонент (современный способ)
function UserCard({ name, email }) {
  return <div>{name} - {email}</div>;
}

// Вызывается как обычная функция, React сам управляет созданием экземпляров
const card = <UserCard name="Иван" email="ivan@example.com" />;

Хотя класс-компоненты всё ещё поддерживаются:

// ❌ Класс-компонент (устарелый, но работает)
class UserCard extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

// React создаёт экземпляр через new автоматически

Что происходит при вызове new

Детально разберём процесс:

class Person {
  constructor(name) {
    this.name = name; // Это работает благодаря new
  }
}

const person = new Person('Анна');

// Внутри происходит примерно это:
// 1. Создан пустой объект: {}
// 2. Объекту установлен прототип: object.__proto__ = Person.prototype
// 3. Вызван конструктор: Person.call(object, 'Анна')
// 4. Объект возвращён: return object

Когда НЕ использовать new

// ❌ Создание обычного объекта
const obj = new Object();
// ✅ Лучше
const obj = {};

// ❌ Создание массива
const arr = new Array(1, 2, 3);
// ✅ Лучше
const arr = [1, 2, 3];

// ❌ Функция-конструктор (если забыли new)
function User(name) {
  this.name = name;
}
const user = User('Иван'); // Ошибка!

// ✅ Используй класс — он обязует использовать new
class User {
  constructor(name) {
    this.name = name;
  }
}
const user = new User('Иван'); // Правильно

Проверка и instanceof

class User {}
const user = new User();

console.log(user instanceof User); // true
console.log(user.constructor === User); // true

// Проверка, был ли объект создан с new
if (!(this instanceof User)) {
  return new User(); // Защита от забывчивых разработчиков
}

Вывод

Ключевое слово new критично для:

• Создания экземпляров классов и конструкторов
• Работы с встроенными объектами (Date, RegExp, Map, Set)
• Правильной установки контекста this и прототипов
• Объектно-ориентированного программирования в JavaScript

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