Function.prototype.apply

JavaScriptJunior~1 хв читання

Метод 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-синтаксис)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.