Property accessors

Probieren Sie es aus

const person1 = {};
person1["firstName"] = "Mario";
person1["lastName"] = "Rossi";

console.log(person1.firstName);
// Expected output: "Mario"

const person2 = {
  firstName: "John",
  lastName: "Doe",
};

console.log(person2["lastName"]);
// Expected output: "Doe"

Syntax

object.propertyName
object[expression]
object.#privateProperty

Beschreibung

Man kann sich ein Objekt als ein assoziatives Array (auch bekannt als map, dictionary, hash, lookup table) vorstellen. Die Schlssel in diesem Array sind die Namen der Eigenschaften des Objekts.

Es gibt zwei Mglichkeiten, auf Eigenschaften zuzugreifen: Punktnotation und Klammernotation.

Punktnotation

Im object.propertyName-Syntax muss propertyName ein gltiger JavaScript-Bezeichner sein, der auch ein reserviertes Wort sein kann. Zum Beispiel ist object.$1 gltig, whrend object.1 es nicht ist.

const variable = object.propertyName;
object.propertyName = value;

const object = {};
object.$1 = "foo";
console.log(object.$1); // 'foo'

const object = {};
object.1 = "bar"; // SyntaxError
console.log(object.1); // SyntaxError

Hier wird die Methode namens createElement aus document abgerufen und aufgerufen.

document.createElement("pre");

Wenn Sie eine Methode fr ein numerisches Literal verwenden und das numerische Literal keinen Exponenten und keinen Dezimalpunkt hat, sollten Sie Leerzeichen vor dem Punkt, der dem Methodenauruf vorangeht, lassen, damit der Punkt nicht als Dezimalpunkt interpretiert wird.

77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// because 77. === 77.0, no ambiguity

Zustzlich knnen private Elemente nur mit der Punktnotation innerhalb der Klasse, die sie definiert, zugegriffen werden.

Klammernotation

Im object[expression]-Syntax sollte der expression zu einem String oder einem Symbol ausgewertet werden, das den Namen der Eigenschaft reprsentiert. Es kann also jeder Stringliterall sein, zum Beispiel einschlielich '1foo', '!bar!' oder sogar ' ' (ein Leerzeichen).

const variable = object[propertyName];
object[propertyName] = value;

Dies tut genau dasselbe wie das vorherige Beispiel.

document["createElement"]("pre");

Ein Leerzeichen vor der Klammernotation ist erlaubt.

document ["createElement"]("pre");

Das bergeben von Ausdrcken, die zum Eigenschaftsnamen ausgewertet werden, macht dasselbe wie das direkte bergeben des Eigenschaftsnamens.

const key = "name";
const getKey = () => "name";
const Obj = { name: "Michel" };

Obj["name"]; // returns "Michel"
Obj[key]; // evaluates to Obj["name"], and returns "Michel"
Obj[getKey()]; // evaluates to Obj["name"], and returns "Michel"

Seien Sie jedoch vorsichtig bei der Verwendung von eckigen Klammern, um auf Eigenschaften zuzugreifen, deren Namen durch externe Eingaben vorgegeben sind. Dies kann Ihren Code anfllig fr Object-Injection-Attacken machen.

Eigenschaftsnamen

Jeder Eigenschaftsname ist ein String oder ein Symbol. Jeder andere Wert, einschlielich einer Zahl, wird zu einem String umgewandelt. Dies gibt 'value' aus, da 1 in '1' umgewandelt wird.

const object = {};
object["1"] = "value";
console.log(object[1]);

Dies gibt ebenfalls 'value' aus, da sowohl foo als auch bar in denselben String ("[object Object]") konvertiert werden.

const foo = { uniqueProp: 1 };
const bar = { uniqueProp: 2 };
const object = {};
object[foo] = "value";
console.log(object[bar]);

Method binding

Es ist blich, wenn man ber die Eigenschaften eines Objekts spricht, zwischen Eigenschaften und Methoden zu unterscheiden. Die Unterscheidung zwischen Eigenschaft und Methode ist jedoch eher eine Konvention. Eine Methode ist eine Eigenschaft, die aufgerufen werden kann (zum Beispiel, wenn sie eine Referenz zu einer Function-Instanz als Wert hat).

Eine Methode ist nicht an das Objekt gebunden, zu dem sie gehrt. Insbesondere ist this in einer Methode nicht fixiert und bezieht sich nicht notwendigerweise auf das Objekt, das die Methode enthlt. Stattdessen wird this durch den Funktionsaufruf "bergeben". Siehe die Referenz fr this.

Beispiele

Klammernotation vs. eval()

JavaScript-Anfnger machen oft den Fehler, eval() zu verwenden, wo die Klammernotation stattdessen verwendet werden kann.

Zum Beispiel wird die folgende Syntax oft in vielen Skripten gesehen.

const x = eval(`document.forms.form_name.elements.${strFormControl}.value`);

eval() ist langsam und sollte wann immer mglich vermieden werden. Auerdem msste strFormControl einen Bezeichner enthalten, was fr Namen und ids von Formularsteuerungen nicht erforderlich ist. Es ist besser, stattdessen die Klammernotation zu verwenden:

const x = document.forms.form_name.elements[strFormControl].value;

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Object
• Object.defineProperty()
• Optional chaining (?.)