Как вызвать динамически называемый метод в Javascript?

Я работаю над динамическим созданием Javascript, который будет вставлен на веб-страницу по мере ее создания.

Javascript будет использоваться для заполнения списка на основе выбора в другом списке. Когда выбор одного списка изменяется, он вызывается именем метода на основе выбранного значения списка.

Например:

Listbox1 содержит:

Цвета изображения Формы

Если выбрано "Цвета", оно вызовет метод "populate_Colours", который заполняет другой список.
Чтобы прояснить мой вопрос: как мне сделать этот вызов "populate_Colours" в Javascript?

Ответ 1

Предполагая, что метод populate_Colours находится в глобальном пространстве имен, вы можете использовать следующий код, который использует оба свойства объекта, к которым можно получить доступ, как если бы объект был ассоциативным массивом и что все глобальные объекты на самом деле являются свойствами хост-объект window.

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

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

Ответ 2

Как указывает Триптих, вы можете вызвать любую глобальную функцию области видимости, найдя ее в содержимом объекта хоста.

Более чистый метод, который значительно загрязняет глобальное пространство имен, заключается в том, чтобы явно помещать функции в массив непосредственно так:

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

Обратите внимание, что с помощью массива или объекта вы можете использовать любой способ установки или доступа к функциям и, конечно же, хранить там и другие объекты. Вы также можете уменьшить синтаксис любого из методов для contant, который не является синтаксическим с использованием буквенной нотации JS следующим образом:

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

Редактирование: конечно, для более крупных блоков функциональности вы можете развернуть это выше до очень распространенного "шаблона модуля", который является популярным способом инкапсуляции функций кода организованным образом.

Ответ 3

Я бы порекомендовал НЕ использовать global/window/eval для этой цели.
Вместо этого сделайте это так:

определим все методы как свойства Handler:

var Handler={};

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

Теперь назовите это так

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

Выход: Джерри

Ответ 4

вы можете сделать это следующим образом:

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

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

Ответ 5

Привет, попробуйте это,

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

он будет обрабатывать сами параметры.

Ответ 6

для простой функции javascript, мы можем использовать -

var function_name='additionFunction';
var argMap={"name":"yogesh"};
var argArray=[{"name":"yogesh"}];

window[function_name](argMap);

или

window[function_name](argArray);

или

window[function_name](argMap,argArray);

при условии, что так называемая функция существует и имеет такие параметры в реальной реализации.

Ответ 7

В ServiceWorker или Worker замените window на self:

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

Рабочие не имеют доступа к DOM, поэтому window является недействительной ссылкой. Эквивалентный идентификатор глобальной области видимости для этой цели - self.

Ответ 8

Вот рабочее и простое решение для проверки существования функции и сортировки, которая динамически функционирует с помощью другой функции;

Функция запуска

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

Ответ 9

Попробуйте следующее:

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