Что делает bind()?
Функция bind() возвращает новую версию функции, для которой вызывается функция bind(). Функция bind() в основном связывает функцию с объектом таким образом, что свойства связанного объекта (который передается в качестве первого аргумента функции bind()) используются для любой операции, выполняемой в реализация связываемой функции. Функция bind() может принимать следующие аргументы:
- thisArg: значения или объект, на который будет ссылаться вызов функции.
- arg1, …, argN (необязательно): аргументы связанной функции при вызове функции.
Функция bind() устанавливает «контекст» для функции, для которой она вызывается. Когда мы привязываем функцию к любому объекту, вызов связанной функции не выполняется. Нам нужно явно вызвать связанную функцию, чтобы увидеть функцию в действии. [Примечание: в случае call() и apply() вызов связанной функции выполняется немедленно, и явный вызов не требуется.] Чтобы понять, что такое bind() делает именно так, нам нужно вспомнить значение и использование этогоключевого слова в JS.
этоключевое слово можно рассматривать как местоимение английского языка. Скажем, у нас есть функция thisDemo(), которая использует ключевое слово this, когда объект используется для вызова функции thisDemo(), этоключевое слово будет содержать значение объекта, вызывающегоthisDemo().
Какую проблему решает bind()/Где использовать bind()?
- Привязка функций
См. приведенный ниже пример кода:
const dummyObject = {
person1: "Ayushi",
person2: "Chirag",
meet: function(){
console.log(`$Today {this.person1} had a meeting with ${this.person2}`)
}
}
В JavaScript ключевое слово this, присутствующее внутри функцииmeet(), по умолчанию не будет иметь контекст dummyObject, поскольку в нестрогом режиме этоключевое слово относится к глобальному объекту window. Следовательно, когда вызов функции action() выполняется через dummyObject, JS попытается найти perosn1 и person2 в объекте окна, которых не будет, и, следовательно, он напечатает:
undefined met undefined
В случае строгого режима это значение будет неопределенным, поэтому вызов meet() завершится ошибкой. Аналогичное поведение было бы замечено, если бы мы использовали функцию meet() в качестве обратного вызова в любом асинхронном вызове, таком как setTimeout(). Чтобы решить эту проблему, мы используем функцию bind(), которая определяет контекст функции meet() для dummyObject :
const outsideScope = dummyObject.meet.bind(dummyObject);
2. Заимствовать методы из другого объекта
let cat = {
isAPet: true,
barks: false,
name: "Hachiko",
family: "Felidae",
hunt: function(prey){
console.log(this.name + " killed the " + prey);
}
}
let lion = {
name: "Simba"
}
cat.hunt("mouse");
let h = cat.hunt.bind(lion);
h("deer");
Когда мы запустим приведенный выше код, мы получим следующий вывод
Hachiko killed the mouse Simba killed the deer
Здесь вместо того, чтобы писать ту же самую функцию hunt() для объекта льва, мы могли бы позаимствовать функцию hunt() из объекта кошки и использовать ее со свойством name объекта льва.
