JavaScript-də kontekstlə işin əsasları

Tutaq ki, bizim içində this istifadə olunan func adlı bir funksiyamız var:

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

Bu funksiyada this nəyə işarə edir? Biz bilmirik. Və JavaScript də bilmir. Və funksiyanın özü də bilmir. Yəni funksiya yaradılan zaman this-in dəqiq nəyə işarə edəcəyi müəyyən deyil. Və bu, yalnız həmin funksiya çağırılanda müəyyən ediləcək.

Tutaq ki, bizim bir inputumuz var:

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

Gəlin bu inputa func funksiyamızı elə bağlayaq ki, input fokusu itirdikdə icra olunsun. İndi funksiya icra olunan zaman this bizim inputumuza işarə edəcək:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // fokus itirildikdə 'text' çap edəcək
}

Amma bizim bir yox, bir neçə inputumuz ola bilər:

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

Və biz hər bir bu inputa func funksiyamızı bağlaya bilərik. Bu halda, birinci element üçün funksiya çağırılan zaman this ona, ikinci üçün isə ona işarə edəcək.

Praktikada bu o deməkdir ki, funksiyanın içərisindəki this hansı inputda fokus itirdiyimizdən asılıdır:

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

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

function func() {
	console.log(this.value); // ya 'text1', ya da 'text2' çap edəcək
}

Ümumiyyətlə, this-in bu xüsusiyyəti çox rahatdır - biz cəmi bir funksiya yaradırıq və onu istənilən sayda inputa bağlayırıq. Əgər this hadisənin baş verdiyi elementə işarə etməsəydi, bu mümkün olmazdı - hər bir input üçün eyni kodu olan öz funksiyamızı yaratmalı olacaqdıq!