Question

我正在努力动态创建一些Javascript，这些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指出的那样，你可以通过在宿主对象的内容中找到它来调用任何全局范围函数。

更简洁地污染全局命名空间的clean方法是直接将函数直接放入数组中：

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

在ServiceWorker或Worker内，将window替换为self：

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

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

Answer 6

嗨试试这个，

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

它将自己处理参数。

Answer 7

我不建议使用该窗口，如其他一些答案所建议的那样。使用#!/usr/bin/python3 class Counter: def __init__(self): cls = self.__class__ self._count = 0 cls.count = self.count_ref() def count_get(self): print(f'count_get: {self._count}') return self._count def count_set(self, value): self._count = value print(f'count_set: {self._count}') def count_del(self): print(f'count_del: {self._count}') def count_ref(self): cls = self.__class__ return property(fget=cls.count_get, fset=cls.count_set, fdel=cls.count_del) counter = Counter() counter.count for i in range(5): counter.count = i del counter.count ''' output ====== count_get: 0 count_set: 0 count_set: 1 count_set: 2 count_set: 3 count_set: 4 count_del: 4 '''并相应地确定范围。

this

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

this['yourDynamicFcnName'](arguments);

Answer 8

就去做

class User

  getName() 
  {   

    return "dilo";
   }

}

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

Answer 9

使用参数动态调用函数的简单函数：

+-- moment@2.27.0
+-- webpack@4.44.1
| +-- @webassemblyjs/ast@1.9.0
| | +-- @webassemblyjs/helper-module-context@1.9.0 deduped
| | +-- @webassemblyjs/helper-wasm-bytecode@1.9.0
| | `-- @webassemblyjs/wast-parser@1.9.0
| |   +-- @webassemblyjs/ast@1.9.0 deduped
| |   +-- @webassemblyjs/floating-point-hex-parser@1.9.0
| |   +-- @webassemblyjs/helper-api-error@1.9.0 deduped
| |   +-- @webassemblyjs/helper-code-frame@1.9.0
| |   | `-- @webassemblyjs/wast-printer@1.9.0 deduped
| |   +-- @webassemblyjs/helper-fsm@1.9.0
| |   ... (for brevity, I am not including the rest)

Answer 10

试试这些

使用动态名称调用函数，如下所示：

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))()

Answer 11

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

触发功能

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
    }
}

现在您可以动态生成函数，也许可以使用像这样的

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

Answer 12

试试这个：

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

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

12 个答案: