JavaScript のクイックビット: 計算メソッド

オブジェクト内の計算キーについてはおそらくご存知かと思いますが、メソッド短縮表現で計算キーを使用できることをご存知ですか?おそらくこれは決してしたく​​ないでしょうが、でもできます。

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

歴史の授業

JavaScript の初期バージョンでは、関数はすべてグローバル スコープで定義されていました。当時でも括弧を使用して計算値を取得または設定できましたが、私たちが考える機能のほとんどは利用できませんでした。

ECMAScript 3

ECMAScript 3 では、関数式とオブジェクト メソッドが導入されました。括弧表記を使用してプロパティまたはメソッドを設定できます。

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

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

myObj[computedKey] = 'It worked!';

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

必要に応じて動的メソッド名を付けることも可能ですが、オブジェクトの作成後に定義する必要がありました。

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

ECMAScript 2015

ECMAScript 2015 では、オブジェクト メソッドの短縮表現と計算プロパティの両方が導入されました。

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

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

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

MDN の記事では具体的に言及していませんが、記事の冒頭で示したように、メソッドの短縮表現と計算されたプロパティ名を組み合わせることができます。

問題点

これを行うことが意味がある特殊なケースもあるかもしれませんが、一般的にはこの手法は避けるべきです。これにより、コードを理解しようとするときにメソッドを見つけることが非常に困難になり、IntelliSense や型情報などのコード エディターのサポートの有効性が低下します。

代替案

ハッシュまたはプロキシは、計算されたメソッド名の代替として適しています。これを実現するためのいくつかの方法を見て、どの方法があなたにとって最適だと思われるかをお知らせください!

共通コード

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

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

プレーンマッピング

メソッド名を一致させるための文字列の単純なマップでは、セットアップはほとんど必要ありませんが、メソッドを呼び出すのが少し難しくなります。

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

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

バインドされたマッピング

元のオブジェクトにバインドされたメソッドを持つオブジェクトを使用するには、より多くのセットアップが必要ですが、コンシューマのコードは簡素化されます。

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

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

基本プロキシ

プロキシ オブジェクトを使用すると、プロキシと直接対話できるため、ほとんどの複雑さが解消されます。これは、ゲッターの静的チェックを使用して、計算されたプロパティを見つけます。

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

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

プロキシプラスマップ

プレーン マッピングの例でプロパティ名マップを使用すると、任意の数のメソッド マッピングをサポートできます。無限ループの多少のリスクを許容できる場合は、実際に複数の間接化をサポートできます!

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

結論

JavaScript の予期せぬ (できれば) 未使用の機能を簡単に紹介しますが、楽しんでいただけたでしょうか。

以上がJavaScript のクイックビット: 計算メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。