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

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

JavaScript 将用于根据另一个 listbox中的选择填充 listbox。当一个 listbox的选择被改变时,它将根据 listbox的选择值调用一个方法名。

例如:

Listbox1包括:

  • Colours
  • Shapes

如果选择了 Colours,那么它将调用一个填充另一个 listboxpopulate_Colours方法。

为了澄清我的问题: 如何在 JavaScript 中进行 populate_Colours调用?

164340 次浏览

假设 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
};
};

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

试试这个,

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

它会自己处理参数。

你可以这样做:

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


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

试试这个:

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

为此,我建议 没有使用 global/window/eval
相反,应该这样做:

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

var Handler={};


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

这么说吧

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

输出: jerry


从不同文件导入函数时使用

import { func1, func2 } from "../utility";


const Handler= {
func1,
func2
};


Handler["func1"]("sic mundus");
Handler["func2"]("creatus est");

这里是一个工作和简单的解决方案,检查 函数的存在性动态分类那个功能的另一个功能;

触发功能

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');">

ServiceWorkerWorker中,用 self取代 window:

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

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

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

this['yourDynamicFcnName'](arguments);

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

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

一个用参数动态调用函数的简单函数:

this.callFunction = this.call_function = function(name) {
var args = Array.prototype.slice.call(arguments, 1);
return window[name].call(this, ...args);
};


function sayHello(name, age) {
console.log('hello ' + name + ', your\'e age is ' + age);
return some;
}


console.log(call_function('sayHello', 'john', 30)); // hello john, your'e age is 30


试试这个

使用动态名称调用函数,如下所示:

let dynamic_func_name = 'alert';
(new Function(dynamic_func_name+'()'))()

参数:

let dynamic_func_name = 'alert';
let para_1 = 'HAHAHA';
let para_2 = 'ABCD';
(new Function(`${dynamic_func_name}('${para_1}','${para_2}')`))()

运行动态代码:

let some_code = "alert('hahaha');";
(new Function(some_code))()

照做就是了

class User


getName()
{


return "dilo";
}


}


let user =new User();
let dynamicMethod='getName';
console.log(user[dynamicMethod]()); //dilo