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ä:

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

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

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

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

javascriptfunction 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:

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

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

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

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