Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод класу VS функція у властивості об'єкта». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Синтаксис

**Метод класу:**

```javascript
class User {
  greet() {
    console.log(`Hi, ${this.name}`);
  }
}
```

**Функція-властивість об'єкта:**

```javascript
const user = {
  greet: function() {
    console.log(`Hi, ${this.name}`);
  }
};
```

Виглядають схоже, але **перший, це прототипний метод**, а другий, **унікальна властивість конкретного об'єкта**.

---

## 2. Де зберігається метод

| Підхід | Де зберігається функція |
| --- | --- |
| **Метод класу** | У `User.prototype` |
| **Функція-властивість об'єкта** | У самому об'єкті (у його «тілі») |

### Приклад:

```javascript
class A {
  sayHi() {}
}

const a1 = new A();
const a2 = new A();

console.log(a1.sayHi === a2.sayHi); // true: метод один на всіх

// А тепер об'єкт
const obj1 = {
  sayHi: function() {}
};
const obj2 = {
  sayHi: function() {}
};

console.log(obj1.sayHi === obj2.sayHi); // false: у кожного своя копія
```

**Методи класу економлять пам'ять**, бо один метод зберігається в прототипі й використовується всіма екземплярами.

---

## 3. Створення і момент виділення функції

- У **класі** метод додається **один раз під час визначення класу**.
- В **об'єкті** функція-властивість створюється **щоразу під час створення нового об'єкта**.

Тобто якщо ти створюєш 1000 екземплярів класу, всі вони ділять один метод.
А якщо створюєш 1000 об'єктів із функцією-властивістю, у пам'яті буде 1000 різних функцій.

---

## 4. Відмінність під час успадкування

Методи класу автоматично беруть участь в успадкуванні через `prototype`.

```javascript
class Animal {
  speak() {
    console.log("The animal makes a sound");
  }
}

class Dog extends Animal {}

const dog = new Dog();
dog.speak(); // The animal makes a sound
```

А от об'єкт із функцією-властивістю не бере участі в успадкуванні (якщо не використовувати `Object.create`).

---

## 5. Відмінність у синтаксисі `super`

`super` (виклик батьківського методу) працює **лише в класах**,
а у звичайних об'єктах, ні (якщо не застосовувати просунуті прийоми з `Object.setPrototypeOf`).

```javascript
class A {
  greet() { console.log("Hi from A"); }
}
class B extends A {
  greet() {
    super.greet(); // доступний
    console.log("Hi from B");
  }
}
```

В об'єкті:

```javascript
const a = { greet() { console.log("Hi from A"); } };
const b = {
  greet() {
    // super.greet(); не працює без прототипу
    console.log("Hi from B");
  }
};
```

---

## 6. Поведінка `this`

І в класі, і в об'єкті метод зберігає `this`,
але якщо передати його як колбек, `this` **втрачається** (якщо це не стрілкова функція):

```javascript
class A {
  hello() {
    console.log(this); // A
  }
}

const a = new A();
setTimeout(a.hello, 1000); // undefined (контекст втрачено)
```

Те саме з об'єктом:

```javascript
const obj = {
  hello() {
    console.log(this);
  }
};

setTimeout(obj.hello, 1000); // undefined
```

Якщо потрібно зберегти контекст, використовують стрілкові функції як властивості:

```javascript
class A {
  hello = () => {
    console.log(this); // завжди правильний this
  };
}
```

---

## 7. Різниця у визначенні (опис на рівні мови)

| Відмінність | Метод класу | Функція-властивість об'єкта |
| --- | --- | --- |
| Де зберігається | `Class.prototype` | У самому об'єкті |
| Спільна для екземплярів | Так | Ні |
| Створюється під час | Визначення класу | Створення об'єкта |
| Бере участь в успадкуванні | Так | Ні |
| Доступ до `super` | Так | Ні |
| Втрата `this` у колбеку | Так (якщо не стрілка) | Так (якщо не стрілка) |
| Продуктивність і пам'ять | Ефективніше | Менш ефективно |

---

## Приклад для візуалізації

```javascript
class User {
  greet() { console.log("I am a class method"); }
}

const obj = {
  greet() { console.log("I am an object property function"); }
};

console.log(Object.getOwnPropertyNames(User.prototype)); // ["constructor", "greet"]
console.log(Object.keys(obj)); // ["greet"]
```

---

**Підсумок:**
Методи класу, це функції в прототипі, спільні для всіх екземплярів (економлять пам'ять, беруть участь в успадкуванні, підтримують `super`).
Функції-властивості об'єкта, це звичайні властивості, що належать конкретному об'єкту, створюються заново щоразу і не беруть участі в успадкуванні.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати628 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.