Wie führe ich eine JavaScript-Funktion aus, wenn ich ihren Namen als String habe?

Question

Ich habe den Namen einer Funktion in JavaScript als String. Wie wandle ich diesen in einen Funktionszeiger um, damit ich ihn später aufrufen kann?

Je nach den Umständen kann es erforderlich sein, der Methode auch verschiedene Argumente zu übergeben.

Einige der Funktionen können die folgende Form haben namespace.namespace.function(args[...]) .

Answer 1

Es überrascht, dass setTimeout nicht erwähnt wird.

Um eine Funktion ohne Argumente auszuführen:

var functionWithoutArguments = function(){
    console.log("Executing functionWithoutArguments");
}
setTimeout("functionWithoutArguments()", 0);

Um eine Funktion mit Argumenten auszuführen:

var functionWithArguments = function(arg1, arg2) {
    console.log("Executing functionWithArguments", arg1, arg2);
}
setTimeout("functionWithArguments(10, 20)");

Zur Ausführung von Funktionen mit tiefem Namensraum:

var _very = {
    _deeply: {
        _defined: {
            _function: function(num1, num2) {
                console.log("Execution _very _deeply _defined _function : ", num1, num2);
            }
        }
    }
}
setTimeout("_very._deeply._defined._function(40,50)", 0);

Answer 2

Wie andere schon sagten, ist das definitiv die beste Option:

window['myfunction'](arguments)

Und wie Jason Bunting sagte funktioniert es nicht, wenn der Name Ihrer Funktion ein Objekt enthält:

window['myobject.myfunction'](arguments); // won't work
window['myobject']['myfunction'](arguments); // will work

Hier ist also meine Version einer Funktion, die alle Funktionen nach Namen ausführt (einschließlich eines Objekts oder nicht):

my = {
    code : {
        is : {
            nice : function(a, b){ alert(a + "," + b); }
        }
    }
};

guy = function(){ alert('awesome'); }

function executeFunctionByName(str, args)
{
    var arr = str.split('.');
    var fn = window[ arr[0] ];

    for (var i = 1; i < arr.length; i++)
    { fn = fn[ arr[i] ]; }
    fn.apply(window, args);
}

executeFunctionByName('my.code.is.nice', ['arg1', 'arg2']);
executeFunctionByName('guy');

Answer 3

  let t0 = () => { alert('red0') }
  var t1 = () =>{ alert('red1') }
  var t2 = () =>{ alert('red2') }
  var t3 = () =>{ alert('red3') }
  var t4 = () =>{ alert('red4') }
  var t5 = () =>{ alert('red5') }
  var t6 = () =>{ alert('red6') }

  function getSelection(type) {
    var evalSelection = {
      'title0': t0,
      'title1': t1,
      'title2': t2,
      'title3': t3,
      'title4': t4,
      'title5': t5,
      'title6': t6,
      'default': function() {
        return 'Default';
      }
    };
    return (evalSelection[type] || evalSelection['default'])();
  }
  getSelection('title1');

Eine mehr OOP-Lösung ...

Answer 4

Ein weiteres Detail zu den Beiträgen von Jason und Alex. Ich fand es hilfreich, dem Kontext einen Standardwert hinzuzufügen. Setzen Sie einfach context = context == undefined? window:context; am Anfang der Funktion. Sie können ändern window auf den von Ihnen bevorzugten Kontext umstellen, so dass Sie nicht jedes Mal dieselbe Variable übergeben müssen, wenn Sie die Funktion in Ihrem Standardkontext aufrufen.

Answer 5

Hier ist eine etwas robuste und wiederverwendbare Lösung, die ich für eines meiner Projekte implementiert habe.

A FunctionExecutor Konstruktor Funktion

Verwendung:

let executor = new FunctionExecutor();
executor.addFunction(two)
executor.addFunction(three)

executor.execute("one");
executor.execute("three");

Offensichtlich wurde in dem Projekt das Hinzufügen aller Funktionen, die namentlich aufgerufen werden mussten, in einer Schleife durchgeführt.

Die Funktion Executor:

function FunctionExecutor() {
  this.functions = {};

  this.addFunction = function (fn) {
    let fnName = fn.name;
    this.functions[fnName] = fn;
  }

  this.execute = function execute(fnName, ...args) {
    if (fnName in this.functions && typeof this.functions[fnName] === "function") {
      return this.functions[fnName](...args);
    }
    else {
      console.log("could not find " + fnName + " function");
    }
  }

  this.logFunctions = function () {
    console.log(this.functions);
  }
}

Beispiel für die Verwendung:

function two() {
  console.log("two"); 
}

function three() {
  console.log("three");
}

let executor = new FunctionExecutor();
executor.addFunction(two)
executor.addFunction(three)

executor.execute("one");
executor.execute("three");