- Konu sahibi
- #1
JavaScript'te
Normal bir fonksiyon nesne metodu olarak çağrıldığında
Burada
Bir metodu
Yaklaşık bir saniyelik gecikme sonrasında, olay döngüsü uygun olduğunda
Bu iki timer örneği alternatif kullanımlardır; ikisini birden çalıştırırsanız aynı sayaç iki kez artırılır. Kesin çalışma zamanı yalnız verilen gecikme değerinden belirlenmez.
Bu nedenle karar verirken aşağıdaki ayrım işinizi kolaylaştırır:
Burada
bind(), bir fonksiyon için kullanılacak this değerini önceden sabitleyen ve yeni bir fonksiyon döndüren metottur. Ayrıca fonksiyonun ilk argümanlarını da önceden verebilirsiniz. Özellikle bir nesnenin metodunu callback olarak aktarırken this bağlamının kaybolmasını önlemek için kullanılır.Temel kullanım
Normal bir fonksiyon nesne metodu olarak çağrıldığında
this, çağrıyı yapan nesneyi gösterir. Ancak metot başka bir değişkene atanıp tek başına çağrılırsa bu bağlantı kaybolabilir.
JavaScript:
"use strict";
const kullanici = {
ad: "Ayşe",
selamla() {
return `Merhaba ${this.ad}`;
}
};
const bagimsizFonksiyon = kullanici.selamla;
try {
console.log(bagimsizFonksiyon());
} catch (hata) {
console.log(hata.name); // TypeError
}
const bagliFonksiyon = kullanici.selamla.bind(kullanici);
console.log(bagliFonksiyon());
// Merhaba AyşeBurada
bind(kullanici), selamla fonksiyonunun this değerini kullanici olarak sabitler. bind() fonksiyonu hemen çalıştırmaz; çağrıldığında çalışacak yeni bir fonksiyon üretir.Callback içinde neden kullanılır?
Bir metodu
setTimeout, olay dinleyicisi veya başka bir callback mekanizmasına doğrudan verdiğinizde, fonksiyonun hangi nesneye ait olduğu otomatik olarak korunmayabilir.
Kod:
const sayaç = {
deger: 0,
artır() {
this.deger++;
console.log(this.deger);
}
};
setTimeout(sayaç.artır.bind(sayaç), 1000);Yaklaşık bir saniyelik gecikme sonrasında, olay döngüsü uygun olduğunda
artır() çalışır ve this değeri sayaç olur. Aynı işlem, fonksiyonu sarmalayan bir ok fonksiyonuyla da yapılabilir:
Kod:
setTimeout(() => sayaç.artır(), 1000);Bu iki timer örneği alternatif kullanımlardır; ikisini birden çalıştırırsanız aynı sayaç iki kez artırılır. Kesin çalışma zamanı yalnız verilen gecikme değerinden belirlenmez.
Bu nedenle karar verirken aşağıdaki ayrım işinizi kolaylaştırır:
| İhtiyaç | Uygun yöntem | Sonuç |
|---|---|---|
| Fonksiyonu hemen, belirli this ile çalıştırmak | call() | Fonksiyon hemen çağrılır |
| Fonksiyonu hemen, dizi argümanlarıyla çalıştırmak | apply() | Fonksiyon hemen çağrılır |
| Daha sonra çağrılacak yeni fonksiyon üretmek | bind() | Bağlanmış fonksiyon döner |
Argümanları önceden verme
bind() yalnızca this değerini sabitlemez; fonksiyonun başlangıç argümanlarını da saklayabilir. Bu kullanım kısmi uygulama olarak düşünülebilir.
Kod:
function toplam(a, b, c) {
return this.temel + a + b + c;
}
const toplamHesapla = toplam.bind({ temel: 10 }, 1, 2);
console.log(toplamHesapla(3));
// 16Burada
this.temel değeri 10, a değeri 1 ve b değeri 2 olarak bağlanmıştır. Sonradan verilen 3 ise c parametresine gider.Uygularken dikkat edilmesi gerekenler
bind()çağrısının sonucunu bir değişkene atayın veya doğrudan callback olarak verin.fonksiyon.bind(nesne)tek başına yazmak fonksiyonu çalıştırmaz.- Her
bind()çağrısı yeni bir fonksiyon üretir. Olay dinleyicisi ekleyip kaldırırken aynı referansı kullanmak için bağlanmış fonksiyonu saklayın. - Ok fonksiyonlarının kendilerine ait
thisdeğeri yoktur. Bu nedenle bir ok fonksiyonunabind()uygulamak, onunthisdavranışını normal fonksiyonlardaki gibi değiştirmez. - Bağlanmış bir fonksiyonu tekrar
bind()ederseniz normal çağrıda ilk bağlananthisdeğeri korunur; sonraki bağlama daha çok ek argümanlar için etkili olur.
metot.bind(nesne) ifadesini tekrar yazmayın. İlk çağrıdan dönen referansı saklayıp hem addEventListener hem removeEventListener için aynı fonksiyonu ve eşleşen capture ayarını kullanın. Yoksa yeni üretilen fonksiyon daha önce kaydedilen dinleyiciyle eşleşmez.