Misingi ya Kufanya Kazi na Context katika JavaScript

Hebu tuwe na baadhi ya funkta func, ndani yake inatumia this:

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

this katika funkta hii inaelekeza wapi? Na hatujui. Na JavaScript haijui. Na funkta yenyewe haijui. Yaani wakati wa kuunda funkta hiyo, this inaelekeza wapi, haijabainika. Na itabainika tu wakati funkta hiyo itakapoitwa.

Hebu tuwe na kitufe cha kuingiza:

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

Weka funkta yetu func kwenye kitufe hiki ili ifanyike wakati kitufe kinapopoteza umakini. Sasa wakati wa kufanya kazi this itaelekeza kwenye kitufe chetu:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // wakati wa kupoteza umakini itaonyesha 'text'
}

Lakini inaweza kuwa hatuna kitufe kimoja tu, bali zaidi ya moja:

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

Na kwa kila kitufe kati ya hizi tunaweza kuweka funkta yetu func. Katika kesi hii kwa kipengele cha kwanza this wakati wa kuwaita funkta itaelekeza kwake, na kwa cha pili - kwake.

Kwa vitendo hii inamaanisha kuwa this ndani ya funkta inategemea ni kitufe gani tumepoteza umakini:

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

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

function func() {
	console.log(this.value); // itaonyesha ama 'text1', ama 'text2'
}

Kwa ujumla, huu umbo la this unaofaa sana - tunaunda funkta moja tu na kuiweka kwa idadi yoyote ya vitufe. Kama this isingeelekeza kwenye kipengele, ambapo tukio limetokea, basi hatingeweza kufanikiwa - tungelazimika kwa kila kitufe kuunda funkta yake mwenyewe na msimbo ule ule!