Un aperçu rapide des symboles JavaScript

Symboles

Les symboles sont de nouveaux primitifstype introduit dans ES6. Les symboles sont des identifiants totalement uniques. Tout comme leurs homologues primitifs ( Number , String , Boolean ), ils peuvent être créés à l'aide de la fonction factory Symbol()qui renvoie un Symbol.

const symbol = Symbol('description')

Chaque fois que vous appelez la fonction d'usine, un nouveau symbole unique est créé. Le paramètre facultatif à valeur de chaîne est une chaîne descriptive qui s'affiche lors de l'impression du symbole.

> symbol Symbol(description)

Chaque symbole renvoyé par Symbol()est unique, donc chaque symbole a sa propre identité:

> Symbol() === Symbol() false

Vous pouvez voir que les symboles sont primitifs si vous appliquez l' typeofopérateur à l'un d'eux - il renverra un nouveau résultat spécifique au symbole:

> typeof symbol 'symbol'

Cas d'utilisation: symboles en tant que clés de propriétés non publiques

Chaque fois qu'il existe des hiérarchies d'héritage dans JavaScript, vous avez deux types de propriétés (par exemple créées via des classes, une approche purement prototypique):

  • Les propriétés publiques sont vues par les clients du code
  • Les propriétés privées sont utilisées en interne dans les pièces qui composent la hiérarchie d'héritage (par exemple, classes, objets).

Par souci de convivialité, les propriétés publiques ont généralement des clés de chaîne. Mais pour les propriétés privées avec des clés de chaîne, les conflits de noms accidentels peuvent devenir un problème. Par conséquent, les symboles sont un bon choix.

Par exemple, dans le code suivant, des symboles sont utilisés pour les propriétés privées _counteret _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](); } } }

Notez que les symboles vous protègent uniquement des conflits de noms, et non des accès non autorisés. Vous pouvez trouver toutes les clés de propriété d'un objet - y compris les symboles - via ce qui suit:

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']

Avons-nous vraiment besoin de symboles?

Utilisez des symboles lorsque votre besoin est l'un de ceux-ci:

  • Enum: pour vous permettre de définir des constantes avec des noms sémantiques et des valeurs uniques.
const directions = { UP : Symbol( ‘UP’ ), DOWN : Symbol( ‘DOWN’ ), LEFT : Symbol( ‘LEFT’ ), RIGHT: Symbol( ‘RIGHT’ ) };
  • Conflits de noms: lorsque vous vouliez éviter les collisions avec les clés dans les objets
  • Confidentialité: lorsque vous ne voulez pas que les propriétés de votre objet soient énumérables
  • Protocoles: pour définir comment un objet peut être itéré.

    Imaginez, par exemple, une bibliothèque comme draguladéfinir un protocole à travers Symbol.for(dragula.moves). Vous pouvez ajouter une méthode à ce sujet Symbolà n'importe quel élément DOM. Si un élément DOM suit le protocole, alors dragulapourrait appeler la el[Symbol.for('dragula.moves')]()méthode définie par l' utilisateur pour affirmer si l'élément peut être déplacé.

  • Symboles bien connus: en plus des symboles définis par l'utilisateur, JavaScript possède des symboles intégrés. Ceux-ci représentent des comportements de langage internes qui n'ont pas été exposés aux développeurs dans <ES5. Plus d'informations ici .

Conclusion

Symbolsen JavaScript peut fournir un niveau d'accès unique aux objets. Cela vaut la peine pour tous les développeurs d'avoir une compréhension de base d'eux et de leurs différents cas d'utilisation.

code = coffee + developer