Javascript — This Kullanımı

Bu yazıda, Javascript öğrenirken kafa karışıklığına yol açan konulardan biri olan this anahtar kelimesinden bahsedeceğim. Kafa karışıklığı yaratmasının sebebi , nasıl ve nerede çağırılmış olmasına göre davranışının değişmesinden kaynaklanıyor.

En yalın haliyle ‘this’, mevcut kod bloğunu çalıştıran objeye referans eder. Diğer bir dil ile bize mekanın sahibi olan objeyi işaret eder. 😏️

Öncelikle küçük ama bu konuyu anlamamızda büyük bir rol oynayacak bir hatırlatma ile başlamak istiyorum.

Bildiğiniz gibi, bir objeye ait olan fonksiyonlara metot diyoruz. Mevcut fonksiyonumuz eğer bir metot ise this, metodun ait olduğu objeyi işaret eder. Bu bilgiyi cebimize koyup örnek üzerinden devam edelim.

Global Execution Context

Herhangi bir fonksiyonun dışarısında this, global objeyi işaret eder. Bu global obje, browser’da window objesidir, Node JS’de ise global objesidir.

Function Execution Context

Eğer this bir fonksiyonun içerisinde ise, değeri, nasıl çağırıldığına göre değişecektir. Bu fonksiyonu alalım ve bir objenin property’si yapalım.

testThis artık bir metoddur ve jeff objesini verir. Jeff’in yüzünü, her bir evcil hayvanın yanında yazdırmayı deneyelim.

Şeklinde yazdığımızda, console.log içerisindeki this, global objeye işaret ettiği için face property’si undefined döner. Peki jeff objesinin içerisinde kulladığımız console.log’un içerisindeki this neden içerisinde bulunduğu objeye değil de global objeye işaret ediyor?

Görüldüğü üzere forEach metodunun içerisinde callback fonksiyonu çağırdık. Ve bu fonksiyon, jeff objesinin metodu değil. Yazının başında belirttiğim üzere, bu callback fonksiyonu global obje içerisinde çalıştırıldığı için global objeyi işaret eder. İstediğimiz şeyi gerçekleştirmek için şöyle bir yol izleyebiliriz.

forEach metoduna ikinci bir argüman olarak bir obje verebiliyoruz. İkinci argüman verdiğimiz bu noktada, testThis metodunun içerisinde olduğumuz için burada argüman olarak verdiğimiz this, artık jeff objesini işaret ediyor olacaktır. Böylece sorunu çözdük ve Jeff’i evcil hayvanlarına kavuşturduk.

Class Execution Context

Pratikte, genellikle aynı türden birçok nesne yaratmamız gerekir. Constructor, aynı property ve metotlara sahip birden çok benzer obje oluşturmak istediğinizde kullanışlıdır.

Execution Context’imiz class olduğunda this kullanımı aşağıda gördüğün gibidir.

Class’ın bir örneğini new anahtar sözcüğü ile oluşturduğumuzda, burada kullandığımızthis yeni oluşturulan örneği referans eder. Böylece kolaylıkla aynı türden objeleri kendimizi tekrarlamadan oluşturabiliriz.

Daha fazlasını ögrenmek için Frontend Web Development Patikası içersinde yer alan JS eğitimine göz atabilirsin!