Arrow ile this
- TypeScript kursu
- Başlangıç
- Ders 48/89
- 4 dk
Ok fonksiyonunda this bağlamını öğrenirsin.
Arrow ile this
Ok fonksiyonlarının kendi this'i yoktur. this, çevreleyen kapsamdan (sözcüksel bağlama) alınır. Düz fonksiyonlarda this çağrı yerine göre belirlenir.
const nesne = {
ad: "Ali",
goster: function(): string {
const ok = (): string => this.ad; // this = nesne
return ok();
}
};
nesne.goster(); // "Ali"Ok fonksiyonu, this'i içinde bulunduğu kapsamdan miras alır.
Callback'lerde ok fonksiyonu
Bir metodun içindeki iç içe callback'lerde düz fonksiyon kullanırsan this kaybolur. Ok fonksiyonu ise metodun this'ini korur, bu yüzden callback'lerde ok fonksiyonu tercih edilir.
const nesne = {
ad: "Ali",
goster: function(): void {
[1].forEach(() => console.log(this.ad));
}
};Ok fonksiyonu callback içinde this'i kaybetmez.
Uygulama Ok fonksiyonu ile this kullan
nesne adında bir nesne tanımla; ad özelliği "Ali" olsun. goster metodu düz fonksiyon olsun ve içinde bir ok fonksiyonu this.ad döndürsün. nesne.goster() çağrısının sonucunu console.log ile yazdır.
Başlangıç kodu
// nesne adında bir nesne tanımla
// ad özelliği "Ali" olsun
// goster metodu düz fonksiyon olsun
// goster içinde ok fonksiyonu this.ad döndürsün
// nesne.goster() sonucunu yazdırÖrnek çözüm
const nesne = {
ad: "Ali",
goster: function(): string {
const ok = (): string => this.ad;
return ok();
}
};
console.log(nesne.goster());Beklenen çıktı
Ali
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir ok fonksiyonunda <code>this</code> nasıl belirlenir?
- Çağrı yerine göre belirlenir
- Çevreleyen kapsamdan alınır Doğru cevap
- Her zaman global nesne olur
- Her zaman undefined olur
Açıklama: Ok fonksiyonu kendi <code>this</code>'ini yaratmaz; çevreleyen kapsamın <code>this</code>'ini sözcüksel olarak alır. Düz fonksiyonlarda ise <code>this</code> çağrı yerine göre değişir.
2 Ok fonksiyonunda this özelliği
const nesne = {
ad: "Ali",
goster: function(): string {
const ok = (): string => this.____;
return ok();
}
};const nesne = {
ad: "Ali",
goster: function(): string {
const ok = (): string => this.ad;
return ok();
}
};Açıklama: Nesnenin <code>ad</code> özelliği vardır; ok fonksiyonu sözcüksel <code>this</code> ile <code>this.ad</code> döndürür. <code>name</code>, <code>yas</code> ve <code>id</code> nesnede bulunmaz.
3 this bağlama kavramları
| Kavram | Anlamı |
|---|---|
Arrow function this |
Sözcüksel kapsamdan alınır |
Regular function this |
Çağrı yerine göre belirlenir |
Lexical scope |
Çevreleyen kapsamın this'i |
this binding |
Ok fonksiyonunda sözcüksel |