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 bieten Zugriff auf die Eigenschaften eines Objekts durch Punktnotation oder Klammernotation.
Probieren Sie es aus
Syntax
object.propertyName
object[expression]
object.#privateProperty
Beschreibung
Man kann sich ein Objekt als ein assoziatives Array (auch bekannt als Karte, Wörterbuch, Hash, Nachschlagetabelle) vorstellen. Die Schlüssel in diesem Array sind die Namen der Eigenschaften des Objekts.
Es gibt zwei Möglichkeiten, auf Eigenschaften zuzugreifen: Punktnotation und Klammernotation.
Punktnotation
Bei der object.propertyName
-Syntax muss der propertyName
ein gültiger JavaScript-Bezeichner sein, der auch ein reserviertes Wort sein kann. Zum Beispiel ist object.$1
gültig, während 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
von document
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 Sie Leerzeichen vor dem Punkt vor dem Methodenaufruf 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
Darüber hinaus können private Eigenschaften nur innerhalb der Klasse, die sie definiert, mit Punktnotation zugegriffen werden.
Klammernotation
Bei der object[expression]
-Syntax sollte der expression
-Ausdruck in einen String oder Symbol ausgewertet werden, der den Namen der Eigenschaft darstellt. Es kann daher ein beliebiges String-Literal sein, beispielsweise einschließlich '1foo'
, '!bar!'
oder sogar ' '
(ein Leerzeichen).
const variable = object[propertyName];
object[propertyName] = value;
Dies bewirkt genau dasselbe wie das vorherige Beispiel.
document["createElement"]("pre");
Ein Leerzeichen vor Klammernotation ist erlaubt.
document ["createElement"]("pre");
Das Übergeben von Ausdrücken, die den Eigenschaftsnamen auswerten, bewirkt dasselbe wie das direkte Übergeben des Eigenschaftsnamen.
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, wenn Sie eckige Klammern verwenden, um auf Eigenschaften zuzugreifen, deren Namen durch externe Eingaben angegeben werden. Dies kann Ihren Code anfällig für Objekt-Injektionsangriffe machen.
Eigenschaftsnamen
Jeder Eigenschaftsname ist entweder ein String oder ein Symbol. Jeder andere Wert, einschließlich einer Zahl, wird in einen String umgewandelt. Dies gibt 'value'
aus, da 1
in '1'
umgewandelt wird.
const object = {};
object["1"] = "value";
console.log(object[1]);
Dies gibt auch 'value'
aus, da sowohl foo
als auch bar
zu demselben String ("[object Object]"
) konvertiert werden.
const foo = { uniqueProp: 1 };
const bar = { uniqueProp: 2 };
const object = {};
object[foo] = "value";
console.log(object[bar]);
Methodenbindung
Es ist typisch, beim Sprechen von Objekteigenschaften zwischen Eigenschaften und Methoden zu unterscheiden. Die Unterscheidung zwischen Eigenschaft und Methode ist jedoch kaum mehr als 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, dessen Eigenschaft sie ist. Speziell ist this
in einer Methode nicht festgelegt und bezieht sich nicht notwendigerweise auf das Objekt, das die Methode enthält. Stattdessen wird this
durch den Funktionsaufruf „übergeben“. Siehe die Referenz für this
.
Beispiele
Klammernotation vs. eval()
JavaScript-Anfänger machen oft den Fehler, eval()
zu verwenden, wo die Klammernotation 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üsste strFormControl
einen Bezeichner enthalten, was für Namen und id
s von Formularsteuerelementen nicht erforderlich ist. Es ist besser, stattdessen die Klammernotation zu verwenden:
const x = document.forms.form_name.elements[strFormControl].value;
Spezifikationen
Specification |
---|
ECMAScript Language Specification # sec-property-accessors |
Browser-Kompatibilität
BCD tables only load in the browser