Ein kurzer Überblick über JavaScript-Symbole

Symbole

Symbole sind neue GrundelementeTyp in ES6 eingeführt. Symbole sind völlig eindeutige Bezeichner. Genau wie ihre primitiven Gegenstücke ( Number , String , Boolean ) können sie mit der Factory-Funktion erstellt werden, Symbol()die ein Symbol zurückgibt.

const symbol = Symbol('description')

Jedes Mal, wenn Sie die Factory-Funktion aufrufen, wird ein neues und eindeutiges Symbol erstellt. Der optionale Parameter mit Zeichenfolgenwert ist eine beschreibende Zeichenfolge, die beim Drucken des Symbols angezeigt wird.

> symbol Symbol(description)

Jedes zurückgegebene Symbol Symbol()ist einzigartig, daher hat jedes Symbol seine eigene Identität:

> Symbol() === Symbol() false

Sie können sehen, dass Symbole primitiv sind, wenn Sie den typeofOperator auf eines von ihnen anwenden. Es wird ein neues symbolspezifisches Ergebnis zurückgegeben:

> typeof symbol 'symbol'

Anwendungsfall: Symbole als Schlüssel für nicht öffentliche Eigenschaften

Immer wenn es in JavaScript Vererbungshierarchien gibt, haben Sie zwei Arten von Eigenschaften (z. B. über Klassen erstellt, ein rein prototypischer Ansatz):

  • Öffentliche Eigenschaften werden von Clients des Codes gesehen
  • Private Eigenschaften werden intern in den Teilen verwendet, aus denen die Vererbungshierarchie besteht (z. B. Klassen, Objekte).

Aus Gründen der Benutzerfreundlichkeit verfügen öffentliche Eigenschaften normalerweise über Zeichenfolgenschlüssel. Bei privaten Eigenschaften mit Zeichenfolgenschlüsseln können jedoch versehentliche Namenskonflikte zu einem Problem werden. Daher sind Symbole eine gute Wahl.

Im folgenden Code werden beispielsweise Symbole für private Eigenschaften verwendet _counterund _action:

const _counter = Symbol('counter'); const _action = Symbol('action'); class Countdown { constructor(counter, action) { this[_counter] = counter; this[_action] = action; } dec() { let counter = this[_counter]; if (counter < 1) return; counter--; this[_counter] = counter; if (counter === 0) { this[_action](); } } }

Beachten Sie, dass Symbole Sie nur vor Namenskonflikten schützen, nicht vor unbefugtem Zugriff. Sie können alle Eigenschaftsschlüssel eines Objekts - einschließlich der Symbole - über Folgendes ermitteln:

const obj = { [Symbol('my_key')] : 1, enum : 2, nonEnum : 3 }; Object.defineProperty(obj, 'nonEnum', { enumerable: false }); // Making 'nonEnum' as not enumerable. // Ignores symbol-valued property keys: > Object.getOwnPropertyNames(obj) ['enum', 'nonEnum'] // Ignores string-valued property keys: > Object.getOwnPropertySymbols(obj) [Symbol(my_key)] // Considers all kinds of keys: > Reflect.ownKeys(obj) [Symbol(my_key),'enum', 'nonEnum'] // Only considers enumerable property keys that are strings: > Object.keys(obj) ['enum']

Brauchen wir wirklich Symbole?

Verwenden Sie Symbole, wenn Ihre Anforderung eine der folgenden ist:

  • Aufzählung: Damit Sie Konstanten mit semantischen Namen und eindeutigen Werten definieren können.
const directions = { UP : Symbol( ‘UP’ ), DOWN : Symbol( ‘DOWN’ ), LEFT : Symbol( ‘LEFT’ ), RIGHT: Symbol( ‘RIGHT’ ) };
  • Namenskonflikte: Wenn Sie Kollisionen mit Schlüsseln in Objekten verhindern möchten
  • Datenschutz: Wenn Sie nicht möchten, dass Ihre Objekteigenschaften aufzählbar sind
  • Protokolle: Definieren, wie ein Objekt iteriert werden kann.

    Stellen Sie sich zum Beispiel eine Bibliothek vor, wie Sie dragulaein Protokoll definieren Symbol.for(dragula.moves). Sie können Symboljedem DOM-Element eine Methode hinzufügen . Wenn ein DOM-Element dem Protokoll folgt, kann dragulaes die el[Symbol.for('dragula.moves')]()benutzerdefinierte Methode aufrufen , um festzustellen, ob das Element verschoben werden kann.

  • Bekannte Symbole: Zusätzlich zu benutzerdefinierten Symbolen verfügt JavaScript über einige integrierte Symbole. Diese stellen interne Sprachverhalten dar, die Entwicklern in <ES5 nicht ausgesetzt waren. Weitere Informationen hier .

Fazit

Symbolsin JavaScript kann Objekten eine eindeutige Zugriffsebene bieten. Es lohnt sich für alle Entwickler, ein grundlegendes Verständnis für sie und ihre verschiedenen Anwendungsfälle zu haben.

code = coffee + developer