Как call принимает аргументы?

Как call принимает аргументы

call() - это встроенный метод функции, который вызывает функцию с явно задаваемым контекстом this и передает аргументы.

Синтаксис call()

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

Параметры:

• thisArg - значение this при вызове функции
• arg1, arg2, ... - аргументы, передаваемые функции (по одному, через запятую)

Первый аргумент - контекст (this)

function greet() {
  console.log('Привет, ' + this.name);
}

const user = { name: 'Alice' };

// Передаем user как контекст
greet.call(user); // 'Привет, Alice'

const another = { name: 'Bob' };
greet.call(another); // 'Привет, Bob'

Остальные аргументы - параметры функции

Все аргументы после первого передаются функции как параметры:

function sum(a, b, c) {
  console.log(a + b + c);
  console.log('Контекст:', this.name);
}

const context = { name: 'Контекст' };

// Первый arg = this, остальные = параметры функции
sum.call(context, 10, 20, 30);
// 60
// 'Контекст: Контекст'

Практические примеры

Заимствование методов

const user1 = {
  name: 'Alice',
  sayHello: function() {
    console.log('Привет, я ' + this.name);
  }
};

const user2 = { name: 'Bob' };

// user1.sayHello() вызовет функцию с this = user1
user1.sayHello(); // 'Привет, я Alice'

// user1.sayHello.call(user2) вызовет то же с this = user2
user1.sayHello.call(user2); // 'Привет, я Bob'

Передача нескольких аргументов

function introduce(greeting, hobby) {
  console.log(`${greeting}, я ${this.name}`);
  console.log(`Мое хобби: ${hobby}`);
}

const person = { name: 'Charlie' };

// call(контекст, аргумент1, аргумент2, ...)
introduce.call(person, 'Привет', 'Программирование');
// 'Привет, я Charlie'
// 'Мое хобби: Программирование'

Преобразование arguments в Array

function myFunction() {
  console.log(arguments);      // не настоящий Array
  
  // Используем call чтобы вызвать Array.slice с arguments
  const argsArray = Array.prototype.slice.call(arguments);
  console.log(argsArray);      // настоящий Array
  console.log(argsArray.join(','));
}

myFunction('a', 'b', 'c');
// arguments: { 0: 'a', 1: 'b', 2: 'c' }
// argsArray: ['a', 'b', 'c']
// 'a,b,c'

Вызов метода родительского класса

const parent = {
  name: 'Parent',
  greet: function(greeting) {
    console.log(`${greeting}, я ${this.name}`);
  }
};

const child = {
  name: 'Child',
  callParentGreet: function() {
    // Вызываем parent.greet с контекстом child
    parent.greet.call(this, 'Привет');
  }
};

child.callParentGreet(); // 'Привет, я Child'

call vs apply vs bind

Три метода для задания контекста:

call() - аргументы по одному

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

const context = { bonus: 10 };

// Аргументы перечисляются через запятую
sum.call(context, 5, 3); // 18

apply() - аргументы в массиве

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

const context = { bonus: 10 };

// Аргументы в массиве
sum.apply(context, [5, 3]); // 18

bind() - возвращает новую функцию

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

const context = { bonus: 10 };

// Возвращает новую функцию с привязанным контекстом
const boundSum = sum.bind(context);
boundSum(5, 3); // 18

// Можно привязать аргументы
const boundSum5 = sum.bind(context, 5);
boundSum5(3); // 18

Сравнительная таблица

Практические примеры использования call

Работа с методами Array

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

// Используем Array методы для array-like объектов
const result = Array.prototype.map.call(arrayLike, item => item.toUpperCase());
console.log(result); // ['A', 'B', 'C']

// Фильтруем
const filtered = Array.prototype.filter.call(arrayLike, item => item !== 'b');
console.log(filtered); // ['a', 'c']

Наследование в конструкторах

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

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

const dog = new Dog('Rex', 'Лабрадор');
console.log(dog.name);   // 'Rex'
console.log(dog.breed);  // 'Лабрадор'

Получение максимума из массива

const numbers = [10, 20, 30, 40, 50];

// Math.max обычно так:
Math.max(10, 20, 30);

// Но если числа в массиве, используем apply
const max = Math.max.apply(null, numbers);
console.log(max); // 50

// Или используем spread operator (современный способ)
const max2 = Math.max(...numbers);
console.log(max2); // 50

Подсчет элементов в DOM

// HTMLCollection - не настоящий Array
const items = document.querySelectorAll('.item');

// Преобразуем в Array используя call
const itemsArray = Array.prototype.slice.call(items);

// Теперь можем использовать Array методы
const filtered = itemsArray.filter(item => {
  return item.classList.contains('active');
});

// Или используем from (современный способ)
const itemsArray2 = Array.from(items);

Вызов функции без контекста

function greet() {
  console.log('Привет, ' + this.name);
}

// call(null) - this будет undefined в strict mode
greet.call(null); // 'Привет, undefined'

// call(undefined) - то же самое
greet.call(undefined); // 'Привет, undefined'

// call(window) - this будет window
greet.call(window); // 'Привет, ' (window.name пуст)

Важные моменты

1. Первый аргумент всегда контекст (this), даже если null или undefined
2. Остальные аргументы передаются функции в порядке перечисления
3. call вызывает функцию немедленно, в отличие от bind
4. call работает с методами и функциями, включая встроенные

function test(a, b, c) {
  console.log('this:', this);
  console.log('a:', a, 'b:', b, 'c:', c);
}

test.call({ id: 1 }, 'first', 'second', 'third');
// this: { id: 1 }
// a: first, b: second, c: third

Современные альтернативы

В современном JavaScript часто используются:

// Вместо call - стрелочные функции
const user = { name: 'Alice' };
function greet() {
  console.log(this.name);
}

// Старый способ
greet.call(user);

// Новый способ - стрелочная функция
() => greet.call(user);

// Или используйте bind
const boundGreet = greet.bind(user);
boundGreet();

Заключение

call() принимает:

1. Первый аргумент - контекст для this
2. Остальные аргументы - параметры, передаваемые функции
3. Вызывает функцию немедленно с этим контекстом

Это мощный инструмент для работы с контекстом и заимствования методов между объектами.