crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Global Kapsamda this
Eğer this herhangi bir fonksiyonun veya objenin içinde değilse, en tepedeki nesneyi işaret eder. Tarayıcı ortamında bu nesne window objesidir.
JavaScript:
console.log(this); // Çıktı: Window {...}2. Bir Obje Metodu İçinde this
Bir fonksiyon, bir objenin özelliği (metodu) olarak çağrıldığında, this o objenin kendisini işaret eder. Bu, nesne yönelimli programlamanın temelidir.
JavaScript:
const kullanici = {
ad: "Ahmet",
selamla: function() {
console.log(Merhaba, ben ${this.ad});
}
};
kullanici.selamla(); // Çıktı: Merhaba, ben Ahmet (this = kullanici)3. Fonksiyonlarda this (Katı Mod Farkı)
Sıradan bir fonksiyonun içinde this kullanımı, modunuza göre değişir:
[]Normal Mod: this yine global objeyi (window) işaret eder.
[]Strict Mode ("use strict"): Hataları önlemek için this değeri undefined olur.
JavaScript:
function test() {
console.log(this);
}
test(); // Normal modda Window, strict modda undefined döner.4. Arrow Functions (Ok Fonksiyonları) ve this
İşte en kritik nokta burası! Arrow function'ların kendilerine ait bir this bağlamı yoktur. Onlar, this değerini yazıldıkları yerin dışındaki (parent) kapsamdan miras alırlar.
JavaScript:
const grup = {
isim: "Frontend Ekibi",
uyeler: ["Can", "Ece"],
listele: function() {
// Normal fonksiyon: this = grup
this.uyeler.forEach((uye) => {
// Arrow function: this'i dışarıdaki listele metodundan alır
console.log(${this.isim}: ${uye});
});
}
};
grup.listele();5. Event Listeners (Olay Dinleyicileri) İçinde this
Bir olay dinleyicisi içinde (callback olarak arrow function kullanılmadığı sürece), this o olayı tetikleyen HTML elementini işaret eder.
JavaScript:
const buton = document.querySelector("#btn");
buton.addEventListener("click", function() {
console.log(this); // Çıktı: <button id="btn">...</button>
this.style.backgroundColor = "red";
});6. call(), apply() ve bind() ile this'i Yönetmek
Bazen this değerini zorla bir objeye bağlamak isteyebiliriz.
[]call / apply: Fonksiyonu hemen çalıştırır ve this değerini sizin verdiğiniz obje yapar.
[]bind: Fonksiyonu çalıştırmaz, sadece this değeri sizin verdiğiniz objeye sabitlenmiş yeni bir fonksiyon üretir.
JavaScript:
const araba = { marka: "Audi" };
function bilgi() { console.log(this.marka); }
const bagliBilgi = bilgi.bind(araba);
bagliBilgi(); // Çıktı: AudiSonuç Özeti
| Çağrılma Şekli | this Değeri |
|---|---|
| Global Kapsam | Window (veya Global) |
| Obje Metodu | Objenin Kendisi |
| Sıradan Fonksiyon | Window (Strict modda undefined) |
| Arrow Function | Dış (Parent) Kapsamdaki this |
| Olay (Event) | Olayı tetikleyen Element |