JavaScript Quick Bits : méthodes calculées

Vous connaissez probablement les clés calculées dans les objets, mais avez-vous réalisé que vous pouvez utiliser des clés calculées avec la méthode raccourcie ? Vous ne voudrez probablement jamais faire ça, mais vous pouvez.

const methodName = 'myMethod';
const computedKey = 'computed';

const myObj = {
  // Computed Property
  [computedKey]: 'It worked!',

  // ? Is this a good idea? Probably not, no.
  // Computed property + Method shorthand
  [methodName]() {
    return this.computed;
  },
};

myObj.myMethod();
// 'It worked!'

Leçon d'histoire

Dans les premières versions de JavaScript, les fonctions étaient toutes définies dans la portée globale. Même à l'époque, vous pouviez utiliser des parenthèses pour obtenir ou définir des valeurs calculées, mais la plupart des fonctionnalités auxquelles nous pensons n'étaient pas disponibles.

ECMAScript 3

ECMAScript 3 nous a apporté des expressions de fonction et des méthodes objet. Vous pouvez utiliser la notation entre crochets pour définir des propriétés ou des méthodes.

// Old JavaScript.
var computedKey = 'computed';

var myObj = {
  // Key and function separately.
  myMethod: function () {
    return this.computed;
  },
};

myObj[computedKey] = 'It worked!';

myObj.myMethod();
// 'It worked!'

Il était possible d'avoir des noms de méthodes dynamiques si on le souhaitait mais il fallait les définir après la création de l'objet.

myObj = {};
myObj[methodName] = function() {
  return this.computed;
};

ECMAScript 2015

ECMAScript 2015 a introduit à la fois le raccourci de la méthode objet et les propriétés calculées.

// Exciting new JavaScript!
const computedKey = 'computed';

const myObj = {
  // Method shorthand
  myMethod() {
    return this.computed;
  },
  // Computed Property
  [computedKey]: 'It worked!',
};

myObj.myMethod();
// 'It worked!'

Même si l'article MDN ne le mentionne pas spécifiquement, vous pouvez mélanger des raccourcis de méthodes avec des noms de propriétés calculés, comme indiqué au début de l'article.

Problèmes

Il peut y avoir certains cas extrêmes où cela a du sens, mais en général, nous devrions éviter cette technique. Cela rend très difficile la localisation des méthodes lorsque l'on essaie de comprendre le code et réduit l'efficacité de la prise en charge des éditeurs de code comme IntelliSense et du type d'informations.

Alternatives

Les hachages ou les proxys peuvent être de bonnes alternatives aux noms de méthodes calculés. Jetez un œil à quelques-unes des façons dont nous pourrions faire en sorte que cela fonctionne et dites-moi lesquelles, selon vous, fonctionneraient le mieux pour vous !

Code commun

const methodName = 'myMethod';
const computedKey = 'computed';

const myObj = {
  getComputed() {
    return this.computed;
  },
  [computedKey]: 'It worked!',
};

Cartographie simple

Une simple carte de chaînes pour faire correspondre les noms de méthodes nécessite très peu de configuration mais rend un peu plus difficile l'appel des méthodes.

const methodMap = {
  [methodName]: 'getComputed',
};

myObj[methodMap.myMethod]();
// 'It worked!';

Mappage lié

L'utilisation d'un objet avec des méthodes liées à l'objet d'origine nécessite plus de configuration mais simplifie le code pour le consommateur.

const methodMapBound = {
  [methodName]: myObj.getComputed.bind(myObj),
};

methodMapBound.myMethod();
// 'It worked!'

Proxy de base

Un objet proxy élimine la plupart des complications, car vous pouvez interagir directement avec le proxy. Cela utilise une vérification statique dans le getter pour trouver notre propriété calculée.

const basicProxy = new Proxy(myObj, {
  get(target, prop, receiver) {
    if (prop === methodName) {
      return myObj.getComputed;
    }
    return Reflect.get(...arguments);
  },
});

basicProxy.myMethod();
// 'It worked!'

Carte Proxy Plus

En utilisant un mappage de nom de propriété a dans l'exemple Plain Mapping, nous pouvons prendre en charge n'importe quel nombre de mappages de méthodes. Si nous sommes prêts à accepter un peu de risque de boucles infinies, nous pouvons réellement prendre en charge plusieurs indirections !

const methodMap = {
  [methodName]: 'getComputed',
  'thisIsWild': methodName,
};

const methodProxy = new Proxy(myObj, {
  get(target, prop, receiver) {
    if (methodMap[prop]) {
      // Using receiver allows multiple indirection
      return receiver[methodMap[prop]];
    }
    return Reflect.get(...arguments);
  },
});

methodProxy.myMethod();
// 'It worked!'

methodProxy.thisIsWild();
// 'It worked!'

Conclusion

J'espère que vous avez apprécié cette brève découverte de fonctionnalités inattendues et (espérons-le) inutilisées de JavaScript !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!