JavaScript'te this'in Avantajı

Daha önce söylenenlerden, this'in özel avantajı henüz açık değil. Sonuçta olay işleyici fonksiyonun içinde elemanımıza zaten erişilebilir olacak - çünkü elem değişkeni func fonksiyonumuz için genel (global) bir değişken olacak:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// burada elemanımızı tutan elem değişkenine erişilebilir
}

Ve, this'in içeriği ile elem değişkeninin içeriğinin bizim durumumuzda eşit olduğunu anlamak zor değil:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // true yazdıracak
}

Peki this'in özel avantajı nedir? Bu avantaj, birden fazla elemanımız olduğunda ve her birine aynı fonksiyonun bağlandığı durumlarda ortaya çıkar.

Bir örnek üzerinden inceleyelim. Elimizde 3 buton olsun:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Bunlara referansları değişkenlere alalım:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Bu butonlara aynı fonksiyonu bağlayalım:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Fonksiyonun içinde ise this.value'yu yazdıralım:

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

Sonuçta, üç butonumuz var. Her bir butona tıklamak, func fonksiyonunun çağrılmasına neden olacak. Bu sırada, her tıklamada this, olayın gerçekleştiği butona bir referans içerecek.

Yani her tıklama, konsola, tıklamanın gerçekleştiği butonun value değerini yazdıracak, ancak bunu yapan aynı func fonksiyonu olacak! İşte this kullanmanın avantajı burada.

İçinde çeşitli metinler olan 5 paragraf verilmiş. Herhangi bir paragrafa tıklandığında, metninin sonuna bir ünlem işareti ekleyin.

İçinde bazı sayılar yazılı olan 3 input verilmiş. Herhangi bir input'ta odak kaybedildiğinde, içindeki sayının karesini alın.