this bağlamı
Arrow fonksiyonlarda this'in sözcüksel olarak bağlandığını ve ne anlama geldiğini öğrenirsin.
Lexical this
Arrow fonksiyonlarda this, fonksiyonun tanımlandığı kapsama bağlıdır. Buna lexical this denir. Klasik fonksiyonlar this'i çağırana göre dinamik bağlarken, arrow dış kapsamı miras alır.
const obj = {
name: "Ayşe",
show() {
const inner = () => console.log(this.name);
inner();
}
};
obj.show(); // "Ayşe"Arrow, show metodunun this'ini korur; böylece this.name doğru çalışır.
Callback'de this kaybı
Klasik fonksiyon callback olarak geçildiğinde this bağlamını kaybeder; bu sıkça karşılaşılan bir hatadır. Arrow ise this'i korur.
function Timer() {
this.count = 0;
setInterval(function() {
this.count++; // hatalı: this window
}, 1000);
}Aynı kodu arrow ile yazarsan this doğru kalır:
setInterval(() => {
this.count++; // doğru: this Timer
}, 1000);Uygulama this'i koruyan arrow callback
counter nesnesinin start metodu setInterval çağırıyor. Callback'i arrow yap ve this.count'u artır. Klasik function kullanma.
Örnek çözümü göster
const counter = {
count: 0,
start() {
setInterval(() => {
this.count++;
}, 1000);
}
};Kendini test et
-
Bir arrow içinde this neyi gösterir?
- Fonksiyonu çağıran nesneyi
- Arrow'un tanımlandığı dış kapsamı
- Yeni bir boş nesneyi
- window nesnesini her zaman
Cevabı göster
Arrow'un tanımlandığı dış kapsamı — Doğru. Arrow this'i lexikal olarak dış kapsamdan alır.
-
this'i koruyacak ok
setInterval(() ____ { this.count++; }, 1000);Cevabı göster
setInterval(() => { this.count++; }, 1000); -
this davranışını eşleştir
- arrow fonksiyon
- this lexikal
- klasik fonksiyon
- this dinamik
- callback hatası
- this kaybolur
-
Çağrı ne döndürür?
const obj = { v: 10, show() { const f = () => this.v; return f(); } }; obj.show();- undefined
- 0
- 10
- hata fırlatır
Cevabı göster
10 — Doğru. <code>show</code> metodu this'i obj'ye bağlar; arrow da bunu miras alır, <code>this.v</code> = 10.