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

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

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

Например:

Listbox1 содержит:

• Colours
• Shapes

Если Coloursон выбран, он вызовет populate_Coloursметод, который заполняет другой listbox.

Чтобы прояснить мой вопрос: как мне сделать этот populate_Coloursвызов в JavaScript?

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

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

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

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

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

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

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

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

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

var Handler={};

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

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

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

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

Кейс при импорте функций из разных файлов

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

const Handler= {
  func1,
  func2
};

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

сделать это можно так:

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

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

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

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

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

Я бы не рекомендовал использовать окно, как предлагают некоторые другие ответы. Используйте thisи объем соответственно.

this['yourDynamicFcnName'](arguments);

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

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

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

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

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

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

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

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

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

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