Yükleniyor...

Nesne yöntemleri

Kupanın adı ve fiyatı çoktan bir arada. Sayfanın hâlâ kupanın kendi işi eksik: etiketini kursun, sepet sayacını artırsın, alışveriş edene merhaba desin. Bu işlev nesnenin üzerinde durur. Adı yöntemdir.

Anahtarlardan ve listelerden sonra

Özellik dersinde bir alan eklendi, biri silindi, in ile soruldu, iç içe nesneye girildi ve Object.keys ile adlar alındı. Orada bir işlev çalışmadı. Burada bir özelliğin değeri kendisi bir işlevdir ve onu tutan nesneden çağrılır.

Yöntemle beş hareket

📊 Saklamak, çağırmak, kısa yazım, this, argüman

Hareket Sözdizimi Ne elde edilir
saklamak greet: function () { return "Hi"; } nesnenin üzerinde duran işlev
çağırmak product.greet() işlev çalışır, sonucu alırsınız
kısa yazım label() { return this.name; } aynı tür işlev, daha kısa yazılmış
this yöntemin içinde this.name noktadan önceki nesne
argüman cart.add(3) yalnızca bu çağrı için ek girdi

Önce hareketin adını koyun, sonra satırı yazın. Saklamak işlevi çalıştırmaz. Kısa yazım yeni bir değer türü değildir. this var olmasını umduğunuz genel bir ürün adı değildir. Argüman bu çağrının girdisidir, ikinci bir nesne değil.

Nesneye bir işlev koymak

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);

Değer bir işlev olabilir

name bir dizge tutar. greet bir işlev tutar. typeof product.greet sonucu "function" olur. Henüz bir şey çalışmadığı için Hi görünmez. Kupanın adı işlevin yanında durmaya devam eder.

Yöntemi parantezle çağırmak

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());

Parantez çalıştırma düğmesidir

product.greet() işlevin içine girer. Konsol Hi basar. Parantezi kaldırırsanız işleve bakarsınız, döndürdüğü değere değil. Nokta, çağrının hangi nesneye ait olduğunu söyler.

Literalin içinde kısa yöntem yazımı

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

Kısa yazım yalnızca daha sıkı bir imladır

Küme parantezinin içinde label() { ... } işlevi label anahtarına koyar. greet: function () { ... } ile aynı tür özelliktir, yazması daha azdır. product.label() onu çalıştırır. Gövde this.name okur, konsol Mug gösterir.

Kardeş alanları this ile okumak

javascript 
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());

Düz çağrıda this, noktadan önceki nesnedir

product.tag() şunu der: tag çalışsın ve this olarak product kalsın. O zaman this.name ile this.price o kupanın kendi alanlarıdır. Konsol Mug — 8 basar. Yöntemin içindeki çıplak name başka bir aramadır, özelliğin kendisi değildir. Çağrı artık object.method() biçiminde değilse this başka yere bakabilir — bu sonraki derstir. Bu sayfa düz çağrıda kalır.

Yönteme argüman vermek

javascript 
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));

Yöntem bu çağrı için girdi alır

add, extra bekler. cart.add(3) sayı 3 verir, onu count değerine ekler ve yeni toplamı döndürür. Konsol 5 basar. Sepet güncellenmiş count değerini tutar. Argüman çağrı boyunca yaşar; siz kaydetmezseniz özellik olmaz.

İşe uyan hareketi seçin

İşlev nesnede mi yaşasın? Uzun biçim ya da kısa yazım, saklayın. Sonucu mu istiyorsunuz? () ile çağırın. Nesnenin kendi alanları mı lazım? Onları this üzerinden okuyun. Yalnızca bu çalıştırma için bir sayı mı gerek? Argüman geçirin. Object.keys önceki sayfada adları listeledi. Sonraki sayfa, çağrının biçimi değişince this ile kalır.

Yöntemin etiketini sayfaya koyun

Ürüne name, price ve tag verin. product.tag() sonucunu bir paragrafa yazın.

Sayfa demosu — yöntem etiketi

html 
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>

Paragraf Mug — 8 gösterir. tag bu dizgeyi ürünün kendi alanlarından kurdu. Yalnızca name ya da price değiştirin, yenileyin, yeni satırı okuyun. Sonraki ders: this anahtar sözcüğü — çağrı düz object.method() olmadığında this nereye bakar.

Alıştırma adımları

  1. greet üzerine bir işlev koyun ve o özelliğin typeof sonucunu yazdırın.
  2. product.greet() çağırın ve Hi okuyun.
  3. label için kısa yazımı kullanın ve product.label() yazdırın.
  4. tag öyle kurulsun ki this.name ile this.price tek dizge olsun.
  5. count değerini 2’den başlatın, add(3) çağırın ve 5 okuyun.
  6. HTML demosunda yalnızca name ya da price değiştirin, yenileyin, paragrafı okuyun.

Sık kaymalar

  • product.greet ifadesini () olmadan yazdırmak ve Hi beklemek
  • Kısa yazım label() {} ifadesini dizge özelliği sanmak
  • Yöntemin içinde this.name yerine çıplak name yazmak
  • cart.add(3) sonrasında count değerinin 2’de kalacağını sanmak
  • Yöntem çağırmak isterken Object.keys yoluna sapmak
  • Bu sayfanın yöntemine ok işlevi koymak — sonraki ders, çağrı biçimi değişince this izini sürer

Özet

  • Yöntem, özellik olarak saklanmış bir işlevdir
  • object.method() onu çalıştırır ve dönen değeri verir
  • Kısa yazım name() {} aynı tür işlevi saklar
  • Düz çağrıda this, noktadan önceki nesnedir
  • Parametre, o çağrının argümanını alır
  • Yöntemin dizgesi sayfada bir satırı doldurabilir
  • Sıradaki: this anahtar sözcüğü, çağrı object.method() değilken

🧠 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 35 / 37
Javascript Ders