Arbeiten mit Objekten

Erstellen neuer Objekte

Sie knnen ein Objekt mit einem Objekt-Initializer erstellen. Alternativ knnen Sie zuerst eine Konstruktorfunktion erstellen und dann ein Objekt instanziieren, indem Sie diese Funktion mit dem new Operator aufrufen.

Verwendung von Objekt-Initialisierern

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

Die Syntax fr ein Objekt mit einem Objekt-Initializer ist:

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

Jeder Eigenschaftsname vor dem Doppelpunkt ist entweder ein Bezeichner, ein Zahlenliteral oder ein Stringliteral und jeder valueN ist ein Ausdruck, dessen Wert dem Eigenschaftsnamen zugewiesen wird. Der Eigenschaftsname kann auch ein Ausdruck sein; berechnete Schlssel mssen in eckige Klammern gesetzt werden. Die Referenz zum Objekt-Initializer enthlt eine detailliertere Erklrung der Syntax.

In diesem Beispiel wird das neu erstellte Objekt einer Variablen obj zugewiesen das ist optional. Wenn Sie nicht auf dieses Objekt an anderer Stelle verweisen mssen, brauchen Sie es keiner Variablen zuzuweisen. (Beachten Sie, dass Sie das Objektliteral in Klammern setzen mssen, wenn das Objekt an einer Stelle erscheint, an der eine Anweisung erwartet wird, um es nicht mit einer Blockanweisung zu verwechseln.)

Objekt-Initialisierer sind Ausdrcke, und jeder Objekt-Initializer fhrt dazu, dass jedes Mal, wenn die Anweisung, in der er erscheint, ausgefhrt wird, ein neues Objekt erstellt wird. Identische Objekt-Initialisierer erstellen unterschiedliche Objekte, die nicht als gleichwertig angesehen werden.

Die folgende Anweisung erstellt ein Objekt und weist es der Variablen x zu, wenn und nur wenn der Ausdruck cond wahr ist:

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

Das folgende Beispiel erstellt myHonda mit drei Eigenschaften. Beachten Sie, dass die Eigenschaft engine ebenfalls ein Objekt mit eigenen Eigenschaften ist.

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

Objekte, die mit Initialisierern erstellt werden, werden einfache Objekte genannt, weil sie Instanzen von Object sind, aber keinem anderen Objekttyp angehren. Einige Objekttypen haben spezielle Initialisierer-Syntaxen zum Beispiel Array-Initialisierer und Regex-Literale.

Verwendung einer Konstruktorfunktion

Alternativ knnen Sie ein Objekt in zwei Schritten erstellen:

1. Definieren Sie den Objekttyp durch Schreiben einer Konstruktorfunktion. Es gibt eine starke Konvention, mit gutem Grund, den Anfangsbuchstaben gro zu schreiben.
2. Erstellen Sie eine Instanz des Objekts mit new.

Um einen Objekttyp zu definieren, erstellen Sie eine Funktion fr den Objekttyp, die seinen Namen, seine Eigenschaften und Methoden angibt. Angenommen, Sie mchten einen Objekttyp fr Autos erstellen. Sie mchten, dass dieser Objekttyp Car genannt wird, und Sie mchten, dass er Eigenschaften fr Marke, Modell und Jahr hat. Dazu wrden Sie die folgende Funktion schreiben:

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

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

Nun knnen Sie ein Objekt namens myCar wie folgt erstellen:

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

Diese Anweisung erstellt myCar und weist ihm die angegebenen Werte fr seine Eigenschaften zu. Dann hat myCar.make den Wert des Strings "Eagle", myCar.model den Wert des Strings "Talon TSi", myCar.year den Wert der Ganzzahl 1993 usw. Die Reihenfolge der Argumente und Parameter sollte gleich sein.

Sie knnen eine beliebige Anzahl von Car-Objekten durch Aufrufe von new 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 anderes Objekt ist. Angenommen, Sie definieren ein Objekt, das Person genannt wird, wie folgt:

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

und instanziieren dann zwei neue Person-Objekte wie folgt:

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

Dann knnen Sie die Definition von Car um eine owner Eigenschaft erweiteren, die ein Person-Objekt bernimmt, 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 des bergebens eines Literal-Strings oder -Ganzzahlwerts beim Erstellen der neuen Objekte die oben genannten Anweisungen die Objekte rand und ken als Argumente fr die Besitzer bergeben. Wenn Sie dann herausfinden mchten, wie der Besitzer von car2 heit, knnen Sie auf die folgende Eigenschaft zugreifen:

car2.owner.name;

Sie knnen jederzeit eine Eigenschaft zu einem zuvor definierten Objekt hinzufgen. Zum Beispiel, die Anweisung

car1.color = "black";

fgt car1 die Eigenschaft color hinzu und weist ihr den Wert "black" zu. Dies wirkt sich jedoch nicht auf andere Objekte aus. Um die neue Eigenschaft zu allen Objekten desselben Typs hinzuzufgen, mssen Sie die Eigenschaft zur Definition des Car-Objekttyps hinzufgen.

Sie knnen auch die Syntax class anstelle der function-Syntax verwenden, um eine Konstruktorfunktion zu definieren. Fr weitere Informationen siehe den Klassenteil.

Verwendung der Object.create()-Methode

Objekte knnen auch mit der Object.create() Methode erstellt werden. Diese Methode kann sehr ntzlich sein, weil sie es Ihnen erlaubt, das Prototyp Objekt fr das Objekt, das Sie erstellen mchten, auszuwhlen, ohne eine Konstruktorfunktion definieren zu mssen.

// Animal properties and method encapsulation
const 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 fish
const fish = Object.create(animalProto);
fish.type = "Fishes";
fish.displayType(); // Logs: Fishes

Objekte und Eigenschaften

Ein JavaScript-Objekt verfgt ber zugeordnete Eigenschaften. Objekteigenschaften sind grundstzlich dasselbe wie Variablen, auer dass sie mit Objekten, nicht mit Scopes, assoziiert sind. Die Eigenschaften eines Objekts definieren die Merkmale des Objekts.

Zum Beispiel erstellt dieses Beispiel ein Objekt namens myCar mit Eigenschaften namens make, model und year, deren Werte auf "Ford", "Mustang" und 1969 gesetzt wurden:

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

Wie JavaScript-Variablen sind Eigenschaftsnamen gro- und kleinschreibungssensitiv. Eigenschaftsnamen knnen nur Strings oder Symbole sein alle Schlssel werden in Strings umgewandelt, es sei denn, sie sind Symbole. Array-Indizes sind tatschlich Eigenschaften mit Zeichenfolgenschlsseln, die Ganzzahlen enthalten.

Zugriff auf Eigenschaften

Sie knnen auf eine Eigenschaft eines Objekts ber seinen Eigenschaftsnamen zugreifen. Property-Accessoren gibt es in zwei Syntaxen: Punktnotation und Klammernotation. Zum Beispiel knnten Sie auf die Eigenschaften des myCar Objekts wie folgt zugreifen:

// Dot notation
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

// Bracket notation
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

Ein Objekt-Eigenschaftsname kann jeder JavaScript-String oder Symbol, einschlielich eines leeren Strings, sein. Sie knnen jedoch nicht die Punktnotation verwenden, um auf eine Eigenschaft zuzugreifen, deren Name kein gltiger JavaScript-Bezeichner ist. Zum Beispiel kann auf einen Eigenschaftsnamen, der ein Leerzeichen oder Bindestrich enthlt, mit einer Zahl beginnt oder in einer Variablen enthalten ist, nur mit der Klammernotation zugegriffen werden. Diese Notation ist auch sehr ntzlich, wenn Eigenschaftsnamen dynamisch bestimmt werden sollen, d.h. erst zur Laufzeit bestimmbar sind. Hier einige Beispiele:

const myObj = {};
const str = "myString";
const rand = Math.random();
const anotherObj = {};

// Create additional properties on myObj
myObj.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 Schlssel anotherObj ein Objekt, das weder ein String noch ein Symbol ist. Wenn es zu myObj hinzugefgt wird, ruft JavaScript die toString() Methode von anotherObj auf und verwendet das resultierende String als neuen Schlssel.

Sie knnen auch auf Eigenschaften mit einem String-Wert zugreifen, der in einer Variablen gespeichert ist. Die Variable muss in der Klammernotation bergeben werden. Im obigen Beispiel hielt die Variable str "myString" und somit ist "myString" der Eigenschaftsname. Daher wird myObj.str als undefined zurckgegeben.

str = "myString";
myObj[str] = "This key is in variable str";

console.log(myObj.str); // undefined

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

Dies ermglicht den Zugriff auf jede Eigenschaft, die zur Laufzeit bestimmt wird:

let propertyName = "make";
myCar[propertyName] = "Ford";

// access different properties by changing the contents of the variable
propertyName = "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 gegeben sind. Dies kann Ihren Code anfllig fr Objekt-Injektionsangriffe machen.

Nicht existierende Eigenschaften eines Objekts haben den Wert undefined (und nicht null).

myCar.nonexistentProperty; // undefined

Aufzhlen von Eigenschaften

Es gibt drei native Mglichkeiten, Objekteigenschaften aufzulisten/durchzugehen:

• for...in Schleifen. Diese Methode durchluft alle aufzhlbaren String-Eigenschaften eines Objekts sowie seine Prototypkette.
• Object.keys(). Diese Methode gibt ein Array mit nur den eigenen aufzhlbaren String-Eigenschaftsnamen ("Schlsseln") im Objekt myObj zurck, nicht jedoch die der Prototypkette.
• Object.getOwnPropertyNames(). Diese Methode gibt ein Array zurck, das alle eigenen String-Eigenschaftsnamen im Objekt myObj enthlt, unabhngig davon, ob sie aufzhlbar sind oder nicht.

Sie knnen die Klammernotation mit for...in verwenden, um alle aufzhlbaren Eigenschaften eines Objekts zu durchlaufen. Um zu veranschaulichen, wie dies funktioniert, zeigt die folgende Funktion die Eigenschaften des Objekts an, wenn Sie das Objekt und den Namen des Objekts als Argumente an die 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 ohne die der Prototypkette. Daher wrde der Funktionsaufruf showProps(myCar, 'myCar') Folgendes ausgeben:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

Das obige ist quivalent zu:

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

Es gibt keine native Methode, um alle geerbten Eigenschaften aufzulisten, einschlielich nicht aufzhlbarer. 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;
}

Fr weitere Informationen siehe Enumerierbarkeit und Eigentum von Eigenschaften.

Lschen von Eigenschaften

Sie knnen eine nicht geerbte Eigenschaft mit dem delete Operator entfernen. Der folgende Code zeigt, wie man eine Eigenschaft entfernt.

// 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, wird als Prototyp bezeichnet, und die geerbten Eigenschaften knnen im prototype des Konstruktors gefunden werden. Siehe Vererbung und die Prototypkette fr weitere Informationen.

Eigenschaften fr alle Objekte eines Typs definieren

Sie knnen eine Eigenschaft zu allen Objekten hinzufgen, die durch einen bestimmten Konstruktor erstellt wurden, indem Sie die prototype Eigenschaft verwenden. Dies definiert eine Eigenschaft, die von allen Objekten des angegebenen Typs geteilt wird, anstatt nur von einer Instanz des Objekts. Der folgende Code fgt allen Objekten des Typs Car eine color-Eigenschaft hinzu und liest dann den Wert der Eigenschaft von einer Instanz car1.

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

Methoden definieren

Eine Methode ist eine Funktion, die mit einem Objekt assoziiert ist. Anders ausgedrckt, eine Methode ist eine Eigenschaft eines Objekts, die eine Funktion ist. Methoden werden definiert, wie normale Funktionen definiert werden, auer dass sie als Eigenschaft eines Objekts zugewiesen werden mssen. Siehe auch Methodendefinitionen fr weitere Details. Ein Beispiel ist:

objectName.methodName = functionName;

const myObj = {
  myMethod: function (params) {
    // do something
  },

  // this works too!
  myOtherMethod(params) {
    // do something else
  },
};

wobei objectName ein existierendes Objekt ist, methodName der Name ist, den Sie der Methode zuweisen, und functionName der Name der Funktion ist.

Sie knnen die Methode dann im Kontext des Objekts wie folgt aufrufen:

objectName.methodName(params);

Methoden werden typischerweise auf dem prototype Objekt des Konstruktors definiert, sodass alle Objekte desselben Typs dieselbe Methode teilen. Zum Beispiel knnen Sie eine Funktion definieren, die die Eigenschaften der zuvor definierten Car 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 von this, um auf das Objekt zu verweisen, zu dem die Methode gehrt. Dann knnen Sie die displayCar Methode fr jedes der Objekte wie folgt aufrufen:

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

Verwendung von this fr Objektverweise

JavaScript hat ein spezielles Schlsselwort, this, das Sie in einer Methode verwenden knnen, um auf das aktuelle Objekt zu verweisen. Zum Beispiel, nehmen wir an, Sie haben zwei Objekte, manager und intern. Jedes Objekt hat seinen eigenen name, age und job. In der Funktion sayHi() beachten Sie die Verwendung von this.name. Wenn sie zu den zwei Objekten hinzugefgt wird, wird dieselbe Funktion die Nachricht mit dem Namen des jeweiligen Objekts, an das sie angehngt ist, ausgeben.

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 objects
manager.sayHi = sayHi;
intern.sayHi = sayHi;

manager.sayHi(); // Hello, my name is Karina
intern.sayHi(); // Hello, my name is Tyrone

this ist ein "versteckter Parameter" eines Funktionsaufrufs, der durch Angabe des Objekts vor der aufgerufenen Funktion bergeben wird. Zum Beispiel ist in manager.sayHi(), this das manager Objekt, weil manager vor der Funktion sayHi() kommt. Wenn Sie dieselbe Funktion von einem anderen Objekt aus aufrufen, ndert sich auch this. Wenn Sie andere Methoden verwenden, um die Funktion aufzurufen, wie Function.prototype.call() oder Reflect.apply(), knnen Sie den Wert von this explizit als Argument bergeben.

Getter und Setter definieren

Ein Getter ist eine Funktion, die mit einer Eigenschaft verbunden ist, die den Wert einer bestimmten Eigenschaft ermittelt. Ein Setter ist eine Funktion, die mit einer Eigenschaft verbunden ist, die den Wert einer bestimmten Eigenschaft festlegt. Gemeinsam knnen sie indirekt den Wert einer Eigenschaft darstellen.

Getter und Setter knnen entweder

• innerhalb von Objekt-Initialisierern definiert werden, oder
• spter jedem bestehenden Objekt hinzugefgt werden.

Innerhalb von Objekt-Initialisierern werden Getter und Setter wie normale Methoden definiert, jedoch mit den Schlsselwrtern get oder set davor. Die Getter-Methode darf keinen Parameter erwarten, whrend die Setter-Methode genau einen Parameter erwartet (den neuen Wert, der gesetzt werden soll). Ein Beispiel:

const myObj = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  },
};

console.log(myObj.a); // 7
console.log(myObj.b); // 8, returned from the get b() method
myObj.c = 50; // Calls the set c(x) method
console.log(myObj.a); // 25

Die Eigenschaften des myObj Objekts sind:

• myObj.a eine Zahl
• myObj.b ein Getter, der myObj.a plus 1 zurckgibt
• myObj.c ein Setter, der den Wert von myObj.a auf die Hlfte des Wertes setzt, auf den myObj.c gesetzt wird

Getter und Setter knnen auch zu einem Objekt jederzeit nach der Erstellung mit der Object.defineProperties() Methode hinzugefgt werden. Der erste Parameter dieser Methode ist das Objekt, fr das Sie den Getter oder Setter definieren mchten. Der zweite Parameter ist ein Objekt, dessen Eigenschaftsnamen die Namen der Getter oder Setter sind und deren Eigenschaftswerte Objekte zum Definieren der Getter- oder Setter-Funktionen sind. Hier ist ein Beispiel, das denselben Getter und Setter aus dem 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' property
console.log(myObj.b); // Runs the getter, which yields a + 1 or 6

Welche der beiden Formen Sie whlen, hngt von Ihrem Programmierstil und der aktuellen Aufgabe ab. Wenn Sie die Definition des ursprnglichen Objekts ndern knnen, werden Sie wahrscheinlich Getter und Setter durch den ursprnglichen Initialisierer definieren. Diese Form ist kompakter und natrlicher. Wenn Sie jedoch spter Getter und Setter hinzufgen mssen vielleicht, weil Sie das spezielle Objekt nicht geschrieben haben ist die zweite Form die einzige mgliche. Die zweite Form stellt die dynamische Natur von JavaScript besser dar, kann jedoch den Code schwer lesbar und verstndlich machen.

Objekte vergleichen

In JavaScript sind Objekte ein Referenztyp. Zwei unterschiedliche Objekte sind niemals gleich, selbst wenn sie dieselben Eigenschaften haben. Nur der Vergleich des gleichen Objektverweises mit sich selbst ergibt true.

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

fruit == anotherFruit; // return false
fruit === anotherFruit; // return false

// Two variables, a single object
const fruit = { name: "apple" };
const anotherFruit = fruit; // Assign fruit object reference to anotherFruit

// Here fruit and anotherFruit are pointing to same object
fruit == anotherFruit; // return true
fruit === anotherFruit; // return true

fruit.name = "grape";
console.log(anotherFruit); // { name: "grape" }; not { name: "apple" }

Fr weitere Informationen ber Vergleichsoperatoren siehe Gleichheitsoperatoren.

Siehe auch

• Vererbung und die Prototypkette
• Klassen

• Zurck
• Weiter