Недавно у меня возникла проблема, связанная с тем, что я столкнулся с call и apply в JavaScript. Поскольку я забыл, в чем разница или почему вы можете ее использовать, я выучил ее.

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

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

Пример

Пример кода всегда помогает разобраться. В следующем примере показана очень простая функция, которая принимает два аргумента: a и b. Функция регистрирует их сумму, а также свой this контекст.

В самом первом и последнем из трех вызовов this является объектом global. Это зависит от того, где вы его выполняете, здесь это было в среде узла. Если бы вы попробовали это в браузере, вы, вероятно, увидели бы объект window.

Теперь, с вызовом call в строке 10, вы фактически вызываете функцию с { example: "test" } в качестве объекта this. В качестве второго аргумента вы передаете аргументы функции в виде единого массива [1, 2]. Вызов apply в строке 14 не передает объект this, что не приводит к изменению контекста. Там аргументы передаются как отдельные объекты ( 1, 2).

Что касается call, вы также можете использовать bind JavaScript, чтобы создать новую функцию с другим контекстом this. Он принимает те же аргументы и вызывает тот же результат, что и call: add.bind({ example: 'test' }, 1, 2).

Большой пример

В следующем примере показано использование call и apply в более сложном и реалистичном сценарии. Что делает код, так это печатает name и age контекста this, а также дополнительную информацию, переданную в качестве аргумента.

Итак, первый вызов в строке 12 — это то, к чему, вероятно, привыкло большинство. Он печатает свои определенные значения. Теперь строка 15 заменяет объект this объектом global, что приводит к undefined. Также интересна строка 24, в которой передается объект { name: "Marius", age: 15 }, что приводит к другому результату.

Вывод

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

Первоначально опубликовано на https://mariusreimer.com 31 августа 2019 г.