Як я можу викликати динамічно названий метод у 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');

Вихід: Джеррі

ви можете зробити так:

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