Property accessors

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 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 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 createElement vom 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 lassen, der dem Methodaufruf vorangeht, 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 Elemente nur mit Punktnotation innerhalb der Klasse, die sie definiert, darauf zugegriffen werden.

Im object[expression]-Syntax sollte die expression zu einem String oder Symbol auswerten, der den Namen der Eigenschaft darstellt. Es kann also jede String-Schreibweise, zum Beispiel '1foo', '!bar!' oder sogar ' ' (ein Leerzeichen) sein.

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, 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 bei der Verwendung von eckigen Klammern, um auf Eigenschaften zuzugreifen, deren Namen durch externe Eingaben vorgegeben werden. Dies kann Ihr Code für Objekt-Injektionsangriffe anfällig machen.

Jeder Eigenschaftsname ist ein String oder ein Symbol. Jeder andere Wert, einschließlich einer Zahl, wird in einen String konvertiert. 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]);

Es ist typisch, wenn man von den Eigenschaften eines Objekts spricht, eine Unterscheidung zwischen Eigenschaften und Methoden zu machen. Allerdings ist die Unterscheidung zwischen Eigenschaft und Methode mehr als eine Konvention. Eine Methode ist eine Eigenschaft, die aufgerufen werden kann (zum Beispiel, wenn sie einen Verweis auf eine Function-Instanz als Wert hat).

Eine Methode ist nicht an das Objekt gebunden, zu dem sie gehört. Insbesondere ist this in einer Methode nicht festgelegt und verweist nicht notwendigerweise 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 die folgende Syntax oft in vielen Skripten gesehen.

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

eval() ist langsam und sollte, wenn möglich, vermieden werden. Außerdem müsste strFormControl ein Bezeichner sein, was für Namen und ids von Formularelementen nicht erforderlich ist. Es ist besser, statt dessen die Klammernotation zu verwenden:

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

• Object
• Object.defineProperty()
• Optionale Verkettung (?.)