动态构建函数

Question

是否可以根据另一个函数参数动态构建一个函数？例如：基本功能：const someFunction = (functionName, functionParams) => {  // Function Built here};someFunction("colorFunction", ["red", true]);我希望它构建与此类似的东西： 我需要将 Array 解构为单独的参数，但我不确定这有多简单？而且我不知道如何使用第一个 String 来调用函数名称？functionName(...functionParams);在我的脑海中，它会像这样工作：const colorFunction = (color, bool) => {  console.log("Colour: " + color);  console.log("Bool: " + bool);};对此有点困惑 - 我觉得我不是一百万英里，但我不确定！任何帮助都会很棒，谢谢！！编辑 -为什么？我有一个带有点击事件的反应组件，可以触发 redux 动作。理想情况下，此操作会将一些内容发送到我的减速器，并异步调用此“动态”函数。我可以用大量的 if/elses 来做到这一点，但我认为这不是一种非常干净的方法来实现这一点，如果以这种方式构建一个函数是可能的。

Answer 1

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

const someFunction = (functionName, functionParams) => {

    window[functionName]();

};

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

const someFunction = (functionName, functionParams) => {

    myObject[functionName]();

};

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

const someFunction = (functionName, functionParams) => {

    window[functionName](...functionParams);

};

否则，您始终可以依靠apply方法：

const someFunction = (functionName, functionParams) => {

    window[functionName].apply(null, functionParams);

};

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

编辑：如Bergi所提bind及的apply那样更正

Answer 2

您正在寻找的是Function#bind为了制作一个thunk - 基本上是一个不带参数的函数，它用于延迟计算。

使用.bind您可以对函数进行部分应用。在您的情况下，您只需应用所有参数，并只在最后留下执行步骤：

//your function

const colorFunction = (color, bool) => {

  console.log("Colour: " + color);

  console.log("Bool: " + bool);

};

//partially apply all argument to it

const thunk = colorFunction.bind(null, "red", true);

//this can now be passed around and executed at a later point

setTimeout(thunk, 3000);

console.log("wait 3 seconds");

由于函数是JavaScript中的第一类成员，因此您可以通过这种方式传递任何函数。如果你真的需要一个将其他人变成 thunk 的函数，那么你可以很容易地做到这一点：

const toThunk = (func, args) => func.bind(null, ...args);

哪个是你的，someFunction但为了更清楚起见，只重新命名了名称和参数。