Die statische DateneigenschaftSymbol.unscopables repräsentiert daswohlbekannte SymbolSymbol.unscopables. Diewith-Anweisung sucht dieses Symbol im Scope-Objekt für eine Eigenschaft auf, die eine Sammlung von Eigenschaften enthält, die nicht innerhalb derwith-Umgebung zu Bindungen werden sollen.

Probieren Sie es aus

const object = {  foo: 42,};object[Symbol.unscopables] = {  foo: true,};with (object) {  console.log(foo);  // Expected output: Error: foo is not defined}

Wert

Das wohlbekannte SymbolSymbol.unscopables.

Beschreibung

Das[Symbol.unscopables]-Symbol (zugänglich überSymbol.unscopables) kann auf jedem Objekt definiert werden, um Eigenschaftsnamen davon auszuschließen, als lexikalische Variablen inwith-Umgebungsbindungen exponiert zu werden. Beachten Sie, dass bei Verwendung desStrict Modewith-Anweisungen nicht verfügbar sind und dieses Symbol wahrscheinlich nicht benötigt wird.

Wenn eine Eigenschaft des[Symbol.unscopables]-Objekts auftrue (oder jedentruthy Wert) gesetzt wird, wird die entsprechende Eigenschaft deswith-Scope-Objektsunscopable und wird daher nicht in denwith-Body-Scope eingeführt. Wenn eine Eigenschaft auffalse (oder jedenfalsy Wert) gesetzt wird, wird siescopable und erscheint somit als Variable im lexikalischen Scope.

Wenn entschieden wird, obx unscopable ist, wird die gesamte Prototypkette der[Symbol.unscopables]-Eigenschaft nach einer Eigenschaft namensx durchsucht. Das bedeutet, wenn Sie[Symbol.unscopables] als einfaches Objekt deklariert haben, würdenObject.prototype-Eigenschaften wietoString ebenfalls unscopable werden, was bei Legacy-Code, der davon ausgeht, dass diese Eigenschaften normalerweise gescopet sind, zu Rückwärtskompatibilitätsproblemen führen könnte (sieheein Beispiel unten). Es wird empfohlen, die benutzerdefinierte[Symbol.unscopables]-Eigenschaft so zu gestalten, dass sienull als Prototyp hat, wie es beiArray.prototype[Symbol.unscopables] der Fall ist.

Dieses Protokoll wird auch von DOM-APIs genutzt, wie z.B.Element.prototype.append().

Beispiele

Scoping in with-Anweisungen

Der folgende Code funktioniert in ES5 und darunter einwandfrei. In ECMAScript 2015 wurde jedoch die MethodeArray.prototype.values() eingeführt. Das bedeutet, dass innerhalb einerwith-Umgebung "values" nun die MethodeArray.prototype.values() wäre und nicht die Variable außerhalb derwith-Anweisung.

var values = [];with (values) {  // If [Symbol.unscopables] did not exist, values would become  // Array.prototype.values starting with ECMAScript 2015.  // And an error would have occurred.  values.push("something");}

Der Code, derwith (values) enthält, führte dazu, dass einige Websites in Firefox nicht mehr funktionierten, alsArray.prototype.values() hinzugefügt wurde (Firefox Bug 883914). Darüber hinaus impliziert dies, dass jede zukünftige Hinzufügung einer Array-Methode möglicherweise zu einer Unterbrechung führt, wenn dies implizit denwith-Scope ändert. Daher wurde das[Symbol.unscopables]-Symbol eingeführt und inArray alsArray.prototype[Symbol.unscopables] implementiert, um zu verhindern, dass einige der Array-Methoden in diewith-Anweisung gescopet werden.

Unscopables in Objekten

Sie können auch[Symbol.unscopables] für Ihre eigenen Objekte festlegen.

const obj = {  foo: 1,  bar: 2,  baz: 3,};obj[Symbol.unscopables] = {  // Make the object have `null` prototype to prevent  // `Object.prototype` methods from being unscopable  __proto__: null,  // `foo` will be scopable  foo: false,  // `bar` will be unscopable  bar: true,  // `baz` is omitted; because `undefined` is falsy, it is also scopable (default)};with (obj) {  console.log(foo); // 1  console.log(bar); // ReferenceError: bar is not defined  console.log(baz); // 3}

Verwenden eines Nicht-Null-Prototyp-Objekts als[Symbol.unscopables] vermeiden

Deklarieren von[Symbol.unscopables] als einfaches Objekt ohne Eliminierung seines Prototyps kann subtile Fehler verursachen. Betrachten Sie den folgenden Code, der vor[Symbol.unscopables] funktioniert:

const character = {  name: "Yoda",  toString: function () {    return "Use with statements, you must not";  },};with (character) {  console.log(name + ' says: "' + toString() + '"'); // Yoda says: "Use with statements, you must not"}

Um die Rückwärtskompatibilität zu bewahren, haben Sie sich entschieden, eine[Symbol.unscopables]-Eigenschaft hinzuzufügen, wenn Sie weitere Eigenschaften zucharacter hinzufügen. Sie tun dies vielleicht naiv so:

const character = {  name: "Yoda",  toString: function () {    return "Use with statements, you must not";  },  student: "Luke",  [Symbol.unscopables]: {    // Make `student` unscopable    student: true,  },};

Der obige Code funktioniert nun jedoch nicht mehr:

with (character) {  console.log(name + ' says: "' + toString() + '"'); // Yoda says: "[object Undefined]"}

Dies liegt daran, dass bei der Suche nachcharacter[Symbol.unscopables].toStringObject.prototype.toString() zurückgegeben wird, was ein truthy Wert ist, und damit stellt dertoString()-Aufruf in derwith()-Anweisung aufglobalThis.toString() um — und weil es ohne einthis aufgerufen wird, istthisundefined, was[object Undefined] zurückgibt.

Selbst wenn die Methode nicht voncharacter überschrieben wird, wird durch Unscopable-Machen der Wert vonthis geändert.

const proto = {};const obj = { __proto__: proto };with (proto) {  console.log(isPrototypeOf(obj)); // true; `isPrototypeOf` is scoped and `this` is `proto`}proto[Symbol.unscopables] = {};with (proto) {  console.log(isPrototypeOf(obj)); // TypeError: Cannot convert undefined or null to object  // `isPrototypeOf` is unscoped and `this` is undefined}

Um dies zu beheben, stellen Sie immer sicher, dass[Symbol.unscopables] nur die Eigenschaften enthält, die Sie unscopable haben möchten, ohneObject.prototype-Eigenschaften.

const character = {  name: "Yoda",  toString: function () {    return "Use with statements, you must not";  },  student: "Luke",  [Symbol.unscopables]: {    // Make the object have `null` prototype to prevent    // `Object.prototype` methods from being unscopable    __proto__: null,    // Make `student` unscopable    student: true,  },};

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Array.prototype[Symbol.unscopables]
• with
• Element.prototype.append()