Property accessors ermöglichen den Zugriff auf die Eigenschaften eines Objekts durch die Punktnotation oder die Klammernotation.

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.propertyNameobject[expression]object.#privateProperty

Beschreibung

Man kann sich ein Objekt als einassoziatives Array (auch bekannt alsmap,dictionary,hash,lookup table) vorstellen. DieSchlüssel in diesem Array sind die Namen derEigenschaften des Objekts.

Es gibt zwei Möglichkeiten, auf Eigenschaften zuzugreifen:Punktnotation undKlammernotation.

Punktnotation

Imobject.propertyName-Syntax musspropertyName ein gültiger JavaScript-Bezeichner sein, der auch einreserviertes Wort sein kann. Zum Beispiel istobject.$1 gültig, währendobject.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"; // SyntaxErrorconsole.log(object.1); // SyntaxError

Hier wird die Methode namenscreateElement ausdocument abgerufen und aufgerufen.

document.createElement("pre");

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

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

Zusätzlich könnenprivate Elemente nur mit der Punktnotation innerhalb der Klasse, die sie definiert, zugegriffen werden.

Klammernotation

Imobject[expression]-Syntax sollte derexpression zu einem String oder einemSymbol ausgewertet werden, das den Namen der Eigenschaft repräsentiert. Es kann also jeder Stringliterall sein, zum Beispiel einschließlich'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 Ausdrücken, 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 anfällig fürObject-Injection-Attacken machen.

Eigenschaftsnamen

Jeder Eigenschaftsname ist ein String oder einSymbol. Jeder andere Wert, einschließlich einer Zahl, wird zu einem String umgewandelt. Dies gibt'value' aus, da1 in'1' umgewandelt wird.

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

Dies gibt ebenfalls'value' aus, da sowohlfoo als auchbar 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 einerFunction-Instanz als Wert hat).

Eine Methode ist nicht an das Objekt gebunden, zu dem sie gehört. Insbesondere istthis in einer Methode nicht fixiert und bezieht sich nicht notwendigerweise auf das Objekt, das die Methode enthält. Stattdessen wirdthis durch den Funktionsaufruf "übergeben". Siehedie Referenz fürthis.

Beispiele

Klammernotation vs. eval()

JavaScript-Anfänger 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 möglich vermieden werden. Außerdem müsstestrFormControl einen Bezeichner enthalten, was für Namen undids von Formularsteuerungen nicht erforderlich ist. Es ist besser, stattdessen die Klammernotation zu verwenden:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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