Yükleniyor...

this anahtar sözcüğü

Aynı etiket işlevi bir kez kupanın adını söyleyebilir, sonra nesneyi kaçırabilir, ardından fincanın adını gösterebilir. Küme parantezleri yerinde kaldı. Değişen çağrıdır. JavaScript this değerini çağrı anında seçer, işlevi yazarken değil.

Düz yöntem çağrısından sonra

Yöntemler sayfası işlevi nesnenin üzerine koydu ve product.tag() ile çalıştırdı. O biçimde this, noktanın önündeki nesneydi. Sayfa orada durdu. Burada işlev durur, çağrı değişir: nesneden ayrılır, call ile hedeflenir, bind ile kilitlenir ya da ok olarak yazılır.

Çağrının this değerini belirlediği beş biçim

📊 Yöntem, çıplak, call, bind, ok

Biçim Örnek this nereye oturur
yöntem product.tag() noktanın önündeki nesne
çıplak let show = product.tag; show() o nesne değil (katı kipte undefined)
call product.tag.call(cup) call içine verdiğiniz nesne, yalnızca bu çalıştırma için
bind product.tag.bind(product) sonraki çağrılarda o nesneye kilitli
ok başka bir işlevin içinde () => this.name dış işlevin this değeri, noktanın önündeki nesne değil

this okumadan önce çağrının adını koyun. İşlevi nesnenin üzerine bırakmak this değerini dondurmaz. Kararı çağrı verir. bind sonraki bir çağrı için kararı önceden verir. Ok, çağrıyı yok sayar ve kendisini saran işleve bakar.

Yöntem çağrısı — this noktanın önündeki nesnedir

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());

Nokta hâlâ nesnenin adını söyler

product.tag() işlev tag değerini çalıştırır ve this değerini product üzerine koyar. Konsol Mug yazar. Bu, yöntemler sayfasındaki kuraldır; burada taban çizgisi olarak durur. Sonraki dört çağrı bu çizgiden bilerek ayrılır.

Çıplak çağrı — nesne artık yanında değil

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());

İşlevi nesneden kaldırınca kupa noktayla birlikte gider

show ile product.tag aynı işlevdir. show() çağrısında noktanın önünde nesne yoktur; katı kipte this bu yüzden undefined olur. Nöbetçi missing döndürür. Nöbetçiyi kaldırırsanız this.name hata fırlatır. Bu sayfa sonucu öngörülebilir tutmak için katı kipte kalır. Gevşek bir betik çıplak çağrıyı genel nesneye yöneltebilir.

call ile this değerini başka nesneye çevirin

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));

call işlevi tek bir nesne için ödünç verir

product.tag.call(cup) hâlâ kupanın tag işlevini çalıştırır, ama bu turda this değeri cup olur. Konsol Cup yazar. product.name değeri Mug kalır. call işlevi cup üzerine yapıştırmaz. apply, fazladan argümanlar bir dizideyken aynı işi görür — bu etiketin onlara ihtiyacı yok.

Nesneyi bind ile kilitleyin

javascript 
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());

bind nesneyi sonraki çıplak çağrı için saklar

bind yeni bir işlev döndürür. İçinde this, show() noktasız olsa bile product kalır. Konsol Mug yazar. Özgün tag değişmez. Bir düğme, zamanlayıcı ya da başka bir işlev yöntemi önde nesne olmadan çağıracaksa bind kullanın.

Ok, this değerini dış işlevden alır

javascript 
"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());

Ok, this değerini noktadan almaz

product.tag() yöntem çağrısı gibi durur, ama tag bir oktur. Okun kendi this değeri yoktur. this değerini make içinden alır; make ise shelf.make() olarak çalıştığı için this değeri shelf olur. Konsol Mug değil Shelf yazar. product üzerinde sıradan bir yöntem olsaydı Mug yazardı. Oklar daha önceki bir sayfada geldi; bu sayfa yalnızca this üzerindeki etkilerini gösterir.

Çağrıyı işe uydurun

Nesne noktanın önünde mi? this değerini o nesne olarak okuyun. İşlevi kaldırdınız ve kilitlemediniz mi? Nesneyi beklemeyin. Başka bir nesne, tek tur mu? call kullanın. Noktasız sonraki çağrı yine kupayı görmeli mi? Önce bind. Ok mu yazdınız? Dışarı, onu saran işleve bakın; noktanın önündeki nesneye değil. Kurucu ve sınıf da this ayarlar; onlar daha sonraki bir sayfaya kalır. Sıradaki JSON: veriyi anlatan metin, this için yeni bir kural değil.

Kilitli etiketi sayfaya koyun

tag değerini bind ile kupaya kilitleyin, sonra yeni işlevi noktasız çağırın. Sonucu bir paragrafa yazın.

Sayfa demosu — kilitli etiket

html 
<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>

Paragraf Mug gösterir. show() çağrısında noktanın önünde nesne yoktur; satır yine de kupanın adını söyler çünkü bind this değerini kilitlemiştir. Yalnızca product.name değerini değiştirin, sayfayı yenileyin, paragraf onu izler. Sonraki ders: JavaScript’te JSON — veriyi anlatan metin, this için yeni bir kural değil.

Alıştırma adımları

  1. product.tag() çağırın ve Mug okuyun.
  2. İşlevi show içine koyun, katı kipte show() çağırın ve missing okuyun.
  3. product.tag.call(cup) çağırın ve Cup okuyun.
  4. tag değerini product üzerine kilitleyin, yeni işlevi noktasız çağırın ve Mug okuyun.
  5. shelf.make() çalıştırın ve Mug değil Shelf okuyun.
  6. HTML demosunda yalnızca product.name değerini değiştirin, yenileyin ve paragrafı okuyun.

Sık kaymalar

  • İşlev nesnenin üzerinde duruyor diye this donmuş sanmak
  • Katı kipte show() çağırıp hâlâ Mug beklemek
  • call işlevinin tag değerini cup üzerine kopyaladığını düşünmek
  • bind özgün tag değerini yeniden yazar sanmak; yeni işlev döndürür
  • Yöntemin yerine ok yazıp noktanın önündeki nesneyi beklemek
  • Sonraki sayfayı başka bir this kuralı sanmak — JSON veri için bir metin biçimidir

Özet

  • this değerini çağrı seçer, küme parantezleri değil
  • object.method() this değerini noktanın önündeki nesneye koyar
  • Katı kipte çıplak çağrı this değerini o nesneye yöneltmez
  • call, this değerini verdiğiniz nesneye koyar, yalnızca o tur için
  • bind, this değeri kilitli kalan bir işlev döndürür
  • Ok, this değerini saran işlevden alır
  • Kilitli bir çağrı sayfada bir satırı doldurabilir
  • Sıradaki: JSON, veriyi anlatan metin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 36 / 37
Javascript Ders