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

Question

我正在努力动态创建一些Javascript,它将在构建时插入到网页中.

Javascript将用于根据另一个列表框中的选择填充列表框.当选择一个列表框时,它将根据列表框的选定值调用方法名称.

例如:

Listbox1包含:

颜色
形状

如果选择"颜色",则会调用填充另一个列表框的"populate_Colours"方法.
澄清我的问题:如何在Javascript中进行"populate_Colours"调用？

Answer 1

假设'populate_Colours'方法位于全局命名空间中,您可以使用以下代码,该代码利用可以访问所有对象属性的方式,就像对象是关联数组一样,并且所有全局对象实际上都是window宿主对象的属性.

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

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

Answer 2

正如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库一样有效地创建自己的命名空间.如果/当您在同一页面中包含多个单独的实用程序库时,这对于减少冲突非常有用,并且(设计的其他部分允许)可以更轻松地在其他页面中重用代码.

您也可以使用这样的对象,您可能会发现它更干净:

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文字表示法来进一步减少任何一种方法的语法,而不是那种synamic:

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

编辑:当然,对于更大的功能块,您可以将上面的内容扩展为非常常见的"模块模式",这是一种以有条理的方式封装代码功能的流行方式.

Answer 3

我建议不要为此目的使用global/ window/ eval.
相反,这样做:

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

var Handler={};

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

现在这样称呼它

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

输出:杰里

Answer 4

你可以这样做:

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

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

Answer 5

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

this['yourDynamicFcnName'](arguments);

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

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

Answer 6

在ServiceWorkeror 中Worker，替换window为self：

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

Worker 无权访问 DOM，因此window是无效引用。用于此目的的等效全局范围标识符是self。