JavaScript'te this Nesnesi

Şimdi, olay işleyici fonksiyonunda erişilebilen özel this nesnesi üzerinde çalışacağız. Bu nesne, olayın meydana geldiği elementi gösterir.

this nesnesi, olayın meydana geldiği element ile olay sonucunda işlem yapılan element aynı olduğunda kullanışlıdır.

Örneğin, bir inputumuz varsa, ona bir odak kaybı (blur) işleyicisi bağlayabilir ve bu olay gerçekleştiğinde inputun metniyle bir şeyler yapabiliriz. Anlatılanı yapalım. Bir inputumuz olduğunu varsayalım:

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

Onu bir elem değişkenine atayalım:

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

Ona bir blur olayı işleyici fonksiyonu bağlayalım:

elem.addEventListener('blur', func);

Bu func fonksiyonunun içinde, inputumuzu gösteren this nesnesine erişilebilir olacak:

function func() {
	console.log(this); // elementimize bir referans içerir
}

Inputumuzun value özniteliğinin içeriğini yazdıralım:

function func() {
	console.log(this.value); // özniteliğin içeriğini yazdıralım
}

Şimdi, inputa bir metin yazalım:

function func() {
	this.value = '!!!';
}

Anonim fonksiyon da kullanılabilir:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Bir input verilsin. Bu input odaklandığında içine 1 sayısını yazın, odak kaybedildiğinde ise 2 sayısını yazın. Inputa işleyici fonksiyon içinden erişmek için this nesnesini kullanın.

Değeri 1 sayısı olan bir buton verilsin. Bu butona her tıklandığında değerinin bir artmasını sağlayın.