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中文网其他相关文章！