Использование call(), apply() и bind() в JavaScript
JavaScript - очень динамичный язык, что является одновременно его плюсом и минусом. Минусом, потому, что далеко не сразу становится очевидно, что действительно стоит за тем или иным аспектом языка, т.е. за кажущейся простотой стоит достаточно сложная концепция. В частности, это касается ключевого слова this в JavaScript. Работать с this в JavaScript не так просто как может показаться на первый взгляд. Это может привести к тому, что "программа работает, но неизвестно как" или того хуже "программа не работает и неизвестно почему.".
Сегодня мы рассмотрим неотъемлемых спутников this, методы сall(), apply() and bind().
Правила JavaScript this
- this всегда ссылается на объект
- this ссылается на объект, вызывающий функцию
- в глобальном контексте this содержит ссылку на объект окна (window), либо содержит undefined в строгом режиме (strict mode)
var pad = {
regNumber: "AE8345FEDAS",
brand: "HUAWEI",
showInfo: function() {
console.log(this.regNumber + " " + this.brand);
}
}
Все будет работать прекрасно при использовании в следующем виде:
pad.showInfo(); // AE8345FEDAS HUAWEI
Но что произойдет, если мы захотим одолжить метод?
var padDetails = pad.showInfo;
padDetails();
В данном случае ничего работать не будет, так как this ссылается на глобальный контекст (глобальный объект), который не содержит переменных regNumber и brand.
Метод bind
Для похожих случаев, как в примере выше, мы можем использовать метод bind, являющийся свойством Function.prototype. Основная его задача - вернуть функцию, которая будет вызвана для нужного вам контекста.
var padDetails = pad.showInfo.bind(pad)
padDetails();
Теперь пример заработает, так как метод bind привязывает новый контекст, где this ссылается на переданный bind параметр. Таким образом, с помощью метода bind можно вызвать функцию, передавая ей определенный контекст.
Но, что, если нам необходимо передать параметры в функцию showInfo. Тогда наш пример приобретет следующий вид:
var pad = {
regNumber: "AE8345FEDAS",
brand: "HUAWEI",
showInfo: function(country) {
console.log(country + " " + this.regNumber + " " + this.brand);
}
}
var padDetails = pad.showInfo.bind(pad, "China")
padDetails();
Методы call() и apply()
Эти методы также доступны через свойство Function.prototype, т.е. могут вызываться у любой функции.
Вот как они применяются:
var pad = {
regNumber: "AE8345FEDAS",
brand: "HUAWEI"
}
function showInfo(country) {
console.log(country + " " + this.regNumber + " " + this.brand);
}
// передаем контекст функции showInfo через метод apply
showInfo.apply(pad, ["Taiwan"]);
// а здесь через метод call
showInfo.call(pad, "China");
Обратите внимание здесь на одну деталь: при использовании функции apply() параметры передаваемые в вызываемую функцию должны иметь вид массива, тогда как call() просто отдельные значения.
Таким образом, методы bind(), apply() и call() используются при установке контекста вызываемой функции и поэтому часто они становятся незаменимым инструментом в JavaScript.
-
Создано 09.04.2019 09:45:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.