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

基本代理

代理物件消除了大部分複雜性，因為您可以直接與代理互動。這在 getter 中使用靜態檢查來尋找我們的計算屬性。

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

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

代理加地圖

在普通映射範例中使用屬性名稱映射 a，我們可以支援任意數量的方法映射。如果我們願意接受一點無限循環的風險，我們實際上可以支持多重間接！

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中文網其他相關文章！