JavaScript this Keyword Nedir?

this JavaScript'in en cok yanlis anlasilan ozelligi. Mulakatlarda "this nedir?" diye soruldugunda cogu aday ya yanlis cevap verir ya da "bilmiyorum" der. Ama aslinda basit bir kural var: this, fonksiyonun "kim tarafindan cagirildigini" gosterir. Tanimlandigi anda degil, calistirildigi anda belirlenir.

Mulakatlarda this denince akla 4-5 farkli soru gelir: global this nedir, method icinde this, arrow function farki, call/apply/bind, class constructor, setTimeout'ta this neden kaybolur. Bu yazida hepsini temelden, orneklerle, benzetmelerle anlatiyoruz. Once yalin ifadeyle: this bir "kendini tanitma" mekanizmasi — "ben bu objenin parcasiyim" diyen bir isaret.

this'i bir restoranda garson gibi dusun. Garsonun "bu siparis kime?" sorusuna verdigi cevap, o an kim icin calistigina baglidir. Ayni insan farkli restoranlarda farkli "kime hizmet ediyor?" cevabi verir.

JavaScript'te this de ayni sekilde: bir fonksiyonun this'i, o an kim tarafindan cagirildigina baglidir, nerede tanimlandigina degil. Bir fonksiyonu farkli objelerden cagirirsan, this her seferinde farkli olur.

• Method icinde this = obje (garson kendi lokantasinda calisiyor)
• Global fonksiyonda this = window (garson sahipsiz, genel alanda calisiyor)
• new ile cagirildiginda this = yeni olusan obje (garson yeni bir musteriye hizmet vermeye basliyor)
• call/apply/bind = garsonu zorla baskasinin lokantasinda calistirmak

JavaScript'te this'in davranisini belirleyen dort temel kural var. Hangi kural devrede, o an nasil cagirildigina bagli.

1) Global baglam

Bir fonksiyon "duzgun" sekilde cagirildiginda (obje uzerinden degil), this window (tarayici) veya global (Node.js) olur. Strict modeda ise undefined olur.

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

kim(); // window (tarayici)
// veya undefined (strict mode)

"use strict";
function kim2() {
  console.log(this);
}
kim2(); // undefined

2) Method baglami (obje uzerinden)

Bir fonksiyon bir objenin methodu olarak cagirildiginda, this = o obje olur. En sik karsilasilan ve en sezgisel durum.

const user = {
  isim: "Ali",
  yas: 25,
  tanit() {
    return `Ben ${this.isim}, ${this.yas} yasindayim.`;
  },
};

user.tanit(); // "Ben Ali, 25 yasindayim."
// this = user objesi

3) Constructor baglami (new ile)

Bir fonksiyon new ile cagirildiginda JavaScript 4 sey yapar: yeni bos obje olusturur, fonksiyonu o objenin this'iyle calistirir, objeyi otomatik doner, eger acikca donuyorsan onu doner.

function Ogrenci(isim, sinif) {
  this.isim = isim;
  this.sinif = sinif;
}

const ali = new Ogrenci("Ali", "10-A");
console.log(ali.isim); // "Ali"
console.log(ali.sinif); // "10-A"
// this = ali (yeni olusan obje)

4) call/apply/bind ile manuel baglam

this'i manuel olarak degistirmek icin uc fonksiyon var. Bunlar Seviye 4'te detayli anlatilacak.

ES6 ile gelen arrow function, dort baglam kuralinin disindadir. Kendi this'ini olusturmaz, tanimlandigi yerdeki this'i miras alir (lexical this). Bu cok onemli ve mulakatlarda sik sorulan bir fark.

Normal function: this kaybolur

Asagidaki ornekte, setTimeout callback'i normal function, this'i kaybeder ve window'a baglanir.

const user = {
  isim: "Ali",
  selamVer() {
    setTimeout(function() {
      console.log("Merhaba " + this.isim); // ❌ this = window
    }, 100);
  },
};

user.selamVer(); // "Merhaba undefined"

Arrow function: this korunur

Ayni ornek arrow function ile yazildiginda this, methodun this'ini (yani user) miras alir.

const user = {
  isim: "Ali",
  selamVer() {
    setTimeout(() => {
      console.log("Merhaba " + this.isim); // ✅ this = user
    }, 100);
  },
};

user.selamVer(); // "Merhaba Ali"

Bazen bir fonksiyonun this'ini "zorla" degistirmek istersin. Uc yardimci metod var: call, apply, bind. Ucusunde benzer ama kullanim farkli.

function tanit(sehir) {
  return `${this.isim}, ${sehir} yasamaktadir.`;
}

const user = { isim: "Ali" };

tanit.call(user, "Istanbul");
// "Ali, Istanbul yasamaktadir."
// this = user (call ile baglandi)

const sayilar = [5, 2, 9, 1, 7];

// Math.max normalde dizi almaz
Math.max.apply(null, sayilar); // 9 (dizi olarak gonderildi)
// ES6+: Math.max(...sayilar)

class Tiklayici {
  constructor() {
    this.sayac = 0;
    // bind: this'i kalici olarak bagla
    this.arttir = this.arttir.bind(this);
  }

  arttir() {
    this.sayac++;
    console.log(this.sayac);
  }
}

const t = new Tiklayici();
document.querySelector("button").addEventListener("click", t.arttir);
// Tiklama: 1, 2, 3...
// bind sayesinde this kaybolmaz

Karsilastirma tablosu

ES6 class'lari aslinda constructor function'larin uzerine kurulu sentaks sekeri. Methodlardaki this normal function gibidir: this = instance, AMA methodu baska yere atarsan this'i kaybedersin.

Tipik hata: event handler this'i

Asagidaki ornek klasik mulakat tuzagi: class methodu event listener olarak verilince this'i kaybeder.

class Saya {
  constructor() {
    this.sayac = 0;
  }
  arttir() {
    this.sayac++;
    console.log("Sayac:", this.sayac);
  }
}

const s = new Saya();
document.querySelector("button").addEventListener("click", s.arttir);
// ❌ Sayac: NaN (this artik saya degil, button elemani)

3 cozum

constructor() {
  this.arttir = this.arttir.bind(this);
}

class Saya {
  sayac = 0;
  arttir = () => {
    this.sayac++;
    console.log("Sayac:", this.sayac);
  };
}
// this lexically bagli, hic kaybolmaz

btn.addEventListener("click", () => s.arttir());
// arrow function this'i s'den alir