🤯 this Nedir? Nereden Gelir, Nereye Gider?

JavaScript’in En Kafa Karıştıran Karakterine Derinlemesine Bir Yolculuk 😵‍💫

JavaScript öğrenirken herkesin başına gelen klasik sahne:

“Tamam, this’i anladım.”
(Bir event listener ekler)
“Hayır… anlamamışım.”

Çünkü this:

• Sabit değildir
• Global değildir (bazen öyle sanılır)
• Fonksiyonun içinde yazıldığı yere bakmaz
• Kime ait gibi çağrıldığına bakar

Kısaca:

this, JS’in ortama göre kimlik değiştiren karakteridir 🦎

🥇 EN ÖNEMLİ KURAL (Bunu Okumadan Devam Etme)

this, nerede yazıldığına göre değil,
NASIL çağrıldığına göre belirlenir.

Bu cümle:

• Bu yazının özeti
• this’in tüm gizemi
• %90 hatanın sebebi

Şimdi bunu parça parça, bol örnekle açalım 👇

🌍 1️⃣ Global Scope’ta this (Tarayıcı Versiyonu)

console.log(this);

📤 Çıktı (Browser):

window

🧠 Neden?

• Tarayıcıda global object = window
• Global scope’ta this → window

this.alert("Merhaba!");

Bu aslında şudur:

window.alert("Merhaba!");

📌 Pratik Bilgi:

• Global alanda yazılan her şey window’a eklenir
• O yüzden this === window olur

⚠️ Node.js notu:
Node’da global this = {} (boş obje). Ama frontend odaklı devam ediyoruz.

🧑‍💼 2️⃣ Normal Fonksiyonlarda this (İlk Tuzak ⚠️)

function showThis() {
  console.log(this);
}

showThis();

📤 Çıktı:

window

😵‍💫 “Ama fonksiyonun içindeyiz?”

Evet ama:

• Fonksiyon tek başına çağrıldı
• Bir objeye ait değil
• JS dedi ki: “Sahibi yok → global’e bağlayayım”

📌 Kural:

Normal bir fonksiyon bağımsız çağrılırsa,
this → global object

😬 Bir Tık Daha Kafa Karıştırıcı Örnek

const fn = function() {
  console.log(this);
};

fn();

Sonuç yine:

window

💡 Çünkü:

• Önemli olan nasıl tanımlandığı değil
• Nasıl çağrıldığı

🧑‍🤝‍🧑 3️⃣ Object İçinde Method Olarak this (Mantığın Oturduğu Yer)

const user = {
  name: "Cansu",
  age: 28,
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi();

📤 Çıktı:

Cansu

🧠 Ne oldu burada?

• sayHi bir method
• . (nokta) ile çağrıldı
• this → noktanın solundaki obje

Yani:

this === user

📌 Altın Kural #2:

object.method() şeklinde çağrılıyorsa,
this → o object

🎭 4️⃣ Aynı Fonksiyon, Farklı this (Kim Çağırırsa O)

function showName() {
  console.log(this.name);
}

const user1 = { name: "Ali", showName };
const user2 = { name: "Cansu", showName };

user1.showName(); // Ali
user2.showName(); // Cansu

🤯 Aynı fonksiyon, iki farklı sonuç!

Çünkü:

• Fonksiyon aynı
• Ama çağıran obje farklı

📌 Hayati Kural:

this, fonksiyonun kim olduğu ile değil,
kimin çağırdığı ile ilgilenir

🏹 5️⃣ Arrow Function’larda this (Burası Çok Önemli!)

Arrow function’lar:

• Kendi this’ini oluşturmaz
• this’i üst scope’tan alır

❌ Yanlış ve Çok Yapılan Kullanım

const user = {
  name: "Cansu",
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi();

📤 Çıktı:

undefined

😱 Neden?

Çünkü:

• Arrow function → this yok
• Üst scope → global
• window.name → tanımsız

📌 Kural:

Arrow function’ı object method’u olarak kullanma

✅ Arrow Function’ın Doğru Kullanımı

const user = {
  name: "Cansu",
  sayHi() {
    const arrow = () => {
      console.log(this.name);
    };
    arrow();
  }
};

user.sayHi();

🧠 Ne oldu?

• arrow, sayHi’ın this’ini miras aldı
• sayHi → user
• Sonuç → 🎯

📤 Çıktı:

Cansu

🧲 6️⃣ call, apply, bind – this’i Zorla Yönlendirme

🔹 call

function greet() {
  console.log(this.name);
}

const user = { name: "Cansu" };

greet.call(user);

📤 Çıktı:

Cansu

🧠 call:

• this’i sen belirlersin
• Fonksiyon hemen çalışır

🔹 apply (call’ın kuzeni)

greet.apply(user);

Fark:

• Parametreleri array olarak alır

🔹 bind (En Profesyonel Olan)

const boundGreet = greet.bind(user);

boundGreet();

🧠 bind:

• Yeni bir fonksiyon döner
• this artık sabitlenmiştir
• Event’lerde ve callback’lerde çok kullanılır

🖱️ 7️⃣ Event Listener + this (Gerçek Hayat!)

button.addEventListener("click", function () {
  console.log(this);
});

📤 Çıktı:

<button>...</button>

🧠 Çünkü:

• Normal function
• Event’i tetikleyen element → this

❌ Arrow function kullanırsan:

button.addEventListener("click", () => {
  console.log(this);
});

📤 Çıktı:

window

📌 Event listener’da:

this lazımsa → normal function
Lazım değilse → arrow

🚨 En Sık Yapılan Hatalar (Kırmızı Liste)

❌ Arrow function’ı method yapmak
❌ this’i değişken sanmak
❌ “Tanımlandığı yere göre çalışır” demek
❌ console.log(this) atmadan tahmin yürütmek 😄

🧩 Ultimate Cheat Sheet (Kaydetmelik)

• 🌍 Global scope → window
• 🧑‍💼 Normal function → çağrıldığı yere bak
• 🧑‍🤝‍🧑 Object method → obje
• 🏹 Arrow function → this yok, miras alır
• 🧲 call/apply/bind → this’i sen seçersin
• 🖱️ Event listener → normal function candır

🎯 Son Söz (Bunu Okuyorsan Artık Hazırsın)

this:

• Zor değil
• Sadece yanlış anlatılmış
• Mantığı kavrayınca puzzle gibi oturur 🧩

Unutma:

this, “ben kimim?” demez.
“Beni kim çağırdı?” diye sorar.