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

Question

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

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

Например:

Список1 содержит:

Цвет
Формы

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

Answer 1

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

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

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

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

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

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

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

Функция триггера

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

Answer 8

Попробуйте с этим:

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