Legarea contextului prin metoda call în JavaScript

Așadar, am analizat cum funcționează de fapt this. Să analizăm acum metodele, care permit să indicăm forțat, în ce context este apelată funcția (adică să spunem forțat, cu ce este egal this).

Prima metodă pe care o vom analiza, se numește call. Să ne uităm la funcționarea ei cu un exemplu. Să presupunem că avem un input:

<input id="elem" value="text">

Să obținem referința la acest input și să o scriem într-o variabilă elem:

let elem = document.querySelector('#elem');

Să facem acum funcția func, în interiorul căreia să afișăm this.value:

function func() {
	console.log(this.value);
}

Deocamdată funcția noastră nu știe la ce se referă this. Dacă am lega-o prin addEventListener, atunci da. Dar nu vom face asta. În schimb, noi pur și simplu vom apela funcția noastră, spunându-i că this trebuie să fie egal cu elem.

Acest lucru se face astfel: func.call(elem). Acest cod este echivalent cu un simplu apel al funcției func astfel: func(), doar cu condiția ca this să fie egal cu elem.

Așadar, sintaxa metodei call este: funcție.call(obiect). Să adunăm totul la un loc:

let elem = document.querySelector('#elem');

function func() {
	console.log(this.value); // va afișa value inputului
}
func.call(elem);

Este dată funcția:

function func() {
	console.log(this.value);
}

Sunt date trei inputuri:

<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">

Cu ajutorul metodei call și a funcției func afișați pe ecran value al fiecărui input.