Grondbeginsels van Kontekswerking in JavaScript

Gestel ons het 'n funksie func, binne-in waarvan this gebruik word:

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

Waarheen wys this in hierdie funksie? En ons weet nie. En JavaScript weet nie. En die funksie self weet nie. Dit beteken dat op die oomblik van skepping van die funksie, dit waarheen presies this wys, nie bepaal is nie. En dit sal slegs bepaal word wanneer hierdie funksie opgeroep word.

Gestel ons het 'n invoerveld:

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

Laat ons hierdie funksie func aan hierdie invoerveld bind sodat dit uitgevoer word wanneer die invoerveld fokus verloor. Nou sal op die oomblik van uitvoering van die funksie this na ons invoerveld wys:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // met fokusverlies sal dit 'text' uitdruk
}

Maar ons kan nie net een invoerveld hê nie, maar verskeie:

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

En aan elkeen van hierdie invoervelde kan ons ons funksie func bind. In hierdie geval vir die eerste element sal this op die oomblik van oproep van die funksie daarna wys, en vir die tweede - daarna.

In die praktyk beteken dit dat this binne die funksie afhang van op watter invoerveld ons fokus verloor het:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // sal óf 'text1', óf 'text2' uitdruk
}

In die algemeen is so 'n eienskap van this baie gerieflik - ons skep net een funksie en bind dit aan enige aantal invoervelde. As this nie na daardie element gewys het nie, waarin die gebeurtenis plaasgevind het, sou ons dit nie kon regkry nie - ons sou vir elke invoerveld ons eie funksie met dieselfde kode moes skep!