• Zurück
• Weiter

JavaScript basiert auf einem objektbasierten Paradigma. Ein Objekt ist eine Sammlung vonEigenschaften, und eine Eigenschaft ist eine Assoziation zwischen einem Namen (oderSchlüssel) und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein, in diesem Fall wird die Eigenschaft alsMethode bezeichnet.

Objekte in JavaScript können, wie in vielen anderen Programmiersprachen, mit Objekten im realen Leben verglichen werden. In JavaScript ist ein Objekt eine eigenständige Einheit mit Eigenschaften und einem Typ. Zum Beispiel kann man es mit einer Tasse vergleichen. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, Gewicht, ein Material, aus dem sie besteht, usw. In gleicher Weise können JavaScript-Objekte Eigenschaften haben, die ihre Charakteristika definieren.

Neben den vordefinierten Objekten im Browser können Sie Ihre eigenen Objekte definieren. Dieses Kapitel beschreibt, wie man Objekte, Eigenschaften und Methoden verwendet und wie man eigene Objekte erstellt.

Neue Objekte erstellen

Sie können ein Objekt mit einemObjekt-Initializer erstellen. Alternativ können Sie zuerst eine Konstruktionsfunktion erstellen und dann ein Objekt instanziieren, indem Sie diese Funktion mit demnew-Operator aufrufen.

Verwendung von Objekt-Initialisierern

Objekt-Initialisierer werden auchObjekt-Literale genannt. Der Begriff "Objekt-Initializer" ist konsistent mit der Terminologie, die in C++ verwendet wird.

Die Syntax für ein Objekt, das mit einem Objekt-Initializer erstellt wird, lautet:

const obj = {  property1: value1, // property name may be an identifier  2: value2, // or a number  "property n": value3, // or a string};

Jeder Eigenschaftsname vor einem Doppelpunkt ist ein Bezeichner (entweder ein Name, eine Zahl oder ein Stringliterale), und jedervalueN ist ein Ausdruck, dessen Wert dem Eigenschaftsnamen zugeordnet wird. Der Eigenschaftsname kann auch ein Ausdruck sein; berechnete Schlüssel müssen in eckige Klammern gesetzt werden. Die Referenz zumObjekt-Initializer enthält eine detailliertere Erklärung der Syntax.

In diesem Beispiel wird das neu erstellte Objekt einer Variablenobj zugewiesen - das ist optional. Wenn Sie dieses Objekt nicht an anderer Stelle benötigen, müssen Sie es nicht einer Variablen zuweisen. (Beachten Sie, dass Sie das Objekt-Literal möglicherweise in Klammern setzen müssen, wenn das Objekt dort erscheint, wo eine Anweisung erwartet wird, um nicht mit einer Blockanweisung verwechselt zu werden.)

Objekt-Initialisierer sind Ausdrücke, und jeder Objekt-Initializer führt zu einem neuen Objekt, das jedes Mal erstellt wird, wenn die Anweisung, in der es erscheint, ausgeführt wird. Identische Objekt-Initialisierer erstellen unterschiedliche Objekte, die nicht als gleich verglichen werden.

Die folgende Anweisung erstellt ein Objekt und weist es der Variablenx zu, wenn und nur wenn der Ausdruckcond wahr ist:

let x;if (cond) {  x = { greeting: "hi there" };}

Das folgende Beispiel erstelltmyHonda mit drei Eigenschaften. Beachten Sie, dass die Eigenschaftengine ebenfalls ein Objekt mit eigenen Eigenschaften ist.

const myHonda = {  color: "red",  wheels: 4,  engine: { cylinders: 4, size: 2.2 },};

Mit Initialisierern erstellte Objekte werdeneinfache Objekte genannt, weil sie Instanzen vonObject sind, aber keinem anderen Objekttyp angehören. Einige Objekttypen haben spezielle Initialisierungssyntaxen - z.B.Array-Initializer undRegex-Literale.

Verwendung einer Konstruktionsfunktion

Alternativ können Sie ein Objekt in diesen zwei Schritten erstellen:

1. Definieren Sie den Objekttyp, indem Sie eine Konstruktionsfunktion schreiben. Es gibt eine starke Konvention, aus gutem Grund, Großbuchstaben zu verwenden.
2. Erstellen Sie eine Instanz des Objekts mitnew.

Um einen Objekttyp zu definieren, erstellen Sie eine Funktion für den Objekttyp, die seinen Namen, seine Eigenschaften und Methoden spezifiziert. Angenommen, Sie möchten einen Objekttyp für Autos erstellen. Sie möchten, dass dieser ObjekttypCar genannt wird, und Sie möchten, dass er Eigenschaften für Marke, Modell und Jahr hat. Dafür würden Sie die folgende Funktion schreiben:

function Car(make, model, year) {  this.make = make;  this.model = model;  this.year = year;}

Beachten Sie die Verwendung vonthis, um Werte den Eigenschaften des Objekts basierend auf den an die Funktion übergebenen Werten zuzuweisen.

Jetzt können Sie ein Objekt namensmyCar wie folgt erstellen:

const myCar = new Car("Eagle", "Talon TSi", 1993);

Diese Anweisung erstelltmyCar und weist ihm die angegebenen Werte für seine Eigenschaften zu. Dann ist der Wert vonmyCar.make der String"Eagle",myCar.model der String"Talon TSi",myCar.year ist der Integer1993 und so weiter. Die Reihenfolge der Argumente und Parameter sollte gleich sein.

Sie können eine beliebige Anzahl vonCar-Objekten durch Aufrufe vonnew erstellen. Zum Beispiel,

const randCar = new Car("Nissan", "300ZX", 1992);const kenCar = new Car("Mazda", "Miata", 1990);

Ein Objekt kann eine Eigenschaft haben, die selbst ein weiteres Objekt ist. Angenommen, Sie definieren ein Objekt namensPerson wie folgt:

function Person(name, age, sex) {  this.name = name;  this.age = age;  this.sex = sex;}

und instanziieren dann zwei neuePerson-Objekte wie folgt:

const rand = new Person("Rand McKinnon", 33, "M");const ken = new Person("Ken Jones", 39, "M");

Dann können Sie die Definition vonCar um eineowner-Eigenschaft erweitern, die einPerson-Objekt aufnimmt, wie folgt:

function Car(make, model, year, owner) {  this.make = make;  this.model = model;  this.year = year;  this.owner = owner;}

Um die neuen Objekte zu instanziieren, verwenden Sie dann folgendes:

const car1 = new Car("Eagle", "Talon TSi", 1993, rand);const car2 = new Car("Nissan", "300ZX", 1992, ken);

Beachten Sie, dass anstelle der Übergabe eines literalen Strings oder integerwertigen Werts bei der Erstellung der neuen Objekte in den obigen Anweisungen die Objekterand undken als Argumente für die Besitzer übergeben werden. Wenn Sie dann den Namen des Besitzers voncar2 herausfinden möchten, können Sie auf die folgende Eigenschaft zugreifen:

car2.owner.name;

Sie können einem zuvor definierten Objekt immer eine Eigenschaft hinzufügen. Beispielsweise die Anweisung

car1.color = "black";

fügtcar1 eine Eigenschaftcolor hinzu und weist ihr den Wert"black" zu. Dies beeinflusst jedoch keine anderen Objekte. Um die neue Eigenschaft allen Objekten desselben Typs hinzuzufügen, müssen Sie die Eigenschaft zur Definition desCar-Objekttyps hinzufügen.

Sie können auch dieclass-Syntax anstelle derfunction-Syntax zur Definition einer Konstruktionsfunktion verwenden. Weitere Informationen finden Sie imKlassen-Leitfaden.

Verwendung der Object.create()-Methode

Objekte können auch mit derObject.create()-Methode erstellt werden. Diese Methode kann sehr nützlich sein, weil sie Ihnen ermöglicht, dasPrototypenobjekt für das Objekt, das Sie erstellen möchten, auszuwählen, ohne eine Konstruktionsfunktion definieren zu müssen.

// Animal properties and method encapsulationconst animalProto = {  type: "Invertebrates", // Default value of properties  displayType() {    // Method which will display the type of animal    console.log(this.type);  },};// Create a new animal type called `animal`const animal = Object.create(animalProto);animal.displayType(); // Logs: Invertebrates// Create a new animal type called fishconst fish = Object.create(animalProto);fish.type = "Fishes";fish.displayType(); // Logs: Fishes

Objekte und Eigenschaften

Ein JavaScript-Objekt hat damit verbundene Eigenschaften. Objekteigenschaften sind im Grunde dasselbe wie Variablen, außer dass sie mit Objekten und nicht mitScopes verknüpft sind. Die Eigenschaften eines Objekts definieren die Merkmale des Objekts.

Zum Beispiel erstellt dieses Beispiel ein Objekt namensmyCar mit den Eigenschaftenmake,model undyear, wobei deren Werte auf"Ford","Mustang" und1969 gesetzt sind:

const myCar = {  make: "Ford",  model: "Mustang",  year: 1969,};

Wie JavaScript-Variablen sind Eigenschaftsnamen groß-/klein-schreibungssensitiv. Eigenschaftsnamen können nur Strings oder Symbole sein - alle Schlüssel werdenin Strings umgewandelt, es sei denn, sie sind Symbole.Array-Indizes sind in Wirklichkeit Eigenschaften mit String-Schlüsseln, die ganze Zahlen enthalten.

Zugriff auf Eigenschaften

Sie können auf eine Eigenschaft eines Objekts anhand seines Eigenschaftsnamen zugreifen.Eigenschaftszugriffe gibt es in zwei Syntaxen:Punktnotation undKlammernotation. Zum Beispiel könnten Sie auf die Eigenschaften desmyCar-Objekts wie folgt zugreifen:

// Dot notationmyCar.make = "Ford";myCar.model = "Mustang";myCar.year = 1969;// Bracket notationmyCar["make"] = "Ford";myCar["model"] = "Mustang";myCar["year"] = 1969;

Ein Objekt-Eigenschaftsname kann jede JavaScript-Zeichenfolge oderSymbol sein, einschließlich einer leeren Zeichenfolge. Sie können jedoch keine Punktnotation verwenden, um auf eine Eigenschaft zuzugreifen, deren Name kein gültiger JavaScript-Bezeichner ist. Zum Beispiel kann ein Eigenschaftsname, der ein Leerzeichen oder einen Bindestrich enthält, mit einer Zahl beginnt oder in einer Variablen gespeichert ist, nur mit der Klammernotation zugegriffen werden. Diese Notation ist auch sehr nützlich, wenn Eigenschaftsnamen dynamisch bestimmt werden sollen, also nicht zur Laufzeit bestimmbar sind. Beispiele sind:

const myObj = {};const str = "myString";const rand = Math.random();const anotherObj = {};// Create additional properties on myObjmyObj.type = "Dot syntax for a key named type";myObj["date created"] = "This key has a space";myObj[str] = "This key is in variable str";myObj[rand] = "A random number is the key here";myObj[anotherObj] = "This key is object anotherObj";myObj[""] = "This key is an empty string";console.log(myObj);// {//   type: 'Dot syntax for a key named type',//   'date created': 'This key has a space',//   myString: 'This key is in variable str',//   '0.6398914448618778': 'A random number is the key here',//   '[object Object]': 'This key is object anotherObj',//   '': 'This key is an empty string'// }console.log(myObj.myString); // 'This key is in variable str'

Im obigen Code ist der SchlüsselanotherObj ein Objekt, das weder ein String noch ein Symbol ist. Wenn es demmyObj hinzugefügt wird, ruft JavaScript dietoString()-Methode vonanotherObj auf und verwendet den resultierenden String als neuen Schlüssel.

Sie können auch auf Eigenschaften mit einem in einer Variablen gespeicherten Stringwert zugreifen. Die Variable muss in der Klammernotation übergeben werden. Im oben erwähnten Beispiel hielt die Variablestr den Wert"myString" und es ist"myString", das der Eigenschaftsname ist. Daher wirdmyObj.str als undefined zurückgegeben.

str = "myString";myObj[str] = "This key is in variable str";console.log(myObj.str); // undefinedconsole.log(myObj[str]); // 'This key is in variable str'console.log(myObj.myString); // 'This key is in variable str'

Dies ermöglicht den Zugriff auf jede Eigenschaft, wie zur Laufzeit bestimmt:

let propertyName = "make";myCar[propertyName] = "Ford";// access different properties by changing the contents of the variablepropertyName = "model";myCar[propertyName] = "Mustang";console.log(myCar); // { make: 'Ford', model: 'Mustang' }

Seien Sie jedoch vorsichtig, wenn Sie eckige Klammern verwenden, um auf Eigenschaften zuzugreifen, deren Namen durch externe Eingaben angegeben werden. Dadurch könnte Ihr Code anfällig fürObjekt-Injektionsangriffe werden.

Nicht vorhandene Eigenschaften eines Objekts haben den Wertundefined (und nichtnull).

myCar.nonexistentProperty; // undefined

Aufzählen von Eigenschaften

Es gibt drei native Methoden, um Objekt-Eigenschaften aufzulisten/zu durchlaufen:

• for...in-Schleifen. Diese Methode durchläuft alle aufzählbaren Zeichenfolge-Eigenschaften eines Objekts sowie dessen Prototypen-Kette.
• Object.keys(). Diese Methode gibt ein Array mit nur den aufzählbaren eigenen Zeichenfolge-Eigenschaftsnamen ("Schlüsseln") im ObjektmyObj zurück, aber nicht diejenigen in der Prototypen-Kette.
• Object.getOwnPropertyNames(). Diese Methode gibt ein Array zurück, das alle eigenen Zeichenfolge-Eigenschaftsnamen im ObjektmyObj enthält, unabhängig davon, ob sie aufzählbar sind oder nicht.

Sie können die Klammernotation mitfor...in verwenden, um alle aufzählbaren Eigenschaften eines Objekts zu durchlaufen. Um zu verdeutlichen, wie dies funktioniert, zeigt die folgende Funktion die Eigenschaften des Objekts an, wenn Sie das Objekt und den Namen des Objekts als Argumente zur Funktion übergeben:

function showProps(obj, objName) {  let result = "";  for (const i in obj) {    // Object.hasOwn() is used to exclude properties from the object's    // prototype chain and only show "own properties"    if (Object.hasOwn(obj, i)) {      result += `${objName}.${i} = ${obj[i]}\n`;    }  }  console.log(result);}

Der Begriff "eigene Eigenschaft" bezieht sich auf die Eigenschaften des Objekts, jedoch mit Ausnahme jener der Prototypen-Kette. So würde der FunktionsaufrufshowProps(myCar, 'myCar') folgendes ausdrucken:

myCar.make = FordmyCar.model = MustangmyCar.year = 1969

Das obige ist gleichbedeutend mit:

function showProps(obj, objName) {  let result = "";  Object.keys(obj).forEach((i) => {    result += `${objName}.${i} = ${obj[i]}\n`;  });  console.log(result);}

Es gibt keine native Möglichkeit, alle geerbten Eigenschaften, einschließlich nicht-aufzählbarer, aufzulisten. Dies kann jedoch mit der folgenden Funktion erreicht werden:

function listAllProperties(myObj) {  let objectToInspect = myObj;  let result = [];  while (objectToInspect !== null) {    result = result.concat(Object.getOwnPropertyNames(objectToInspect));    objectToInspect = Object.getPrototypeOf(objectToInspect);  }  return result;}

Weitere Informationen finden Sie unterAufzählbarkeit und Besitz von Eigenschaften.

Löschen von Eigenschaften

Sie können eine nicht-geerbte Eigenschaft mit demdelete-Operator entfernen. Der folgende Code zeigt, wie eine Eigenschaft entfernt werden kann.

// Creates a new object, myObj, with two properties, a and b.const myObj = { a: 5, b: 12 };// Removes the a property, leaving myObj with only the b property.delete myObj.a;console.log("a" in myObj); // false

Vererbung

Alle Objekte in JavaScript erben von mindestens einem anderen Objekt. Das Objekt, von dem geerbt wird, ist als Prototyp bekannt, und die geerbten Eigenschaften können imprototype-Objekt des Konstruktors gefunden werden. SieheVererbung und die Prototypkette für weitere Informationen.

Eigenschaften für alle Objekte eines Typs definieren

Sie können mit derprototype-Eigenschaft einer bestimmtenKonstruktionsfunktion eine Eigenschaft zu allen durch diese Funktion erstellten Objekten hinzufügen. Dies definiert eine Eigenschaft, die von allen Objekten des angegebenen Typs gemeinsam genutzt wird, anstatt nur von einer Instanz des Objekts. Der folgende Code fügt allen Objekten vom TypCar einecolor-Eigenschaft hinzu und liest dann den Eigenschaftswert aus einer Instanzcar1:

Car.prototype.color = "red";console.log(car1.color); // "red"

Methoden definieren

EineMethode ist eine mit einem Objekt assoziierte Funktion oder anders ausgedrückt, eine Methode ist eine Eigenschaft eines Objekts, die eine Funktion ist. Methoden werden auf die gleiche Weise definiert, wie normale Funktionen definiert werden, außer dass sie als Eigenschaft eines Objekts zugewiesen werden müssen. Siehe auchMethodendefinitionen für weitere Details. Ein Beispiel ist:

objectName.methodName = functionName;const myObj = {  myMethod: function (params) {    // do something  },  // this works too!  myOtherMethod(params) {    // do something else  },};

wobeiobjectName ein existierendes Objekt ist,methodName der Name ist, den Sie der Methode zuweisen, undfunctionName der Name der Funktion ist.

Sie können die Methode dann im Kontext des Objekts wie folgt aufrufen:

objectName.methodName(params);

Methoden werden typischerweise auf demprototype-Objekt des Konstruktors definiert, sodass alle Objekte desselben Typs die gleiche Methode teilen. Zum Beispiel können Sie eine Funktion definieren, die die Eigenschaften der vorher definiertenCar-Objekte formatiert und anzeigt.

Car.prototype.displayCar = function () {  const result = `A Beautiful ${this.year} ${this.make} ${this.model}`;  console.log(result);};

Beachten Sie die Verwendung vonthis, um auf das Objekt zu verweisen, dem die Methode gehört. Anschließend können Sie diedisplayCar-Methode für jedes der Objekte wie folgt aufrufen:

car1.displayCar();car2.displayCar();

Verwendung von this für Objekt-Referenzen

JavaScript hat ein spezielles Schlüsselwort,this, das innerhalb einer Methode verwendet werden kann, um auf das aktuelle Objekt zu verweisen. Zum Beispiel, nehmen wir an, Sie haben 2 Objekte,manager undintern. Jedes Objekt hat einen eigenenname,age undjob. In der FunktionsayHi() beachten Sie die Verwendung vonthis.name. Wenn die Funktion den 2 Objekten hinzugefügt wird, wird dieselbe Funktion die Nachricht mit dem Namen des jeweiligen Objekts ausgeben, dem sie zugeordnet ist.

const manager = {  name: "Karina",  age: 27,  job: "Software Engineer",};const intern = {  name: "Tyrone",  age: 21,  job: "Software Engineer Intern",};function sayHi() {  console.log(`Hello, my name is ${this.name}`);}// Add sayHi function to both objectsmanager.sayHi = sayHi;intern.sayHi = sayHi;manager.sayHi(); // Hello, my name is Karinaintern.sayHi(); // Hello, my name is Tyrone

this ist ein "versteckter Parameter" eines Funktionsaufrufs, der durch die Angabe des Objekts vor der aufgerufenen Funktion übergeben wird. Beispielsweise ist beimanager.sayHi()this dasmanager-Objekt, weilmanager vor der FunktionsayHi() steht. Wenn Sie auf dieselbe Funktion von einem anderen Objekt aus zugreifen, ändert sichthis ebenfalls. Wenn Sie andere Methoden verwenden, um die Funktion aufzurufen, wieFunction.prototype.call() oderReflect.apply(), können Sie den Wert vonthis explizit als Argument übergeben.

Definieren von Gettern und Settern

EinGetter ist eine mit einer Eigenschaft verknüpfte Funktion, die den Wert einer bestimmten Eigenschaft erhält. EinSetter ist eine mit einer Eigenschaft verknüpfte Funktion, die den Wert einer bestimmten Eigenschaft setzt. Zusammen können sie den Wert einer Eigenschaft indirekt darstellen.

Getter und Setter können entweder

• innerhalb vonObjekt-Initialisierern definiert werden, oder
• später zu einem bestehenden Objekt hinzugefügt werden.

Innerhalb vonObjekt-Initialisierern werden Getter und Setter wie reguläreMethoden definiert, jedoch mit den Präfixenget oderset. Die Getter-Methode darf keinen Parameter erwarten, während die Setter-Methode genau einen Parameter erwartet (den neuen Wert, der gesetzt werden soll). Beispielsweise:

const myObj = {  a: 7,  get b() {    return this.a + 1;  },  set c(x) {    this.a = x / 2;  },};console.log(myObj.a); // 7console.log(myObj.b); // 8, returned from the get b() methodmyObj.c = 50; // Calls the set c(x) methodconsole.log(myObj.a); // 25

Die Eigenschaften desmyObj-Objekts sind:

• myObj.a — eine Zahl
• myObj.b — ein Getter, dermyObj.a plus 1 zurückgibt
• myObj.c — ein Setter, der den Wert vonmyObj.a auf die Hälfte des Wertes setzt, zu demmyObj.c gesetzt wird

Getter und Setter können auch zu einem Objekt jederzeit nach seiner Erstellung mit derObject.defineProperties()-Methode hinzugefügt werden. Diese Methode nimmt als ersten Parameter das Objekt, in dem Sie den Getter oder Setter definieren möchten, und als zweiten Parameter ein Objekt, dessen Eigenschaftsnamen die Namen der Getter oder Setter sind und dessen Eigenschaftswerte Objekte zur Definition der Getter- oder Setter-Funktionen sind. Hier ist ein Beispiel, das denselben Getter und Setter wie im vorherigen Beispiel definiert:

const myObj = { a: 0 };Object.defineProperties(myObj, {  b: {    get() {      return this.a + 1;    },  },  c: {    set(x) {      this.a = x / 2;    },  },});myObj.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' propertyconsole.log(myObj.b); // Runs the getter, which yields a + 1 or 6

Welcher der beiden Formen man wählt, hängt von Ihrem Programmierstil und der vorliegenden Aufgabe ab. Wenn Sie die Definition des ursprünglichen Objekts ändern können, werden Sie wahrscheinlich Getter und Setter durch den ursprünglichen Initialisierer definieren. Diese Form ist kompakter und natürlicher. Wenn Sie jedoch später Getter und Setter hinzufügen müssen – vielleicht, weil Sie das betreffende Objekt nicht geschrieben haben –, dann ist die zweite Form die einzige mögliche Form. Die zweite Form repräsentiert besser die dynamische Natur von JavaScript, kann jedoch den Code schwer lesbar und verständlich machen.

Vergleich von Objekten

In JavaScript sind Objekte ein Referenztyp. Zwei unterschiedliche Objekte sind niemals gleich, selbst wenn sie die gleichen Eigenschaften haben. Nur der Vergleich mit dem eigenen Objektverweis ergibt true.

// Two variables, two distinct objects with the same propertiesconst fruit = { name: "apple" };const anotherFruit = { name: "apple" };fruit == anotherFruit; // return falsefruit === anotherFruit; // return false

// Two variables, a single objectconst fruit = { name: "apple" };const anotherFruit = fruit; // Assign fruit object reference to anotherFruit// Here fruit and anotherFruit are pointing to same objectfruit == anotherFruit; // return truefruit === anotherFruit; // return truefruit.name = "grape";console.log(anotherFruit); // { name: "grape" }; not { name: "apple" }

Weitere Informationen über Vergleichsoperatoren finden Sie beiGleichheitsoperatoren.

Siehe auch

• Vererbung und die Prototypkette
• Klassen

• Zurück
• Weiter