Kontekstin sitominen call-metodilla JavaScriptissä

Olemme siis selvittäneet, miten this todella toimii. Tarkastelkaamme nyt menetelmiä, joiden avulla voimme pakottaa määrittämään, missä kontekstissa funktiota kutsutaan (eli pakottaa kertomaan, mitä this on yhtä suuri kuin).

Ensimmäinen menetelmä, jota tarkastelemme, on nimeltään call. Katsotaanpa sen toimintaa esimerkin avulla. Oletetaan, että meillä on syötekenttä:

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

Haetaan viite tähän syötekenttään ja tallennetaan se muuttujaan elem:

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

Tehdään nyt funktio func, jonka sisällä tulostamme this.value:

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

Tällä hetkellä funktiomme ei tiedä, mihin this viittaa. Jos me sidomme sen addEventListener:n kautta, silloin kyllä. Mutta emme tee niin. Sen sijaan me yksinkertaisesti kutsumme funktiomme kertoen sille, että this tulee olla yhtä suuri kuin elem.

Se tehdään näin: func.call(elem). Tämä koodi vastaa funktion yksinkertaista kutsua func näin: func(), paitsi ehdolla, että this on yhtä suuri kuin elem.

Joten, call-metodin syntaksi on: funktio.call(objekti). Kootkaamme kaikki yhteen:

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

function func() {
	console.log(this.value); // tulostaa syötekentän valuen
}
func.call(elem);

Annettu funktio:

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

Annettu kolme syötekenttää:

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

call-metodin ja func-funktion avulla tulosta kunkin syötekentän value näytölle.