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:

javascriptlet 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:

javascriptlet 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:

html<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:

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

Bu butonlara aynı fonksiyonu bağlayalım:

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

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

javascriptfunction 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.