JavaScript'te this Anahtar Kelimesi

eminbasbayan

4 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

JavaScript’te program yazarken sıklıkla karşılaşılan ve çoğu zaman geliştiricilerin kafasını karıştıran konulardan biri this anahtar kelimesidir. İlk bakışta masum gibi görünen bu kelime, bağlamına (context) göre değişkenlik gösterdiği için tam olarak neye işaret ettiğini anlamak zaman alabilir. Bu makalede, this kelimesini sade ve anlaşılır şekilde, özellikle yeni başlayan bir lise öğrencisinin anlayabileceği düzeyde açıklayacağız. Konuyu daha iyi kavrayabilmek için farklı örnekler kullanacağız ve yalnızca this ile ilgili temel kavramlara odaklanacağız.

`this` Nedir ve Neyi Gösterir?

JavaScript’te this, içinde bulunduğu bağlama göre bir nesneyi temsil eder. Genellikle bir nesne (object) içindeki metotlarda (function) kullanılır ve o metodu çağıran nesneyi gösterir.

Basitçe söylemek gerekirse:

this, “Beni çalıştıran nesne hangisi?” sorusunun cevabıdır.

Bir Nesne İçinde `this` Nasıl Çalışır?

Aşağıda bir örnek nesne tanımlayalım:

const student = {
  name: "Mert",
  grade: 11,
  introduce() {
    console.log(`${this.name} isimli öğrenci ${this.grade}. sınıfta`);
  }
};

Bu kodda introduce isimli bir metot var. Bu metot çalıştığında this.name ve this.grade değerlerine ulaşır. Şimdi bu metodu çağıralım:

student.introduce();

Çıktı:

Mert isimli öğrenci 11. sınıfta

Burada this, student nesnesini temsil eder çünkü metot bu nesne üzerinden (student.) çağrıldı.

Peki Neden `student.name` Yerine `this.name` Kullanıyoruz? (Avantajı Ne?)

Bu çok önemli bir sorudur ve this anahtar kelimesinin gücünü ortaya koyar. this kullanmak, metotları yeniden kullanılabilir ve esnek hale getirir. Metot, hangi nesneye ait olduğunu bilmek zorunda kalmaz.

Farz edelim ki okulda Mert dışında Ayşe adında başka bir öğrenci daha var.

Yöntem 1: Kötü Yaklaşım (Doğrudan Nesne Adını Kullanmak)

Eğer metodu this yerine doğrudan student adıyla yazsaydık, kod şöyle görünürdü:

const student = {
  name: "Mert",
  grade: 11,
  introduce() {
    // DİKKAT: Metot, körü körüne 'student' nesnesine bağlı.
    console.log(`${student.name} isimli öğrenci ${student.grade}. sınıfta.`);
  }
};

const student2 = {
  name: "Ayşe",
  grade: 10,
  // Mert'in tanışma metodunu Ayşe için "ödünç" alıyoruz.
  introduce: student.introduce 
};

student.introduce();  // Çıktı: Mert isimli öğrenci 11. sınıfta. (Beklendiği gibi)
student2.introduce(); // Çıktı: Mert isimli öğrenci 11. sınıfta. (YANLIŞ SONUÇ!)

Gördüğünüz gibi, student2.introduce() çağırmamıza rağmen metot hala Mert'in bilgilerini yazdırdı. Çünkü metodun içi, esnek olmayan bir şekilde student nesnesine sabitlenmişti.

Yöntem 2: Doğru ve Esnek Yaklaşım (`this` Kullanmak)

Şimdi aynı senaryoyu this ile doğru bir şekilde yapalım:

const student = {
  name: "Mert",
  grade: 11,
  introduce() {
    // Harika! 'this', "beni kim çağırdıysa o" anlamına geliyor.
    console.log(`${this.name} isimli öğrenci ${this.grade}. sınıfta.`);
  }
};

const student2 = {
  name: "Ayşe",
  grade: 10,
  // Aynı esnek metodu Ayşe için de kullanıyoruz.
  introduce: student.introduce 
};

student.introduce();  // this = student olur. Çıktı: Mert isimli öğrenci 11. sınıfta.
student2.introduce(); // this = student2 olur. Çıktı: Ayşe isimli öğrenci 10. sınıfta.

this sayesinde introduce metodu bir şablon gibi davrandı. Kimin üzerinden çağrıldıysa onun kimliğine büründü ve doğru bilgileri yazdırdı.

Fonksiyonu Bir Değişkene Atarsak Ne Olur?

Şimdi yukarıdaki metodu bir değişkene atayalım:

const tanit = student.introduce;
tanit();

Beklediğimiz sonucu alır mıyız? Hayır.

Çıktı şu şekilde olabilir:

undefined isimli öğrenci undefined. sınıfta

Neden böyle oldu?

Çünkü bu sefer introduce fonksiyonunu bir nesne üzerinden çağırmadık. tanit() çağrısı tek başına yapıldı. Artık JavaScript, this kelimesinin neyi göstermesi gerektiğini bilmiyor ve otomatik olarak en dıştaki nesneye, yani global objeye (tarayıcıda window) yönleniyor. Bu global objede name veya grade gibi değişkenler olmadığı için undefined alıyoruz.

Çağırma Şekli (Invocation Context) Neden Önemlidir?

JavaScript'te this, fonksiyonun tanımlandığı yere göre değil, nasıl çağrıldığına göre belirlenir. İşte bu yüzden student.introduce() ile çağırdığımızda this, student olur. Ama tanit() gibi tek başına çağırdığımızda artık bir çağıran nesne (context) kalmaz, dolayısıyla this, global objeyi temsil eder.

Global Alanda `this` Ne Anlama Gelir?

Tarayıcı ortamında en üst düzeydeki nesne window objesidir. Dışarıda, yani herhangi bir nesnenin içinde olmadan tanımlanan fonksiyonlar bu objeye ait sayılır.

Örnek:

console.log(this); // Tarayıcıda çalıştırıldığında 'window' nesnesini gösterir.

Herhangi bir nesne veya fonksiyonun dışında this kullandığınızda global nesneyi elde edersiniz.

Kısaca Özetleyelim:

this, bulunduğu bağlama göre değişen özel bir kelimedir ve "beni çağıran nesne" demektir.
Eğer bir fonksiyon bir nesne üzerinden (nesne.metot()) çağrılırsa, this o nesneyi gösterir.
Fonksiyon bir değişkene atanıp bağımsız olarak (metot()) çağrılırsa, this artık global objeyi (window) gösterir.
this kullanmanın en büyük avantajı, metotları yeniden kullanılabilir ve esnek yapmasıdır.

Öğrenciler İçin Tavsiye

this konusunu öğrenirken, örnekleri bol bol yazın ve konsola console.log(this) koyarak hangi değeri gösterdiğini test edin.
Kodun çıktısını ezberlemeyin, mantığını anlamaya çalışın.
Karışık gelen durumlarda kendinize şu soruyu sorun: "Bu fonksiyonu hangi nesne üzerinden çağırdım?" Eğer bir nesne yoksa, cevap global nesnedir.

this kelimesi JavaScript'in güçlü ama dikkatli kullanılmazsa karmaşa yaratabilen bir parçasıdır. Zamanla, daha fazla örnek görerek ve uygulayarak içselleştireceğiniz bu konu, kod yazarken size büyük esneklik sağlayacak. Unutmayın, bu kelime başlangıçta zor gibi görünse de, düzenli tekrar ve doğru örneklerle tamamen anlaşılır hale gelir.