Это третья статья из серии, посвященной тому, что на самом деле представляет собой this
в JS.
Почти для всех функций (тех, которые доступны в JS, и тех, которые мы пишем) доступны .call(..)
и .apply(..)
.
В этом блоге мы рассмотрим, как эти методы помогают нам явно связать this
с конкретным объектом.
ПРИМЕЧАНИЕ. Мы не исследуем различия между .call(..)
и .apply(..)
. Они отличаются, когда вы передаете им дополнительные параметры. Мы пытаемся понять, как мы можем использовать их в явной привязке this
. Когда мы хотим явно привязать this
к определенному объекту, .call(..)
и .apply(..)
одинаковы, и этому посвящен этот блог.
Теперь давайте погрузимся прямо в.
Итак, наша цель — явно связать this
с конкретным объектом. Но что такое явная привязка this
? Это когда вы решаете на месте вызова, к какому объекту вы хотите привязать вызов функции this
. Как следует из названия, вы явно заявляете, что «Эй, это объект, к которому я хочу привязать this
(для этого конкретного вызова функции)!».
В JS привязка this
определяется на месте вызова функции. Итак, мы будем использовать .call(..)
/.apply(..)
на месте вызова функции. (Если вы не знаете, как найти сайт вызова функции в JS, вы можете обратиться к блогу «JavaScript: поиск сайта вызова функции»).
Рассмотрим следующую функцию:
Теперь рассмотрим следующий объект:
Теперь мы хотим привязать (явно привязать) объект, который мы только что создали (т.е. tinkerFairy
), к функции, которую мы создали выше (т.е. createFairy
).
Это можно сделать очень легко как с .call(..)
, так и с .bind(..)
. Вы можете сделать:
Или вы можете сделать:
Из вывода видно, что this
нашей функции createFairy
теперь привязано к объекту tinkerFairy
для обоих вызовов функций, показанных выше.
Вот и все! Вот как вы можете вызвать функцию, используя .call(…)
или .apply(..)
, чтобы явно привязать ее this
к любому объекту по вашему выбору.
Дальнейшие шаги:
Следующая статья из этой серии JavaScript: изучите «это — это не то!» посвящена исследованию неправильных представлений о том, что такое this
в JS.
Заключительные комментарии:
Я делаю целую серию статей на тему Javascript: Learn ‘this’. Если вас интересуют предыдущие статьи этой серии, вы можете обратиться к:
- JavaScript: Изучите «это — поиск CALL-SITE функции»
- JavaScript: изучите «это — так что же такое КОНСТРУКТОР?»
Спасибо, что прочитали. :-)