Які відмінності в поведінці ES5 функції-конструктора та ES2015 класу?

Повне пояснення

Що це і навіщо

• Функція‑конструктор (ES5) – традиційний спосіб створення об’єктів у JavaScript.
• Клас (ES2015) – новий синтаксис, що полегшує читання і підтримку коду.

Ключові принципи/терміни

• new – створює новий об’єкт, встановлює його прототип.
• prototype – об’єкт, що містить спільні методи.
• constructor – функція, яка виконується при створенні об’єкта.
• super() – виклик конструктора батьківського класу.
• #privateField – приватне поле, доступне лише в межах класу.

Як це працює

1. При виклику new Constructor() створюється порожній об’єкт.
2. Встановлюється його [[Prototype]] на Constructor.prototype (або ClassName.prototype).
3. Виконується тіло конструктора, що може додавати властивості.
4. Після завершення конструктор повертає об’єкт (якщо явно не повернуто інший).

Практика і реалізація

// ES5
function Person(name){ this.name = name; }
Person.prototype.sayHi = function(){ console.log('Hi, ' + this.name); };
const p1 = new Person('Alice');
p1.sayHi();

// ES2015
class Person {
  constructor(name){ this.name = name; }
  sayHi(){ console.log('Hi, ' + this.name); }
}
const p2 = new Person('Bob');
p2.sayHi();

Тестування (Jest)

test('class method works', () => {
  const p = new Person('Eve');
  expect(p.sayHi()).toBeUndefined(); // console.log returns undefined
});

Особливості в контексті JS Core

• Клас автоматично створює [[Prototype]] і встановлює його в ClassName.prototype.
• Методи класу визначаються як non‑enumerable і configurable, що відповідає поведінці прототипу ES5.
• Клас підтримує static методи, які доступні лише через конструктор.
• Підтримка super() дозволяє викликати батьківський конструктор без ручного доступу до Parent.call(this, …).

Оптимізація та edge cases

• У ES5 можна випадково змінити prototype після створення об’єктів, що призведе до різних поведінок. У класах це заборонено.
• Клас не дозволяє викликати конструктор без new; це запобігає помилкам типу "this is undefined".
• Private поля (#field) в класах гарантують реальну приватність, у прототипі це не можливо.

Часті помилки

1. Виклик конструктора без new у ES5 → this посилається на глобальний об’єкт.
2. Зміна Person.prototype після створення екземплярів → нові методи не доступні старим.
3. Використання this у функціях‑методах без прив’язки → контекст втрачається.
4. Неправильне використання super() у класі‑потомку → помилка "super() called before calling super constructor".
5. Забудьте про return у конструкторі ES5 → повертається новий об’єкт автоматично.
6. Визначення static у ES5 через Person.staticMethod = … → не є частиною прототипу.
7. Підключення #privateField у старих браузерах → не підтримується.
8. Використання new з функцією, що повертає об’єкт → конструктор ігнорується.

Cheatsheet

• new Func() → створює об’єкт, встановлює прототип.
• Func.prototype – спільні методи.
• class C{} → синтаксичний сахар над функцією‑конструктором.
• static – доступно через конструктор, а не екземпляр.
• #privateField – реальна приватність.

Follow‑up питання

1. Як працює super() у класах?
2. Чому методи класу є non‑enumerable?
3. Які переваги приватних полів у класах порівняно з ES5?