Objektmethoden
Name und Preis der Tasse liegen schon beisammen. Der Seite fehlt noch eine kleine Aufgabe, die zur Tasse gehört: Etikett bauen, Warenkorb zählen, den Käufer grüßen. Die Funktion sitzt auf dem Objekt. Genau das ist eine Methode.
Nach Schlüsseln und Listen
In der Lektion zu Eigenschaften kam ein Feld dazu, eines verschwand, in fragte nach, ein verschachteltes Objekt wurde betreten, Object.keys lieferte die Namen. Eine Funktion lief dort nicht. Hier ist der Wert einer Eigenschaft selbst eine Funktion, und sie startet vom Objekt aus.
Fünf Griffe an einer Methode
📊 Speichern, aufrufen, Kurzform, this, Argument
| Griff | Syntax | Was dabei herauskommt |
|---|---|---|
| speichern | greet: function () { return "Hi"; } |
eine Funktion auf dem Objekt |
| aufrufen | product.greet() |
die Funktion läuft, das Ergebnis kommt zurück |
| Kurzform | label() { return this.name; } |
dieselbe Art Funktion, kürzer geschrieben |
| this | this.name in der Methode |
das Objekt vor dem Punkt |
| Argument | cart.add(3) |
zusätzlicher Eingang nur für diesen Aufruf |
Erst den Griff benennen, dann die Zeile schreiben. Speichern startet die Funktion nicht. Die Kurzform ist kein neuer Werttyp. this ist kein globaler Produktname, auf den man hofft. Ein Argument ist Eingabe für diesen Aufruf, kein zweites Objekt.
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);
Der Wert darf eine Funktion sein
name hält eine Zeichenkette. greet hält eine Funktion. typeof product.greet ergibt "function". Noch ist nichts gelaufen, deshalb erscheint Hi nicht. Der Name der Tasse bleibt neben der Funktion stehen.
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());
Klammern sind der Startknopf
product.greet() steigt in die Funktion. Die Konsole zeigt Hi. Ohne Klammern siehst du die Funktion selbst, nicht ihren Rückgabewert. Der Punkt sagt, zu welchem Objekt der Aufruf gehört.
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());
Die Kurzform ist nur eine knappere Schreibweise
In den geschweiften Klammern legt label() { ... } eine Funktion auf den Schlüssel label. Dieselbe Sorte Eigenschaft wie greet: function () { ... }, nur weniger zu tippen. product.label() führt sie aus. Der Rumpf liest this.name, die Konsole zeigt Mug.
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());
Beim schlichten Aufruf ist this das Objekt vor dem Punkt
product.tag() heißt: führ tag aus, und this sei product. Dann sind this.name und this.price die eigenen Felder der Tasse. Die Konsole zeigt Mug — 8. Ein nacktes name im Rumpf ist eine andere Suche, nicht die Eigenschaft. Sobald der Aufruf nicht mehr wie object.method() aussieht, kann this woanders hinzeigen — das ist die nächste Lektion. Hier bleibt es beim schlichten Aufruf.
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));
Die Methode nimmt Eingabe für diesen Aufruf
add erwartet extra. cart.add(3) übergibt 3, zählt es auf count und gibt die neue Summe zurück. Die Konsole zeigt 5. Der Warenkorb behält das aktualisierte count. Das Argument gilt für den Aufruf; zur Eigenschaft wird es erst, wenn du es selbst speicherst.
Den Griff wählen, der zur Aufgabe passt
Die Funktion soll am Objekt wohnen? Speichern, lang oder kurz. Das Ergebnis soll da sein? Mit () aufrufen. Die eigenen Felder? Über this lesen. Eine Zahl nur für diesen Lauf? Ein Argument übergeben. Object.keys hat auf der vorigen Seite Namen aufgelistet. Die nächste Seite bleibt bei this, sobald sich die Aufrufform ändert.
Das Etikett der Methode auf die Seite setzen
Gib dem Produkt name, price und tag. Schreib product.tag() in einen Absatz.
<!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>
Der Absatz zeigt Mug — 8. tag hat die Zeichenkette aus den eigenen Feldern gebaut. Ändere nur name oder price, lade neu, lies die Zeile. Nächste Lektion: das Schlüsselwort this — wohin this zeigt, wenn der Aufruf kein schlichtes object.method() mehr ist.
Übungsfolge
- Lege eine Funktion auf
greetund gibtypeofdieser Eigenschaft aus. - Ruf
product.greet()auf und liesHi. - Schreib
labelin der Kurzform und gibproduct.label()aus. - Bau
tagso, dassthis.nameundthis.priceeine Zeichenkette bilden. - Starte
countbei 2, rufadd(3)auf und lies5. - Im HTML-Demo nur
nameoderpriceändern, neu laden, den Absatz lesen.
Häufige Ausrutscher
product.greetohne()ausgeben undHierwarten- Die Kurzform
label() {}für eine Zeichenketten-Eigenschaft halten - Im Rumpf nacktes
namestattthis.nameschreiben - Erwarten, dass
cart.add(3)den Wertcountbei 2 lässt - Zu
Object.keysgreifen, obwohl ein Methodenaufruf gemeint war - Eine Pfeilfunktion als Methode dieser Seite parken — die nächste Lektion folgt
this, wenn sich die Aufrufform ändert
Kurz gefasst
- Eine Methode ist eine Funktion, die als Eigenschaft liegt
object.method()führt sie aus und liefert den Rückgabewert- Die Kurzform
name() {}speichert dieselbe Art Funktion - Beim schlichten Aufruf ist
thisdas Objekt vor dem Punkt - Der Parameter nimmt das Argument dieses Aufrufs entgegen
- Die Zeichenkette der Methode kann eine Zeile auf der Seite füllen
- Als Nächstes: das Schlüsselwort
this, wenn der Aufruf nichtobject.method()ist
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt