如何将String转换为JavaScript函数调用？

Question

我有一个字符串:

settings.functionName + '(' + t.parentNode.id + ')';

我想要转换成函数调用,如下所示:

clickedOnItem(IdofParent);

这当然必须在JavaScript中完成.当我发出警报时settings.functionName + '(' + t.parentNode.id + ')';,似乎可以使一切正常.我只需要调用它将转换成的函数.

传说:

settings.functionName = clickedOnItem

t.parentNode.id = IdofParent

Answer 1

看到我讨厌eval,而我并不孤单:

var fn = window[settings.functionName];
if(typeof fn === 'function') {
    fn(t.parentNode.id);
}

编辑:回复@Mahan的评论:在这个特殊情况下,settings.functionName会是"clickedOnItem".这将在运行时转换var fn = window[settings.functionName];为var fn = window["clickedOnItem"],将获得对它的引用function clickedOnItem (nodeId) {}.一旦我们在变量中引用了一个函数,我们就可以通过"调用变量"调用这个函数,即fn(t.parentNode.id)等于clickedOnItem(t.parentNode.id),这就是OP想要的.

更完整的例子:

/* Somewhere: */
window.settings = {
  /* [..] Other settings */
  functionName: 'clickedOnItem'
  /* , [..] More settings */
};

/* Later */
function clickedOnItem (nodeId) {
  /* Some cool event handling code here */
}

/* Even later */
var fn = window[settings.functionName]; 
/* note that settings.functionName could also be written
   as window.settings.functionName. In this case, we use the fact that window
   is the implied scope of global variables. */
if(typeof fn === 'function') {
    fn(t.parentNode.id);
}

Answer 2

window[settings.functionName](t.parentNode.id);

不需要eval()

Answer 3

这是一种更通用的方法来做同样的事情,同时支持范围:

// Get function from string, with or without scopes (by Nicolas Gauthier)
window.getFunctionFromString = function(string)
{
    var scope = window;
    var scopeSplit = string.split('.');
    for (i = 0; i < scopeSplit.length - 1; i++)
    {
        scope = scope[scopeSplit[i]];

        if (scope == undefined) return;
    }

    return scope[scopeSplit[scopeSplit.length - 1]];
}

希望它可以帮助一些人.

Answer 4

JavaScript有一个eval函数来计算字符串并将其作为代码执行:

eval(settings.functionName + '(' + t.parentNode.id + ')');

Answer 5

eval()是你需要做的功能,但我建议尝试其中一个来最小化eval的使用.希望其中一个对你有意义.

存储功能

将函数存储为函数而不是字符串,稍后将其用作函数.实际存储功能的地方取决于您.

var funcForLater = clickedOnItem;

// later is now
funcForLater(t.parentNode.id);

要么

someObject.funcForLater = clickedOnItem;    
// later is now    
(someObject.funcForLater)(t.parentNode.id);

存储功能名称

即使您必须将函数名称存储为字符串,也可以通过执行操作来最小化复杂性

(eval(settings.functionName))(t.parentNode.id);

这可以最大限度地减少你必须构建和评估的Javascript数量.

处理程序字典

将您可能需要的所有动作函数放入对象中,并使用字符串将其称为字典样式.

// global
itemActions = { click: clickedOnItem, rightClick: rightClickedOnItem /* etc */ };

// Later...
var actionName = "click"; // Or wherever you got the action name
var actionToDo = itemActions[actionName];
actionToDo(t.parentNode.id);

(次要注意:如果在这里您使用了语法,itemActions[actionName](t.parentNode.id);那么该函数将被称为方法itemActions.)

Answer 6

虽然我喜欢第一个答案并且我讨厌eval,但我想补充说还有另一种方法(类似于eval)所以如果你可以绕过它并且不使用它,你最好这样做.但在某些情况下,您可能希望在某个ajax调用之前或之后调用一些javascript代码,如果您在自定义属性而不是ajax中使用此代码,则可以使用此代码:

    var executeBefore = $(el).attr("data-execute-before-ajax");
    if (executeBefore != "") {
        var fn = new Function(executeBefore);
        fn();
    }

或者最终将其存储在函数缓存中,如果您可能需要多次调用它.

再次 - 如果您有其他方法,请不要使用eval或此方法.

Answer 7

如果settings.functionName已经是一个函数,你可以这样做:

settings.functionName(t.parentNode.id);

否则,如果settings.functionName只是函数的名称,这也应该有效:

if (typeof window[settings.functionName] == "function") {
    window[settings.functionName](t.parentNode.id);
}

Answer 8

我希望能够将函数名称作为字符串,调用它,并将参数传递给函数.我无法得到这个问题的选定答案,但这个答案完全解释了,这是一个简短的演示.

function test_function(argument)    {
    alert('This function ' + argument); 
}

functionName = 'test_function';

window[functionName]('works!');

这也适用于多个参数.