Function.prototype.call

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

Що робить `call`

call() виконує функцію, вказуючи, який саме об'єкт буде this всередині неї, і передає аргументи через кому.

Синтаксис:

javascript

func.call(thisArg, arg1, arg2, ...)

func - сама функція, яку ти викликаєш;
thisArg - об'єкт, який стане this всередині функції;
arg1, arg2, ... - аргументи, які передаються у функцію.

Приклад 1 - простий випадок

javascript

function greet() {
  console.log(`Привіт, я ${this.name}`);
}

const user = { name: 'Alice' };

greet.call(user); // Привіт, я Alice

Тут this всередині greet тепер вказує на об'єкт user.

Приклад 2 - з аргументами

javascript

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

const person = { name: 'Alice' };

introduce.call(person, 'Kyiv', 'Frontend-розробник');
// Я Alice з Kyiv, працюю як Frontend-розробник

Приклад 3 - запозичення методу

Іноді зручно тимчасово "позичити" метод одного об'єкта для іншого:

javascript

const user1 = {
  name: 'Maria',
  sayHi() {
    console.log(`Привіт, я ${this.name}`);
  }
};

const user2 = { name: 'Alice' };

user1.sayHi.call(user2); // Привіт, я Alice

Приклад 4 - виклик вбудованих функцій на чужих об'єктах

javascript

const arr = ['a', 'b', 'c'];

console.log(Array.prototype.join.call(arr, '-')); // a-b-c

Тут ми явно викликаємо метод join у прототипу Array, передаючи arr як контекст. Це корисно, якщо об'єкт схожий на масив (наприклад, arguments або NodeList).

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

Метод	Що робить	Як передаються аргументи
call	викликає функцію із заданим `this`	через кому
apply	викликає функцію із заданим `this`	як масив
bind	повертає нову функцію з "прив'язаним" `this`	через кому

Приклад порівняння:

javascript

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

console.log(sum.call(null, 1, 2));     // 3
console.log(sum.apply(null, [1, 2]));  // 3

const bound = sum.bind(null, 1, 2);
console.log(bound()); // 3 (виклик пізніше)

Особливості

Якщо передати null або undefined як thisArg, то всередині функції:
- у строгому режимі ('use strict') this буде undefined;
- у нестрогому - this стане глобальним об'єктом (window у браузері).

javascript

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

showThis.call(null); // window (у нестрогому режимі)

Підсумок

Що робить	Керує значенням `this` під час виклику функції
Одразу викликає функцію	Так
Повертає нову функцію	Ні
Як передаються аргументи	Через кому
Підтримка замикання	Так
Безпека	Безпечно, якщо не передавати `null` без `'use strict'`

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

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

Premium

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