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

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

Допрацюйте відповідь до «Function.prototype.apply». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

Метод `Function.prototype.apply` - це "близький родич" методу `call`, але з дещо іншим способом передачі аргументів.
Він використовується, щоб **викликати функцію з явним вказанням контексту (**`this`**)**, але **аргументи передаються масивом**, а не через кому.

---

## Синтаксис

```javascript
func.apply(thisArg, [argsArray])
```

- `thisArg` - об'єкт, який стане `this` всередині функції;
- `argsArray` - масив (або масивоподібний об'єкт) з аргументами.

---

## Приклад 1 - базове використання

```javascript
function greet(city, job) {
  console.log(`Я ${this.name} з ${city}, працюю як ${job}`);
}

const user = { name: 'Tim' };

greet.apply(user, ['Berlin', 'Frontend developer']);
// Я Tim з Berlin, працюю як Frontend developer
```

Те саме, що:

```javascript
greet.call(user, 'Berlin', 'Frontend developer');
```

Але різниця - **у способі передачі аргументів**:

- `call` -> через кому,
- `apply` -> масивом.

---

## Приклад 2 - використання з масивоподібними об'єктами

Метод `apply` часто застосовують, коли аргументи вже зберігаються в масиві або схожій структурі (`arguments`, `NodeList` тощо):

```javascript
function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

console.log(sum.apply(null, numbers)); // 6
```

---

## Приклад 3 - "запозичення" методів для масивоподібних структур

```javascript
function logArgs() {
  console.log(arguments);

// перетворюємо arguments у масив за допомогою Array.prototype.slice
  const arr = Array.prototype.slice.apply(arguments);
  console.log(arr);
}

logArgs(1, 2, 3, 4);
// arguments → [1, 2, 3, 4]
```

Тут `apply` допомагає використати метод масиву (`slice`) на об'єкті `arguments`, у якого немає власних методів масивів.

---

## Приклад 4 - використання для `Math.max` / `Math.min`

Методи `Math.max` і `Math.min` **не приймають масив**, а лише перелічені числа.
`apply` вирішує це елегантно:

```javascript
const nums = [10, 20, 5, 40];

console.log(Math.max.apply(null, nums)); // 40
console.log(Math.min.apply(null, nums)); // 5
```

Аналог на ES6:

```javascript
Math.max(...nums); // сучасний синтаксис spread
```

---

## Різниця між `apply`, `call` і `bind`

| Метод | Що робить | Як передаються аргументи | Коли викликається |
|---|---|---|---|
| **call** | Викликає функцію з указаним `this` | Через кому | Одразу |
| **apply** | Викликає функцію з указаним `this` | У вигляді масиву | Одразу |
| **bind** | Створює нову функцію з "прив'язаним" `this` | Через кому | Пізніше (при виклику) |

---

## Особливості `thisArg`

- Якщо `thisArg` - `null` або `undefined`, то:
  - у **суворому режимі** (`'use strict'`) -> `this = undefined`
  - у **несуворому** -> `this = window` (або `global` у Node.js)

```javascript
function showThis() {
  console.log(this);
}

showThis.apply(null); // window (у несуворому режимі)
```

---

## Підсумок

| Властивість | Опис |
|---|---|
| Призначення | Викликати функцію з указаним `this` |
| Спосіб передачі аргументів | Масив або масивоподібний об'єкт |
| Контекст виконання | Глобальний або заданий вручну |
| Коли викликати | Коли аргументи вже зібрані в масив |
| Сучасна альтернатива | `func(...args)` (spread-синтаксис) |

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

Для рев’юера

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

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