Следующий метод bind позволяет навсегда
привязать контекст к функции. Своим результатом
этот метод возвращает новую функцию, внутри
которой this будет иметь жестко заданное
значение.
Давайте посмотрим на примере.
Пусть у нас есть инпут:
<input id="elem" value="text">
Пусть ссылка на этот инпут записана в переменную
elem:
let elem = document.querySelector('#elem');
Пусть у нас также есть следующая функция
func:
function func(param1, param2) {
console.log(this.value + param1 + param2);
}
Давайте с помощью bind сделаем новую
функцию, которая будет копией функции func,
но this в ней всегда будет равен elem:
let newFunc = func.bind(elem);
Теперь в переменной newFunc лежит
функция. Давайте вызовем ее, передав в первый
параметр '1', а во второй '2'
(напоминаю, что в elem лежит инпут с value,
равным 'text'):
newFunc('1', '2');
Давайте соберем все вместе:
let elem = document.getElementById('elem');
function func(param1, param2) {
console.log(this.value + param1 + param2);
}
let newFunc = func.bind(elem);
newFunc('1', '2'); // выведет 'text12'
Не обязательно записывать результат работы
bind в новую функцию newFunc,
можно просто перезаписать func. После
этого func будет такой же функцией, как и
была, но с жестко связанным this:
func = func.bind(elem);
Пусть дан следующий код:
<input id="elem" value="привет">
let elem = document.getElementById('elem');
function func(surname, name) {
console.log(this.value + ', ' + surname + ' ' + name);
}
//!! Тут напишите конструкцию с bind()
func('Иванов', 'Иван'); // тут должно вывести 'привет, Иванов Иван'
func('Петров', 'Петр'); // тут должно вывести 'привет, Петров Петр'
Напишите в указанном месте конструкцию с
методом bind так, чтобы this внутри
функции func всегда указывал на инпут
из переменной elem.