JavaScript call() vs apply(): Полное руководство

Основное различие между JavaScript Function.prototype.call() и Function.prototype.apply() заключается в том, как они обрабатывают аргументы функций. call() принимает аргументы индивидуально в качестве отдельных параметров, в то время как apply() принимает аргументы в виде массива или массивоподобного объекта. Оба метода позволяют вызывать функцию с указанным значением this, но их синтаксис и варианты использования существенно различаются, при этом call() работает немного быстрее из-за отсутствия накладных расходов на обработку массива аргументов.

Содержание

• Различия в обработке аргументов
• Вопросы производительности
• Варианты использования и сценарии
• Практические примеры
• Современные альтернативы

Различия в обработке аргументов

Основное различие между call() и apply() заключается в том, как они передают аргументы вызываемой функции. Как объясняется во многих источниках, call() принимает аргументы индивидуально, в то время как apply() принимает аргументы в виде массива.

Синтаксис метода call()

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

Синтаксис метода apply()

function.apply(thisArg, [arg1, arg2, arg3, ..., argN])

Например, для данной функции:

const func = function() {
    alert("Hello world!");
};

Оба метода будут работать идентично в этом простом случае, так как функция не принимает аргументы:

func.call(null);      // Работает нормально
func.apply(null);     // Также работает нормально

Однако разница становится очевидной при работе с аргументами:

function greet(name, greeting) {
    console.log(`${greeting}, ${name}!`);
}

// Использование call() с отдельными аргументами
greet.call(null, "Alice", "Hello");

// Использование apply() с массивом аргументов  
greet.apply(null, ["Bob", "Hi"]);

Согласно документации MDN, эти методы по сути одинаковы в том, как они передают аргументы вызываемой функции - различие заключается в определении внутри функции.

Вопросы производительности

Что касается производительности, несколько источников последовательно указывают, что call() обычно быстрее, чем apply(), хотя разница часто незначительна.

Бенчмарки производительности

На основе обсуждений на Stack Overflow, call() показывает лучшие результаты в бенчмарках:

• call() работает лучше, так как ему не нужно обрабатывать массив аргументов
• Разница в производительности наиболее заметна в критически важном для производительности коде
• Однако, как отмечено в исследованиях, фактическая производительность такой незначительной операции зависит от алгоритма, который ее использует

Когда производительность имеет значение

Для простых вызовов функций с известными аргументами прямой вызов функции быстрее, чем использование apply(), как упоминается в руководстве по JavaScript Function Apply от CodeLucky. Разница в производительности становится значительной только в:

• Высокочастотных вызовах функций (например, в циклах)
• Критически важных для производительности приложениях
• Крупномасштабных приложениях, вызывающих эти методы миллионы раз

Влияние современного JavaScript

С введением синтаксиса spread (распространения) ландшафт производительности изменился. Современные движки JavaScript эффективно оптимизируют синтаксис spread, делая его конкурентоспособной альтернативой apply() во многих сценариях.

Варианты использования и сценарии

Выбор между call() и apply() во многом зависит от вашего варианта использования и структуры аргументов.

Когда использовать call()

call() лучше всего подходит, когда:

• У вас фиксированное количество известных аргументов
• Аргументы уже доступны в виде отдельных переменных
• Вы работаете с заимствованием методов и нужно передать отдельные аргументы

Пример из документации GeeksforGeeks:

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

// Использование call() с отдельными аргументами
const result = add.call(null, 5, 3); // result = 8

Когда использовать apply()

apply() особенно эффективен, когда:

• Вы работаете с массивами аргументов
• У вас неизвестное количество аргументов
• Вы работаете с объектом arguments или массивоподобными объектами
• Вам нужно объединить массивы

Как отмечено в обсуждении на Reddit, apply лучше подходит при работе с фиксированным количеством аргументов, тогда как apply эффективен при работе с массивами или неизвестным количеством аргументов.

Операции с массивами

apply() традиционно использовался для операций с массивами, как показано в документации MDN:

const array = ["a", "b"];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

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

Рассмотрим конкретные примеры, демонстрирующие, когда каждый метод наиболее уместен.

Пример заимствования методов

Оба метода call() и apply() позволяют заимствовать методы из других объектов:

const person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

const user = {
    firstName: "John",
    lastName: "Doe"
};

// Использование call()
console.log(person.fullName.call(user)); // "John Doe"

// Использование apply() с массивом аргументов
console.log(person.fullName.apply(user)); // "John Doe"

Динамический вызов функции

Когда вам нужно динамически вызывать функцию с аргументами из массива:

function calculate(a, b, operation) {
    switch(operation) {
        case 'add': return a + b;
        case 'subtract': return a - b;
        case 'multiply': return a * b;
        case 'divide': return a / b;
        default: return 0;
    }
}

const numbers = [10, 5];
const operation = 'multiply';

// Использование apply() с массивом аргументов
const result = calculate.apply(null, [...numbers, operation]);
console.log(result); // 50

Работа с объектом arguments

apply() особенно полезен при работе с объектом arguments:

function sum() {
    return Array.prototype.reduce.call(arguments, (acc, val) => acc + val, 0);
}

// Использование apply() для передачи объекта arguments
console.log(sum.apply(null, [1, 2, 3, 4, 5])); // 15

Объединение массивов

Как упоминается в документации MDN, apply() можно использовать для операций с массивами:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// Использование apply() для объединения массивов
Array.prototype.push.apply(array1, array2);
console.log(array1); // [1, 2, 3, 4, 5, 6]

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

С введением синтаксиса spread в ES6 многие традиционные варианты использования apply() были заменены.

Синтаксис spread против apply()

Современный JavaScript позволяет использовать синтаксис spread (…), который предоставляет функциональность, аналогичную apply():

function greet(name, greeting) {
    console.log(`${greeting}, ${name}!`);
}

const args = ["Charlie", "Hello"];

// Использование синтаксиса spread (современная альтернатива)
greet(...args);

// Эквивалентно apply()
greet.apply(null, args);

Как отмечено в обсуждении на Stack Overflow, синтаксис spread уменьшил необходимость в apply() во многих случаях, хотя apply() остается полезным для:

• Совместимости со старыми браузерами
• Неитерируемых массивоподобных объектов
• Баз кода, которые не были перенесены на современный синтаксис

Когда все еще использовать apply()

Согласно статье Джона Кавана, apply() остается полезным в случаях, когда:

• Массивоподобный объект не является полноценным массивом
• Вы работаете со старым базом кода JavaScript
• Вам нужна совместимость со старыми движками JavaScript

Заключение

Ключевые различия между методами call() и apply() JavaScript сводятся к обработке аргументов:

1. call() принимает аргументы индивидуально, что делает его идеальным, когда у вас фиксированное количество известных параметров
2. apply() принимает аргументы в виде массива, что идеально подходит для динамических сценариев с неизвестным количеством аргументов или массивоподобных объектов
3. С точки зрения производительности, call() немного быстрее из-за отсутствия накладных расходов на обработку массива аргументов, хотя разница часто незначительна
4. Современный синтаксис spread (…x) уменьшил использование apply(), но он остается ценным для устаревшего кода и конкретных крайних случаев

Выбирайте call(), когда у вас есть предопределенные аргументы и вы хотите получить самый чистый синтаксис. Выбирайте apply() при работе с массивами, объектом arguments или когда вам нужна максимальная гибкость в обработке аргументов. Понимание, когда использовать каждый метод, поможет вам писать более эффективный и читаемый JavaScript код.

Источники

1. MDN - Function.prototype.call()
2. MDN - Function.prototype.apply()
3. Stack Overflow - What is the difference between call and apply?
4. Stack Overflow - JavaScript performance: Call vs Apply
5. GeeksforGeeks - Difference between Function.prototype.apply and Function.prototype.call
6. Medium - JavaScript Function Methods: Call vs Apply vs Bind
7. Reddit - Function invocation…why use .call() and .apply()?
8. CodeLucky - JavaScript Function Apply
9. John Kavanagh - Understanding prototype.apply() in JavaScript