Property accessors

Ein Objekt kann man sich 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 Klammernotation.

Im object.propertyName-Syntax muss 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 nicht gültig 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 eine numerische Literal verwenden und das numerische Literal keinen Exponenten und keinen Dezimalpunkt hat, sollten Sie Leerzeichen vor dem Punkt lassen, der dem Methodenaufruf vorausgeht, 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 über die Punktnotation innerhalb der Klasse, die sie definiert, aufgerufen werden.

Im object[expression]-Syntax sollte expression zu einem String oder Symbol ausgewertet werden, das den Eigenschaftsnamen darstellt. Es kann also jeder String, zum Beispiel, einschließlich '1foo', '!bar!' oder sogar ' ' (ein Leerzeichen) sein.

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

Das tut genau dasselbe wie das vorherige Beispiel.

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

Ein Leerzeichen vor der Klammernotation ist erlaubt.

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

Ausdrücke, die sich auf den Eigenschaftsnamen auswerten, führen dasselbe aus 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 beim Verwenden von eckigen Klammern, um auf Eigenschaften zuzugreifen, deren Namen von externen Eingaben gegeben werden. Dies kann Ihren Code anfällig für Objekt-Injektionsangriffe machen.

Jeder Eigenschaftsname ist ein String oder ein Symbol. Jeder andere Wert, einschließlich einer Zahl, wird in einen String umgewandelt. Dies ergibt 'value', da 1 in '1' umgewandelt wird.

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

Dies ergibt ebenfalls 'value', da sowohl foo als auch bar in dasselbe Zeichenfolgenobjekt ("[object Object]") umgewandelt werden.

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

Es ist typisch, beim Sprechen über die Eigenschaften eines Objekts zwischen Eigenschaften und Methoden zu unterscheiden. Jedoch ist die Unterscheidung zwischen Eigenschaft/Methode kaum mehr als eine Konvention. Eine Methode ist eine Eigenschaft, die aufgerufen werden kann (zum Beispiel, wenn sie eine Referenz auf eine Function-Instanz als ihren Wert hat).

Eine Methode ist nicht an das Objekt gebunden, dessen Eigenschaft sie ist. Insbesondere ist this in einer Methode nicht festgelegt und bezieht sich nicht unbedingt auf das Objekt, das die Methode enthält. Stattdessen wird this durch den Funktionsaufruf "übergeben". Siehe die Referenz für this.

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

Zum Beispiel wird 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 ids von Formularelementen nicht erforderlich ist. Es ist besser, stattdessen die Klammernotation zu verwenden:

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

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