Jak wywołać metodę o nazwie dynamicznej w JavaScript?

Pracuję nad dynamicznym utworzeniem kodu JavaScript, który zostanie wstawiony do strony internetowej w trakcie jej tworzenia.

JavaScript zostanie użyty do wypełnienia na listboxpodstawie wyboru w innym listbox. Gdy wybór jednej listboxzostanie zmieniony, wywoła ona nazwę metody na podstawie wybranej wartości listbox.

Na przykład:

Listbox1 zawiera:

• Colours
• Shapes

Jeśli Coloursjest zaznaczone, wywoła populate_Coloursmetodę, która zapełni inną listbox.

Aby wyjaśnić moje pytanie: jak wykonać to populate_Colourswywołanie w JavaScript?

Zakładając, że populate_Coloursmetoda znajduje się w globalnej przestrzeni nazw, możesz użyć następującego kodu, który wykorzystuje zarówno to, że wszystkie właściwości obiektu mogą być dostępne, jakby obiekt był tablicą asocjacyjną, jak i że wszystkie obiekty globalne są w rzeczywistości właściwościami windowobiektu hosta.

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

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

Jak wskazuje Triptych, możesz wywołać dowolną funkcję zasięgu globalnego, znajdując ją w zawartości obiektu hosta.

Czystszą metodą, która znacznie mniej zanieczyszcza globalną przestrzeń nazw, jest jawne umieszczenie funkcji w tablicy bezpośrednio, tak jak pokazano poniżej:

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

Ta tablica może również być właściwością jakiegoś obiektu innego niż globalny obiekt hosta, co oznacza, że ​​możesz efektywnie tworzyć własną przestrzeń nazw, tak jak robi to wiele bibliotek JS, takich jak jQuery. Jest to przydatne do zmniejszania konfliktów, jeśli / kiedy umieścisz wiele oddzielnych bibliotek narzędzi na tej samej stronie i (jeśli pozwalają na to inne części projektu), może ułatwić ponowne użycie kodu na innych stronach.

Możesz również użyć obiektu takiego jak ten, który może okazać się czystszy:

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

Zauważ, że w przypadku tablicy lub obiektu możesz użyć dowolnej metody ustawiania lub dostępu do funkcji i oczywiście możesz tam również przechowywać inne obiekty. Możesz dodatkowo zmniejszyć składnię obu metod w przypadku treści, które nie są tak dynamiczne, używając notacji literału JS, jak pokazano poniżej:

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

Edycja: oczywiście w przypadku większych bloków funkcjonalności możesz rozszerzyć powyższe do bardzo powszechnego „wzorca modułu”, który jest popularnym sposobem hermetyzacji funkcji kodu w zorganizowany sposób.

Radziłbym NIE używać global/ window/ evaldo tego celu.
Zamiast tego zrób to w ten sposób:

zdefiniuj wszystkie metody jako właściwości Handler:

var Handler={};

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

Teraz nazwij to tak

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

Wyjście: jerry

możesz to zrobić w ten sposób:

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

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

W ciągu ServiceWorkerlub Workerwymienić windowz self:

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

Pracownicy nie mają dostępu do DOM, dlatego windowjest to nieprawidłowe odniesienie. W tym celu równoważny globalny identyfikator zakresu to self.

Nie polecałbym korzystania z okna, jak sugerują niektóre inne odpowiedzi. Używaj thisi stosuj odpowiednio.

this['yourDynamicFcnName'](arguments);

Kolejną fajną sztuczką jest wywoływanie w różnych zakresach i używanie go do dziedziczenia. Powiedzmy, że funkcja została zagnieżdżona i chcesz uzyskać dostęp do globalnego obiektu okna. Możesz to zrobić:

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

Cześć, spróbuj tego,

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

sam obsłuży parametry.

Oto działające i proste rozwiązanie do sprawdzania istnienia funkcji i triaging, które działają dynamicznie przez inną funkcję;

Funkcja wyzwalania

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

i możesz teraz generować funkcję dynamicznie, na przykład używając php w ten sposób

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

teraz możesz wywołać funkcję używając dynamicznie generowanego zdarzenia

<?php

$name_frm_somware ="runThis_func";

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

?>

dokładny kod HTML, którego potrzebujesz, to

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

Spróbuj z tym:

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