Como chamo um método nomeado dinamicamente em Javascript?

Estou trabalhando na criação dinâmica de algum JavaScript que será inserido em uma página da web enquanto está sendo construída.

O JavaScript será usado para preencher um com listboxbase na seleção de outro listbox. Quando a seleção de um listboxfor alterada, ele chamará um nome de método com base no valor selecionado de listbox.

Por exemplo:

Listbox1 contém:

• Colours
• Shapes

Se Coloursfor selecionado, ele chamará um populate_Coloursmétodo que preenche outro listbox.

Para esclarecer minha pergunta: Como faço essa populate_Colourschamada em JavaScript?

Assumindo que o populate_Coloursmétodo está no namespace global, você pode usar o código a seguir, que explora que todas as propriedades do objeto podem ser acessadas como se o objeto fosse um array associativo e que todos os objetos globais são realmente propriedades do windowobjeto host.

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

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

Como Triptych aponta, você pode chamar qualquer função de escopo global localizando-a no conteúdo do objeto host.

Um método mais limpo, que polui o namespace global muito menos, é colocar explicitamente as funções em uma matriz diretamente, assim:

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

Essa matriz também pode ser uma propriedade de algum objeto diferente do objeto host global, o que significa que você pode criar seu próprio namespace com eficácia, como fazem muitas bibliotecas JS, como jQuery. Isso é útil para reduzir conflitos se / quando você incluir várias bibliotecas de utilitários separadas na mesma página e (se outras partes do seu design permitirem) pode tornar mais fácil reutilizar o código em outras páginas.

Você também pode usar um objeto como este, que pode ser mais limpo:

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

Observe que, com um array ou um objeto, você pode usar qualquer um dos métodos de configuração ou acesso às funções e, é claro, também pode armazenar outros objetos. Você pode reduzir ainda mais a sintaxe de qualquer um dos métodos para conteúdo que não seja tão dinâmico usando a notação literal JS como:

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

Editar: é claro que para blocos maiores de funcionalidade, você pode expandir o acima para o "padrão de módulo" muito comum, que é uma maneira popular de encapsular recursos de código de maneira organizada.

Eu recomendaria NÃO usar global/ window/ evalpara essa finalidade.
Em vez disso, faça desta forma:

define todos os métodos como propriedades de Handler:

var Handler={};

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

Agora chame assim

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

Produto: Jerry

você pode fazer assim:

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

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

Dentro de ServiceWorkerou Worker, substitua windowpor self:

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

Os trabalhadores não têm acesso ao DOM, portanto, windowé uma referência inválida. O identificador de escopo global equivalente para esse propósito é self.

Eu não recomendaria usar a janela como algumas das outras respostas sugerem. Use thise escopo de acordo.

this['yourDynamicFcnName'](arguments);

Outro truque interessante é chamar em escopos diferentes e usá-lo para herança. Digamos que você tenha aninhado a função e queira acessar o objeto janela global. Você poderia fazer isso:

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

Oi tente isso,

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

ele tratará dos próprios parâmetros.

Aqui está uma solução simples e funcional para verificar a existência de uma função e fazer a triagem dessa função dinamicamente por outra função;

Função de gatilho

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

e agora você pode gerar a função dinamicamente, talvez usando php como este

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

agora você pode chamar a função usando um evento gerado dinamicamente

<?php

$name_frm_somware ="runThis_func";

echo "<input type='button' value='Button' onclick='runDynmicFunction(\"".$name_frm_somware."\");'>";

?>

o código HTML exato que você precisa é

<input type="button" value="Button" onclick="runDynmicFunction('runThis_func');">

Experimente com isto:

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