javascript - 动态构建函数

Question

是否可以根据另一个函数参数动态构建一个函数？

例如:

基本功能:

const someFunction = (functionName, functionParams) => {
  // Function Built here
};

someFunction("colorFunction", ["red", true]);

我希望它构建类似的东西: 我需要将数组解构为单独的参数，但我不确定这有多简单？我不知道如何使用第一个字符串来调用函数名称？

functionName(...functionParams);

在我的脑海中，它会像这样工作:

const colorFunction = (color, bool) => {
  console.log("Colour: " + color);
  console.log("Bool: " + bool);
};

对此有点困惑 - 我觉得我距离不到一百万英里，但我不确定!任何帮助都会很棒，谢谢!!

编辑 - 为什么？

我有一个带有点击事件的 react 组件，该事件会触发 redux 操作。理想情况下，此操作会将一些内容发送到我的 reducer ，并异步调用此“动态”函数。我可以通过大量 if/else 来完成此操作，但如果可以通过这种方式构建函数，我认为这不是实现此目的的非常干净的方法。

Answer 1

首先您需要确定要动态调用的函数的存储位置。如果它们是全局函数，那么您可以使用 window 调用它们:

const someFunction = (functionName, functionParams) => {
    window[functionName]();
};

如果它们是对象的方法，那么您可以使用该对象执行类似的操作:

const someFunction = (functionName, functionParams) => {
    myObject[functionName]();
};

至于如何传递参数，这里有几个选择。如果您正在运行最新版本的 JS，或者使用 polyfill，那么您确实可以使用展开运算符:

const someFunction = (functionName, functionParams) => {
    window[functionName](...functionParams);
};

否则您始终可以信赖 apply方法:

const someFunction = (functionName, functionParams) => {
    window[functionName].apply(null, functionParams);
};

apply 方法中的第一个参数是您希望传递给函数的上下文，在您的情况下，它似乎没有必要，因此为 null 值。

编辑:如 Bergi 提到的那样，使用 apply 更正了 bind