Kontekstbinding via die call-metode in JavaScript

So, ons het ondersoek hoe this eintlik werk. Kom ons kyk nou na metodes wat ons toelaat om geforseerd te spesifiseer in watter konteks 'n funksie uitgevoer word (dit is om geforseerd te sê waaraan this gelyk is).

Die eerste metode wat ons sal ondersoek, word genoem call. Kom ons kyk na hoe dit werk met 'n voorbeeld. Gestel ons het 'n invoerveld:

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

Kom ons kry 'n verwysing na hierdie invoerveld en stoor dit in die veranderlike elem:

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

Kom ons maak nou 'n funksie func, waarbinne ons this.value sal uitvoer:

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

Vir nou weet ons funksie nie waarna this verwys nie. Sou ons dit gebind het deur addEventListener, dan sou dit geweet het. Maar ons gaan dit nie doen nie. In plaas daarvan sal ons net ons funksie roep en daaraan sê dat this gelyk moet wees aan elem.

Dit word so gedoen: func.call(elem). Hierdie kode is gelykstaande aan die eenvoudige roep van die funksie func soos volg: func(), net met die voorwaarde dat this gelyk is aan elem.

So, die sintaksis van die call-metode is soos volg: funksie.call(objek). Kom ons sit dit alles bymekaar:

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

function func() {
	console.log(this.value); // sal die invoerveld se value uitvoer
}
func.call(elem);

Gegee 'n funksie:

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

Gegee drie invoervelde:

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

Gebruik die metode call en die funksie func om die value van elk van die invoervelde op die skerm uit te voer.