JavaScript-Schnellbits: Berechnete Methoden

Sie kennen sich wahrscheinlich mit berechneten Schlüsseln in Objekten aus, aber wussten Sie, dass Sie berechnete Schlüssel mit der Methodenkurzschrift verwenden können? Sie möchten das wahrscheinlich nie tun, aber Sie können.

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

Geschichtsunterricht

In den frühesten Versionen von JavaScript wurden alle Funktionen im globalen Bereich definiert. Schon damals konnte man Klammern verwenden, um berechnete Werte abzurufen oder festzulegen, aber die meisten der Funktionen, die wir uns vorstellen, waren nicht verfügbar.

ECMAScript 3

ECMAScript 3 brachte uns Funktionsausdrücke und Objektmethoden. Sie können die Klammernotation verwenden, um Eigenschaften oder Methoden festzulegen.

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

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

myObj[computedKey] = 'It worked!';

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

Es war möglich, dynamische Methodennamen zu verwenden, diese mussten jedoch nach der Erstellung des Objekts definiert werden.

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

ECMAScript 2015

ECMAScript 2015 führte sowohl Kurzschrift für Objektmethoden als auch berechnete Eigenschaften ein.

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

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

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

Auch wenn es im MDN-Artikel nicht ausdrücklich erwähnt wird, können Sie Methodenkürzel mit berechneten Eigenschaftsnamen kombinieren, wie am Anfang des Artikels gezeigt.

Probleme

Es kann einige Randfälle geben, in denen dies sinnvoll ist, aber im Allgemeinen sollten wir diese Technik vermeiden. Dies macht es sehr schwierig, Methoden zu finden, wenn man versucht, den Code zu verstehen, und verringert die Wirksamkeit der Code-Editor-Unterstützung wie IntelliSense und Typinformationen.

Alternativen

Hashes oder Proxys können gute Alternativen zu berechneten Methodennamen sein. Schauen Sie sich einige Möglichkeiten an, wie wir dies umsetzen könnten, und lassen Sie mich wissen, welche Ihrer Meinung nach für Sie am besten geeignet sind!

Gemeinsamer Code

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

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

Einfache Zuordnung

Eine einfache Zuordnung von Zeichenfolgen zum Zuordnen von Methodennamen erfordert nur sehr wenig Einrichtung, macht es jedoch etwas schwieriger, die Methoden aufzurufen.

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

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

Gebundenes Mapping

Die Verwendung eines Objekts mit an das Originalobjekt gebundenen Methoden erfordert mehr Setup, vereinfacht aber den Code für den Verbraucher.

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

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

Basis-Proxy

Ein Proxy-Objekt beseitigt die meisten Komplikationen, da Sie direkt mit dem Proxy interagieren können. Dies verwendet eine statische Prüfung im Getter, um unsere berechnete Eigenschaft zu finden.

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

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

Proxy Plus-Karte

Mithilfe einer Eigenschaftsnamenzuordnung a im Plain Mapping-Beispiel können wir eine beliebige Anzahl von Methodenzuordnungen unterstützen. Wenn wir bereit sind, ein kleines Risiko von Endlosschleifen in Kauf zu nehmen, können wir tatsächlich mehrere Indirektionen unterstützen!

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

Abschluss

Ich hoffe, Ihnen hat dieser kurze Streifzug durch einige unerwartete und (hoffentlich) ungenutzte Funktionen von JavaScript gefallen!

Das obige ist der detaillierte Inhalt vonJavaScript-Schnellbits: Berechnete Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!