Недавно у меня возникла проблема, связанная с тем, что я столкнулся с 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 г.