Property Accessors

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Property Accessors ermöglichen den Zugriff auf die Eigenschaften eines Objekts, indem entweder die Punktnotation oder die eckige Klammernotation verwendet wird.

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

js
object.propertyName
object[expression]
object.#privateProperty

Beschreibung

Man kann sich ein Objekt als ein assoziatives Array (auch bekannt als Map, Dictionary, Hash, Lookup-Tabelle) vorstellen. Die Schlüssel in diesem Array sind die Namen der Eigenschaften des Objekts.

Es gibt zwei Möglichkeiten, auf Eigenschaften zuzugreifen: Punktnotation und eckige Klammernotation.

Punktnotation

Im Syntax object.propertyName muss propertyName ein gültiges JavaScript-Identifier sein, der auch ein reserviertes Wort sein kann. Zum Beispiel ist object.$1 gültig, während object.1 ungültig ist.

js
const variable = object.propertyName;
object.propertyName = value;
js
const object = {};
object.$1 = "foo";
console.log(object.$1); // 'foo'
js
const object = {};
object.1 = 'bar'; // SyntaxError
console.log(object.1); // SyntaxError

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

js
document.createElement("pre");

Falls Sie eine Methode an einem numerischen Literal verwenden und dieses weder einen Exponenten noch einen Dezimalpunkt enthält, sollten Sie Leerzeichen vor dem Punkt vorsehen, der dem Methodenaufruf vorangeht, damit der Punkt nicht als Dezimalpunkt interpretiert wird.

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

Zusätzlich können private Eigenschaften nur mit der Punktnotation innerhalb der Klasse, die sie definiert, abgerufen werden.

Eckige Klammernotation

In der Syntax object[expression] sollte die expression einen String oder ein Symbol ergeben, das den Namen der Eigenschaft darstellt. Es kann also jeder Stringliteral sein, zum Beispiel '1foo', '!bar!' oder sogar ' ' (ein Leerzeichen).

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

Dieser Code tut genau das Gleiche wie das vorherige Beispiel.

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

Ein Leerzeichen vor der eckigen Klammernotation ist erlaubt.

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

Das Übergeben von Ausdrücken, die sich zu Eigenschaftsnamen auswerten, hat die gleiche Wirkung wie direkt die Eigenschaftsnamen zu übergeben.

js
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"

Man sollte jedoch vorsichtig sein, wenn man eckige Klammern verwendet, um auf Eigenschaften zuzugreifen, deren Namen durch externe Eingaben vorgegeben werden. Dies kann den Code anfällig für Objekt-Injektionsangriffe machen.

Eigenschaftsnamen

Jeder Eigenschaftenname ist ein String oder ein Symbol. Jeder andere Wert, einschließlich einer Zahl, wird zu einem String konvertiert. Dies ergibt 'value', da 1 in '1' konvertiert wird.

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

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

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

Methodenbindung

Es ist typisch, bei der Beschreibung der Eigenschaften eines Objekts zwischen Eigenschaften und Methoden zu unterscheiden. Allerdings ist diese Unterscheidung eher konventionell. Eine Methode ist eine Eigenschaft, die aufgerufen werden kann (zum Beispiel, wenn sie einen Verweis auf eine Function-Instanz als Wert enthält).

Eine Methode ist nicht an das Objekt gebunden, zu dem sie gehört. Insbesondere ist this in einer Methode nicht fixiert und verweist nicht notwendigerweise auf das Objekt, das die Methode enthält. Stattdessen wird this durch den Funktionsaufruf „übergeben“. Siehe Referenz zu this.

Beispiele

Eckige Klammernotation vs. eval()

JavaScript-Anfänger machen häufig den Fehler, eval() zu verwenden, wo die eckige Klammernotation verwendet werden könnte.

Zum Beispiel wird folgende Syntax oft in vielen Skripten gesehen:

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

eval() ist langsam und sollte, wann immer möglich, vermieden werden. Außerdem müsste strFormControl einen Identifier halten, was für Namen und id-Attribute von Formularsteuerelementen nicht erforderlich ist. Es ist besser, die eckige Klammernotation zu verwenden:

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

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-property-accessors

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Property accessors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch