时间戳

首页 > 解决方案 > Javascript 类属性 - 如何将函数作为值分配给它们？

javascript - Javascript 类属性 - 如何将函数作为值分配给它们？

问题描述

在我的 javascript 代码中，我有一个用于格式化对象的辅助类：

class MyHelperClass() {
  get MyStylerFunction() {
    return function(value, index) {
      return "/*some css based on value and index*/";
    };
  }

  get MyFormatterFunction() {
    // similar pattern to MyStylerFunction
  }
}

然后，此代码由以下人员使用：

myObj.table({
  title: ...,
  columns: ...,
  cssfunction: MyHelperClass.MyStylerFunction
});

此代码不起作用，并且在控制台上没有给出错误消息。由于我无法控制 table() 函数，我假设当给定的 css getter 函数不适用时它会优雅地失败。但是，当我使用这个时：

// inside MyHelperClass
MyStylerFunction(value, index) {
  return "/*some css based on value and index*/";
}

// in function table()
...
cssfunction: MyHelperClass.prototype.MyStylerFunction
...

它按预期工作。如果我将 styler 函数放在类之外并且只是将函数的名称提供给 table()，它也可以工作：

// in global namespace
function myStylerFunction(value, index) {
  // you know the drill by now
}

// inside table()
...
cssfunction: myStylerFunction
...

问题是

  1. 我不想用垃圾填充全局命名空间
  2. 使用原型感觉很笨拙，所以我想尽可能避免这种情况

有没有办法在保持MyHelperClass.MyStylerFunction语法的同时实现我的目标table()？

我不知道是什么导致了这个问题，谷歌搜索没有返回任何关于如何从类属性获取器中正确返回函数值的结果。

标签： javascriptfunctionproperties

解决方案

你追求的是static方法。静态方法不需要调用类的实例，而是可以在类本身上访问它们。这可用于实用功能，您可以将其打包到帮助类中，例如您的MyHelperClass. 您还可以使用静态 getter，它允许您在访问静态方法时运行代码。

class MyHelperClass {
  static get MyStylerFunction() {
    return function(value, index) {
      return "/*some css based on value and index*/";
    };
  }

  static get MyFormatterFunction() {
    // similar pattern to MyStylerFunction
  }
}

这将允许您执行以下操作：

myObj.table({
  title: ...,
  columns: ...,
  cssfunction: MyHelperClass.MyStylerFunction
});

照MyStylerFunction原样static，您可以将其作为类本身的属性进行访问。此外，由于它是一个 getter ( get)，因此您不需要像普通函数/方法那样调用它，而是会自动调用它，并返回您指定要返回的函数。

推荐阅读