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

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

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

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

Контент

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

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

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

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

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

## Що робить `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'` |

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

Для рев’юера

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

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