7.1 Erstellen von Objektmethoden
Methoden des Objekts in JavaScript sind Funktionen, die mit Objekten verbunden sind und Aktionen auf diesen Objekten ausführen können. Methoden ermöglichen es Objekten, ihr eigenes Verhalten zu haben, was sie zu einem wichtigen Bestandteil der objektorientierten Programmierung macht. Im Folgenden betrachten wir das Erstellen und die Verwendung von Objektmethoden.
Methoden des Objekts können auf verschiedene Arten erstellt werden. Schauen wir uns die Hauptmethoden an.
1. Objektliteral
Methoden können direkt im Objektliteral unter Verwendung von Funktionen erstellt werden.
In diesem Beispiel hat das Objekt person eine Methode greet(), die eine Zeichenkette mithilfe der Eigenschaft name des Objekts zurückgibt:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Gibt aus: Hello, my name is John
2. Verkürzte Methodensyntax
Mit ES6 wurde eine verkürzte Syntax zum Erstellen von Objektmethoden eingeführt.
Diese Syntax macht den Code kürzer und leichter lesbar:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Gibt aus: Hello, my name is John
3. Hinzufügen von Methoden nach der Erstellung des Objekts
Methoden können einem Objekt nach dessen Erstellung hinzugefügt werden.
In diesem Beispiel wird dem Objekt person nach dessen Erstellung die Methode greet() hinzugefügt:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Gibt aus: Hello, my name is John
4. Verwendung eines Konstruktors
Ein Konstruktionsfunktion ermöglicht die Erstellung von Methoden für alle Instanzen des Objekts.
In diesem Beispiel wird die Methode greet() für jede Objektinstanz erstellt, die mit der Konstruktionsfunktion Person() erstellt wurde:
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Gibt aus: Hello, my name is John
console.log(jane.greet()); // Gibt aus: Hello, my name is Jane
7.2 Verwendung von Objektmethoden
1. Zugriff auf Methoden über einen Punkt
Methoden des Objekts können mit der Punktsyntax aufgerufen werden:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Gibt aus: Hello, my name is John
2. Zugriff auf Methoden mit eckigen Klammern
Methoden des Objekts können auch mit eckigen Klammern aufgerufen werden:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Gibt aus: Hello, my name is John
3. Aufruf einer Methode innerhalb einer anderen Methode
Methoden des Objekts können andere Methoden desselben Objekts aufrufen.
In diesem Beispiel verwenden die Methoden sum() und mul() die von der Methode setValues() festgelegten Werte:
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Gibt aus: 5
console.log(calculator.mul()); // Gibt aus: 6
4. Verwendung von this in Methoden
Das Schlüsselwort this in Objektmethoden bezieht sich auf das Objekt selbst, was es ermöglicht, auf dessen Eigenschaften und andere Methoden zuzugreifen:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Gibt aus: Brand: Toyota, Model: Camry
5. Methoden als Rückrufe übergeben
Wenn Methoden des Objekts als Rückrufe übergeben werden, ist es wichtig, den Wert von this zu berücksichtigen:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Gibt aus: Hello, my name is undefined
In diesem Beispiel geht der Wert von this verloren, wenn die Methode greet() als Rückruf an setTimeout() übergeben wird.
Infolgedessen bezieht sich this innerhalb von greet() auf das globale Objekt window.
In Browsern hat das Objekt window die Eigenschaft name, die standardmäßig eine leere Zeichenkette
"" ist. Daher wird "Hello, my name is" ausgegeben.
Um den richtigen Wert von this beizubehalten, kann die Methode bind() verwendet werden, die die Funktion an einen bestimmten Kontext bindet:
setTimeout(person.greet.bind(person), 1000); // Gibt aus: Hello, my name is John
Oder eine Pfeilfunktion verwenden:
setTimeout(() => person.greet(), 1000); // Gibt aus: Hello, my name is John
7.3 Gemeinsame Nutzung von Methoden
1. Methodenvererbung durch Prototypen
Methoden können Prototypen von Objekten hinzugefügt werden, damit sie allen Instanzen zur Verfügung stehen:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Gibt aus: Hello, my name is John
console.log(jane.greet()); // Gibt aus: Hello, my name is Jane
2. Verwenden von Methoden aus anderen Objekten
Methoden eines Objekts können für ein anderes Objekt mit den Methoden call() oder apply() aufgerufen werden:
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Gibt aus: Hello, my name is Jane
GO TO FULL VERSION