JavaScript'te Bağlam ile Çalışmanın Temelleri

Diyelim ki içinde this kullanılan bir func fonksiyonumuz var:

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

Bu fonksiyonda this neyi gösteriyor? Biz bilmiyoruz. JavaScript de bilmiyor. Ve fonksiyonun kendisi de bilmiyor. Yani, fonksiyon oluşturulduğu anda this'in tam olarak neyi gösterdiği belirlenmemiştir. Ve bu, ancak fonksiyon çağrıldığında belirlenecektir.

Diyelim ki bir inputumuz var:

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

Bu inputa, func fonksiyonumuzu, input odağını kaybettiğinde tetiklenecek şekilde bağlayalım. Artık fonksiyon çalıştığı anda this inputumuzu gösterecek:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // odağı kaybedince 'text' yazacak
}

Ama birden fazla inputumuz da olabilir:

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

Ve bu inputların her birine func fonksiyonumuzu bağlayabiliriz. Bu durumda, fonksiyon çağrıldığında, ilk eleman için this onu, ikinci eleman için ise onu gösterecektir.

Pratikte bu, fonksiyon içindeki this'in odak kaybının hangi inputta gerçekleştiğine bağlı olduğu anlamına gelir:

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

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

function func() {
	console.log(this.value); // 'text1' veya 'text2' yazacak
}

Aslında, this'in bu özelliği çok kullanışlıdır - sadece bir fonksiyon oluştururuz ve onu istediğimiz sayıda inputa bağlarız. Eğer this olayın gerçekleştiği elemanı göstermeseydi, bu mümkün olmazdı - her input için aynı koda sahip kendi fonksiyonumuzu oluşturmak zorunda kalırdık!