如何在Javascript中调用动态命名方法？

我正在动态创建一些JavaScript，这些JavaScript将在构建时插入到网页中。

JavaScript将listbox根据另一个中的选择来填充一个listbox。listbox更改一个选项时，它将基于的选定值调用方法名称listbox。

例如：

Listbox1 包含：

• Colours
• Shapes

如果Colours选择，它将调用populate_Colours填充另一个方法listbox。

为了澄清我的问题：如何populate_Colours使用JavaScript 进行调用？

假定该populate_Colours方法位于全局名称空间中，则可以使用以下代码，该代码利用以下两种方式：可以访问所有对象属性（就像该对象是关联数组一样），并且所有全局对象实际上都是window宿主对象的属性。

var method_name = "Colours";
var method_prefix = "populate_";

// Call function:
window[method_prefix + method_name](arg1, arg2);

如Triptych所指出的，您可以通过在宿主对象的内容中找到任何全局作用域函数来调用它。

一种更清洁的方法，它对全局名称空间的污染要少得多，它是将函数直接显式地放入数组中，如下所示：

var dyn_functions = [];
dyn_functions['populate_Colours'] = function (arg1, arg2) { 
                // function body
           };
dyn_functions['populate_Shapes'] = function (arg1, arg2) { 
                // function body
           };
// calling one of the functions
var result = dyn_functions['populate_Shapes'](1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions.populate_Shapes(1, 2);

该数组也可以是全局宿主对象以外的某些对象的属性，这意味着您可以像许多JS库（如jQuery）一样有效地创建自己的名称空间。如果/当您在同一页面中包含多个单独的实用程序库时，这对于减少冲突很有用，并且（在设计的其他部分允许的情况下）可以使重用其他页面中的代码更加容易。

您还可以使用这样的对象，您可能会发现它更干净：

var dyn_functions = {};
dyn_functions.populate_Colours = function (arg1, arg2) { 
                // function body
           };
dyn_functions['populate_Shapes'] = function (arg1, arg2) { 
                // function body
           };
// calling one of the functions
var result = dyn_functions.populate_Shapes(1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions['populate_Shapes'](1, 2);

请注意，无论是数组还是对象，都可以使用设置或访问函数的方法，当然也可以在其中存储其他对象。您可以通过使用JS文字表示法进一步针对非动态内容减少这两种方法的语法：

var dyn_functions = {
           populate_Colours:function (arg1, arg2) { 
                // function body
           };
         , populate_Shapes:function (arg1, arg2) { 
                // function body
           };
};

编辑：当然，对于更大的功能块，您可以将以上内容扩展为非常常见的“模块模式”，这是一种以有组织的方式封装代码功能的流行方法。

我建议不要为此使用global/ window/ eval。
相反，请按照以下方式进行操作：

将所有方法定义为Handler的属性：

var Handler={};

Handler.application_run = function (name) {
console.log(name)
}

现在这样称呼它

var somefunc = "application_run";
Handler[somefunc]('jerry');

输出：杰瑞

您可以这样做：

function MyClass() {
    this.abc = function() {
        alert("abc");
    }
}

var myObject = new MyClass();
myObject["abc"]();

在ServiceWorker或中Worker，替换window为self：

self[method_prefix + method_name](arg1, arg2);

工作人员无法访问DOM，因此window是无效的引用。为此目的等效的全局范围标识符为self。

我不建议像其他答案一样使用该窗口。相应地使用this和范围。

this['yourDynamicFcnName'](arguments);

另一个巧妙的技巧是在不同的范围内调用并将其用于继承。假设您已经嵌套了函数并希望访问全局窗口对象。您可以这样做：

this['yourDynamicFcnName'].call(window, arguments);

嗨，试试看

 var callback_function = new Function(functionName);
 callback_function();

它将处理参数本身。

这里是一个工作和用于检查简单的解决方案的功能的存在和动态优先分配该功能由另一功能;

触发功能

function runDynmicFunction(functionname){ 

    if (typeof window[functionname] == "function"  ) { //check availability

        window[functionname]("this is from the function it "); //run function and pass a parameter to it
    }
}

现在您可以像这样使用php动态生成函数

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

现在您可以使用动态生成的事件来调用该函数

<?php

$name_frm_somware ="runThis_func";

echo "<input type='button' value='Button' onclick='runDynmicFunction(\"".$name_frm_somware."\");'>";

?>

您需要的确切HTML代码是

<input type="button" value="Button" onclick="runDynmicFunction('runThis_func');">

试试这个：

var fn_name = "Colours",
fn = eval("populate_"+fn_name);
fn(args1,argsN);