JavaScript -Objekte
Reale Objekte, Eigenschaften und Methoden
Im wirklichen Leben ist ein Auto ein Objekt.
Ein Auto hat Eigenschaften wie Gewicht und Farbe und Methoden wie Starten und Stoppen:
| Objekt | Eigenschaften | Methoden |
|---|---|---|
|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
Alle Autos haben die gleichen Eigenschaften, aber die Eigenschafts-Werte unterscheiden sich von Auto zu Auto.
Alle Autos haben die gleichen Methoden, aber die Methoden werden zu unterschiedlichen Zeiten ausgeführt.
JavaScript-Objekte
Sie haben bereits gelernt, dass JavaScript-Variablen Container für Datenwerte sind.
Dieser Code weist einer Variable namens Auto einen einfachen Wert (Fiat) zu:
let car = "Fiat";
Try it Yourself »
Objekte sind ebenfalls Variablen. Objekte können jedoch viele Werte enthalten.
Dieser Code weist einer Variable mit dem Namen Auto viele Werte (Fiat, 500, weiß) zu:
const car = {type:"Fiat", model:"500", color:"white"};
Try it Yourself »
Die Werte werden als Name:Wert-Paare geschrieben (Name und Wert durch Doppelpunkt getrennt).
Es ist üblich, Objekte mit dem Schlüsselwort const zu deklarieren.
Weitere Informationen zur Verwendung von const mit Objekten finden Sie im Kapitel: JS Const.
Objektdefinition
Sie definieren (und erstellen) ein JavaScript-Objekt mit einem Objektliteral:
Beispiel
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Try it Yourself »
Leerzeichen und Zeilenumbrüche spielen keine Rolle. Eine Objektdefinition kann sich über mehrere Zeilen erstrecken:
Beispiel
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Try it Yourself »
Objekteigenschaften
Die Name:Werte-Paare in JavaScript-Objekten werden Eigenschaften genannt:
| Eigentum | Eigenschaftswert |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Auf Objekteigenschaften zugreifen
Sie können auf zwei Arten auf Objekteigenschaften zugreifen:
objectName.propertyName
or
objectName["propertyName"]
JavaScript-Objekte sind Container für benannte Werte, sogenannte Eigenschaften.
Objektmethoden
Objekte können auch Methoden haben.
Methoden sind Aktionen, die an Objekten ausgeführt werden können.
Methoden werden in Eigenschaften als Funktionsdefinitionen gespeichert.
| Eigenschaft | Eigenschaftswert |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
Eine Methode ist eine als Eigenschaft gespeicherte Funktion.
Beispiel
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Im obigen Beispiel bezieht sich this auf das Personenobjekt.
I.E. this.firstName bedeutet die firstName-Eigenschaft von this.
I.E. this.firstName bedeutet die Eigenschaft firstName von person.
Was ist this?
In JavaScript bezieht sich das Schlüsselwort this auf ein Objekt.
Welches Objekt, hängt davon ab, wie this aufgerufen (verwendet oder aufgerufen) wird.
Das Schlüsselwort this bezieht sich je nach Verwendung auf unterschiedliche Objekte:
In einer Objektmethode bezieht sich this auf das Objekt. |
Allein bezieht sich this auf das globale Objekt. |
In einer Funktion bezieht sich this auf das globale Objekt. |
In einer Funktion im strikten Modus ist this undefined. |
In einem Ereignis bezieht sich this auf das Element, das das Ereignis empfangen hat. |
Methoden wie call(), apply() und bind() können dies auf jedes Objekt beziehen. |
Notiz
this ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von nicht ändern this.
Siehe auch:
Das Schlüsselwort this
In einer Funktionsdefinition bezieht sich this auf den „Besitzer“ der Funktion.
Im obigen Beispiel ist this das Personenobjekt, das die Funktion fullName „besitzt“.
Mit anderen Worten, this.firstName bedeutet die firstName-Eigenschaft von diesem Objekt.
Erfahren Sie mehr über this im JavaScript this-Tutorial.
Auf Objektmethoden zugreifen
Sie greifen mit der folgenden Syntax auf eine Objektmethode zu:
objectName.methodName()
Wenn Sie auf eine Methode ohne die Klammern () zugreifen, wird die Funktionsdefinition zurückgegeben:
Deklarieren Sie Zeichenfolgen, Zahlen und Boolesche Werte nicht als Objekte!
Wenn eine JavaScript-Variable mit dem Schlüsselwort „new“ deklariert wird, wird die Variable als Objekt erstellt:
x = new String(); // Deklariert x als String-Objekt
y = new Number(); // Deklariert y als Number-Objekt
z = new Boolean(); // Deklariert z als Boolean-Objekt
Vermeiden Sie String-, Number- und Boolean-Objekte. Sie verkomplizieren Ihren Code und verlangsamen die Ausführungsgeschwindigkeit.
Später in diesem Tutorial erfahren Sie mehr über Objekte.
