Итак, мы разобрали, как на самом деле работает
this. Давайте теперь рассмотрим методы,
которые позволяют принудительно указать,
в каком контексте вызывается функция (то
есть принудительно сказать, чему равен this).
Первый метод, который мы с вами разберем,
называется call. Давайте посмотрим
на его работу на примере. Пусть у нас есть инпут:
<input id="elem" value="text">
Давайте получим ссылку на этот инпут и запишем
ее в переменную elem:
let elem = document.querySelector('#elem');
Давайте теперь сделаем функцию func,
внутри которой алертом выведем this.value:
function func() {
console.log(this.value);
}
Пока наша функция не знает, на что ссылается
this. Вот, если бы мы ее привязали
через addEventListener, тогда да.
Но мы не будем этого делать. В замен мы просто
вызовем нашу функцию, сказав ей, что this
должен быть равен elem.
Это делается вот так: func.call(elem).
Этот код эквивалентен простому вызову функции
func вот так: func(), только
с условием, что this равен elem.
Итак, синтаксис метода call такой: функция.call(объект,
который записать в this). Давайте соберем
все вместе:
let elem = document.querySelector('#elem');
function func() {
console.log(this.value); // выведет value инпута
}
func.call(elem);
Дана функция:
function func() {
console.log(this.value);
}
Даны три инпута:
<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">
С помощью метода call и функции func
выведите на экран value каждого из инпутов.
Метод call с параметрами
Пусть теперь функция func принимает
некоторые параметры, назовем их param1
и param2:
function func(param1, param2) {
console.log(this.value + param1 + param2);
}
При вызове функции через call можно
передать эти параметры вот так:
func.call(elem, param1, param2);
Пусть дан следующий код:
<input id="elem" value="привет">
let elem = document.querySelector('#elem');
function func(surname, name) {
console.log(this.value + ', ' + surname + ' ' + name);
}
func(); // тут должно вывести 'привет, Иванов Иван'
Добавьте в последнюю строчку метод call
так, чтобы на экран вывелось 'привет,
Иванов Иван'. Слово 'привет' должно
взяться из value инпута, а 'Иванов'
и 'Иван' должны быть параметрами функциями.