JavaScript’te this kavramı

JavaScript’te this kavramı JavaScript’e yeni başlayanlar için oldukça sinir bozucu olabilir. Aslında çok basit bir tanımı mevcut.

JavaScript’te this keyword’ü kullanıldığı object’yi bizlere sunar.

this kelimesini konsolu açıp yazdığınız anda size global olan window object’ini verir çünkü window o esnada this’in içerisinde bulunduğu bir object’tir.

this

// output
// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

this kelimesini bir fonksiyonun içerisinde tanımladığınızda ise ortada this’in bulunduğu herhangi bir object olmadığı için yine en yakınındaki dala sarılan this kelimesi global olan window object’ini referans gösterir. Örneğin bir fonksiyon tanımlayalım hatta onun içerisinde bir fonksiyon daha tanımlayalım yetmesin bir de parametre alsın bu fonksiyon ve her bir property’yi yazdıralım bakalım ekrana neler olacak.

function FullName () {
    console.log(this)
    function FirstName (parameter) {
        console.log(parameter);
        console.log(this);}
    FirstName('Erel')
}
FullName()

// output
// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
// Erel
// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

Oha nasıl lan! demeyin efenim çok basit sebebi: kapsüle edildiği object’i bizlere sunuyor işte. Fonksiyon da bir object olmadığı içüüün gidiyor hunharca window object’ini bulup diyor ki burası bizim obamızdır hünkarım.

Peki ya event içinde this ? (ivınt diye okuyanlar artistik patinajda bronz madalya ile ülkemize dönecekler) Efendiler! event’ler bir DOM elementine attach edilebilen yapılan olup; dom elementleri aslında özünde bir object’tir. Nasıl Yani? Document OBJECT Model. Adından da anlaşılacağı gibi eşşşşek kadar Object’tir.

Yani bir event içerisinde this kelimesini yazarsanız o this ilgili elementi referans gösterir. Hemen bir butona onClick event’i ekleyelim ve this ile sonucu konsola yazdıralım

<button onClick="console.log(this)">
    Tırmala Beni! Kaşı Beni!
</button>

// output
// <button onClick="console.log(this)">Tırmala Beni! Kaşı Beni!</button>

Gördünüz mü? İşte this kelimesinin kullanımı bu kadar. Olay çıkarmadan dağılalım arkadaşlar.