JavaScript Constructor: Решение распространённых проблем

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

Проблема 1: Вызов конструктора без new

Одна из самых распространённых ошибок - вызов функции-конструктора без ключевого слова new. В нестрогом режиме this указывает на глобальный объект (window в браузере), что приводит к непредсказуемому поведению.

Проблема

function User(name, age) {
  this.name = name;
  this.age = age;
}

const user = User('Alice', 30); // забыли new

console.log(user);       // undefined
console.log(window.name); // 'Alice' - утечка в глобальный объект!

Решение: защитный паттерн с new.target

function User(name, age) {
  if (!new.target) {
    return new User(name, age); // автоматически исправляем вызов
  }
  this.name = name;
  this.age = age;
}

const user1 = User('Alice', 30);   // работает корректно
const user2 = new User('Bob', 25); // тоже работает

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

Совет: В class-синтаксе эта проблема решена автоматически - вызов без new выбросит TypeError.

Проблема 2: Дублирование методов в памяти

Когда методы определяются внутри конструктора через this, каждый новый объект получает собственную копию функции. При создании тысяч объектов это приводит к излишнему потреблению памяти.

Проблема

function Product(name, price) {
  this.name = name;
  this.price = price;

  // Эта функция создаётся заново для каждого объекта!
  this.getInfo = function () {
    return `${this.name} - ${this.price}₽`;
  };
}

const p1 = new Product('Книга', 500);
const p2 = new Product('Ручка', 50);

console.log(p1.getInfo === p2.getInfo); // false - это разные функции в памяти

Решение: вынести методы в prototype

function Product(name, price) {
  this.name = name;
  this.price = price;
}

// Один метод на все экземпляры
Product.prototype.getInfo = function () {
  return `${this.name} - ${this.price}₽`;
};

const p1 = new Product('Книга', 500);
const p2 = new Product('Ручка', 50);

console.log(p1.getInfo === p2.getInfo); // true - одна функция в памяти
console.log(p1.getInfo()); // 'Книга - 500₽'

Проблема 3: Потеря контекста this в методах

Когда метод объекта передаётся как колбэк (в setTimeout, обработчик событий и т.д.), контекст this теряется.

Проблема

function Timer(label) {
  this.label = label;
  this.seconds = 0;
}

Timer.prototype.start = function () {
  setInterval(function () {
    this.seconds++; // this === undefined (строгий режим) или window
    console.log(`${this.label}: ${this.seconds}s`); // ошибка!
  }, 1000);
};

const t = new Timer('Обратный отсчёт');
t.start(); // TypeError: Cannot read properties of undefined

Решение 1: стрелочная функция (сохраняет лексический this)

Timer.prototype.start = function () {
  setInterval(() => {
    this.seconds++; // this корректно ссылается на экземпляр Timer
    console.log(`${this.label}: ${this.seconds}s`);
  }, 1000);
};

Решение 2: явное привязывание через bind

Timer.prototype.start = function () {
  const tick = function () {
    this.seconds++;
    console.log(`${this.label}: ${this.seconds}s`);
  }.bind(this); // жёстко привязываем this

  setInterval(tick, 1000);
};

Проблема 4: Некорректное наследование между конструкторами

При построении цепочки наследования через функции-конструкторы легко допустить ошибку: не вызвать родительский конструктор или неправильно настроить цепочку прототипов.

Проблема

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

Animal.prototype.speak = function () {
  return `${this.name} издаёт звук`;
};

function Dog(name, breed) {
  // Забыли вызвать Animal.call(this, name)!
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);

const dog = new Dog('Рекс', 'Лабрадор');
console.log(dog.name);  // undefined - имя не унаследовано
console.log(dog.speak()); // 'undefined издаёт звук'

Решение: правильная цепочка наследования

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

Animal.prototype.speak = function () {
  return `${this.name} издаёт звук`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 1. Вызываем родительский конструктор
  this.breed = breed;
}

// 2. Наследуем прототип
Dog.prototype = Object.create(Animal.prototype);

// 3. Восстанавливаем корректный constructor
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function () {
  return `${this.name} лает!`;
};

const dog = new Dog('Рекс', 'Лабрадор');
console.log(dog.name);             // 'Рекс'
console.log(dog.speak());          // 'Рекс издаёт звук'
console.log(dog.bark());           // 'Рекс лает!'
console.log(dog instanceof Dog);   // true
console.log(dog instanceof Animal);// true

Проблема 5: Нарушение свойства constructor

После переопределения prototype свойство constructor указывает на неверный конструктор, что ломает проверки типов и фабричные паттерны.

Проблема

function Car(model) {
  this.model = model;
}

// Полное переопределение prototype - теряем constructor
Car.prototype = {
  drive() { return `${this.model} едет`; },
  stop()  { return `${this.model} стоит`; }
};

const car = new Car('Tesla');
console.log(car.constructor === Car);    // false
console.log(car.constructor === Object); // true - неожиданно!

Решение: явно указывать constructor

Car.prototype = {
  constructor: Car, // явно восстанавливаем
  drive() { return `${this.model} едет`; },
  stop()  { return `${this.model} стоит`; }
};

const car = new Car('Tesla');
console.log(car.constructor === Car); // true

// Теперь работает фабричный паттерн:
function clone(obj) {
  return new obj.constructor(obj.model);
}

const copy = clone(car);
console.log(copy.model); // 'Tesla'

Современная альтернатива: синтаксис class

Синтаксис class, появившийся в ES6, решает большинство описанных проблем автоматически: методы помещаются в прототип, constructor не ломается, наследование настраивается через extends и super.

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

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

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

  bark() {
    return `${this.name} лает!`;
  }
}

const dog = new Dog('Рекс', 'Лабрадор');
console.log(dog.speak());           // 'Рекс издаёт звук'
console.log(dog.bark());            // 'Рекс лает!'
console.log(dog instanceof Animal); // true
console.log(dog.constructor === Dog); // true

Важно: class - это синтаксический сахар над прототипным наследованием, а не новая система. Понимание функций-конструкторов по-прежнему необходимо для работы с легаси-кодом и глубокого понимания JavaScript.

Итог: шпаргалка по решениям