Что такое call?

Что такое call?

call() — это метод в JavaScript, который вызывает функцию с явным указанием контекста (значение this). Это один из трёх способов управления контекстом наряду с apply() и bind().

Основной синтаксис

function.call(thisArg, arg1, arg2, arg3, ...)

• thisArg — объект, на который будет указывать this
• arg1, arg2, ... — аргументы, передаваемые функции

Простой пример

const person = {
  name: "Иван",
  age: 25,
  greet: function(greeting, punctuation) {
    console.log(`${greeting}, я ${this.name}${punctuation}`);
  }
};

// Вызов как обычно
person.greet("Привет", "!"); // Привет, я Иван!

// Используем call() для другого контекста
const anotherPerson = { name: "Мария", age: 30 };
person.greet.call(anotherPerson, "Привет", "!");
// Привет, я Мария!

Различие между call и apply

call() и apply() делают одно и то же, но по-разному:

function introduce(country, city) {
  console.log(`Я ${this.name} из ${country}, город ${city}`);
}

const person = { name: "Алексей" };

// call() — аргументы через запятую
introduce.call(person, "Россия", "Москва");
// Я Алексей из Россия, город Москва

// apply() — аргументы в массиве
introduce.apply(person, ["Россия", "Москва"]);
// Я Алексей из Россия, город Москва

Практический пример 1: Заимствование метода

Можно вызвать метод одного объекта с контекстом другого:

const car = {
  brand: "Toyota",
  getInfo: function() {
    return `Это ${this.brand}`;
  }
};

const bike = {
  brand: "Yamaha"
};

// Заимствуем метод car для bike
const info = car.getInfo.call(bike);
console.log(info); // Это Yamaha

Практический пример 2: Работа с Array методами

Можно использовать Array методы для других объектов:

const arrayLike = {
  0: "a",
  1: "b",
  2: "c",
  length: 3
};

// Используем Array.prototype.join для array-like объекта
const result = Array.prototype.join.call(arrayLike, "-");
console.log(result); // a-b-c

// Или slice
const arr = Array.prototype.slice.call(arrayLike);
console.log(arr); // ["a", "b", "c"]

Практический пример 3: В конструкторах

Часто используется для наследования:

function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name); // Вызываем конструктор Animal
  this.breed = breed;
}

const dog = new Dog("Барбос", "Овчарка");
console.log(dog.name); // Барбос
console.log(dog.breed); // Овчарка

Практический пример 4: Функции высшего порядка

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

const numbers = [1, 2, 3];

// Используем call для вызова с массивом как контекст
const result = sum.call(null, ...numbers);
console.log(result); // 6

Сравнение call, apply и bind

function greet(greeting, punctuation) {
  console.log(`${greeting}, я ${this.name}${punctuation}`);
}

const person = { name: "Нина" };

// call() — вызывает сразу
greet.call(person, "Привет", "!");
// Привет, я Нина!

// apply() — вызывает сразу, аргументы в массиве
greet.apply(person, ["Привет", "!"]);
// Привет, я Нина!

// bind() — возвращает новую функцию
const boundGreet = greet.bind(person, "Привет", "!");
boundGreet(); // Привет, я Нина!

Практический пример 5: Декоратор с call

function logExecutionTime(func) {
  return function(...args) {
    const start = performance.now();
    
    // Вызываем функцию с правильным контекстом
    const result = func.call(this, ...args);
    
    const end = performance.now();
    console.log(`Выполнено за ${(end - start).toFixed(2)}ms`);
    
    return result;
  };
}

const user = {
  name: "Петр",
  getData: logExecutionTime(function(id) {
    return `Данные пользователя ${this.name}: ${id}`;
  })
};

user.getData(123);

Типичные использования

// 1. Заимствование методов
const str = "hello";
const arr = Array.prototype.slice.call(str);
console.log(arr); // ["h", "e", "l", "l", "o"]

// 2. Проверка типа
Object.prototype.toString.call([1, 2]); // "[object Array]"
Object.prototype.toString.call({});     // "[object Object]"
Object.prototype.toString.call(5);      // "[object Number]"

// 3. Работа с this в обработчиках
class Button {
  constructor(id) {
    this.id = id;
  }
  
  handleClick() {
    console.log(`Кнопка ${this.id} нажата`);
  }
}

const btn = new Button("btn1");
document.addEventListener("click", btn.handleClick.call(btn));

Итоги

call() — это метод для:

1. Явного управления контекстом — указываем, на какой объект будет указывать this
2. Заимствования методов — используем метод одного объекта для другого
3. Наследования — вызываем родительский конструктор
4. Функциональной композиции — создаём обёртки и декораторы
5. Работы с Array-like объектами — применяем Array методы к строкам, arguments и т.д.

Современные альтернативы: стрелочные функции (лексический this) и bind() для постоянного связывания контекста.