Cómo ejecutar una función de JavaScript cuando tengo su nombre como una cadena

Tengo el nombre de una función en JavaScript como una cadena. ¿Cómo convierto eso en un puntero de función para poder llamarlo más tarde?

Dependiendo de las circunstancias, es posible que necesite pasar varios argumentos al método también.

Algunas de las funciones pueden tomar la forma de namespace.namespace.function(args[...]).

No lo use a evalmenos que absolutamente, positivamente no tenga otra opción.

Como se ha mencionado, usar algo como esto sería la mejor manera de hacerlo:

window["functionName"](arguments);

Sin embargo, eso no funcionará con una función de espacio de nombres:

window["My.Namespace.functionName"](arguments); // fail

Así es como lo harías:

window["My"]["Namespace"]["functionName"](arguments); // succeeds

Para facilitarlo y proporcionar cierta flexibilidad, aquí hay una función de conveniencia:

function executeFunctionByName(functionName, context /*, args */) {
  var args = Array.prototype.slice.call(arguments, 2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
}

Lo llamarías así:

executeFunctionByName("My.Namespace.functionName", window, arguments);

Tenga en cuenta que puede pasar en el contexto que desee, por lo que esto haría lo mismo que arriba:

executeFunctionByName("Namespace.functionName", My, arguments);

Solo pensé en publicar una versión ligeramente alterada de la función muy útil de Jason Bunting .

Primero, he simplificado la primera declaración al proporcionar un segundo parámetro para cortar () . La versión original funcionaba bien en todos los navegadores, excepto IE.

En segundo lugar, he reemplazado esto con contexto en la declaración de devolución; de lo contrario, esto siempre apuntaba a la ventana cuando se ejecutaba la función de destino.

function executeFunctionByName(functionName, context /*, args */) {
    var args = Array.prototype.slice.call(arguments, 2);
    var namespaces = functionName.split(".");
    var func = namespaces.pop();
    for (var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
    }
    return context[func].apply(context, args);
}

La respuesta a esta otra pregunta le muestra cómo hacerlo: ¿ Javascript equivalente a los locales de Python ()?

Básicamente, puedes decir

window["foo"](arg1, arg2);

o como muchos otros han sugerido, puede usar eval:

eval(fname)(arg1, arg2);

aunque esto es extremadamente inseguro a menos que esté absolutamente seguro de lo que está evaluando.

¿No podrías simplemente hacer esto?

var codeToExecute = "My.Namespace.functionName()";
var tmpFunc = new Function(codeToExecute);
tmpFunc();

También puede ejecutar cualquier otro JavaScript utilizando este método.

Creo que una forma elegante de hacerlo es definiendo sus funciones en un objeto hash. Entonces puede tener una referencia a esas funciones desde el hash usando la cadena. p.ej

var customObject = {
  customFunction: function(param){...}
};

Entonces puedes llamar:

customObject['customFunction'](param);

Donde customFunction será una cadena que coincida con una función definida en su objeto.

Con ES6 puede acceder a los métodos de clase por nombre:

class X {
  method1(){
    console.log("1");
  }
  method2(){
    this['method1']();
    console.log("2");
  }
}
let x  = new X();
x['method2']();

la salida sería:

1
2

Dos cosas:

• evite evaluar, es terriblemente peligroso y lento

• en segundo lugar, no importa dónde exista su función, la "globalidad" es irrelevante. x.y.foo()puede ser activado a través x.y['foo']()o x['y']['foo']()ni siquiera window['x']['y']['foo'](). Puedes encadenar indefinidamente de esta manera.

Todas las respuestas suponen que se puede acceder a las funciones a través del alcance global (ventana). Sin embargo, el OP no hizo esta suposición.

Si las funciones viven en un ámbito local (también conocido como cierre) y no están referenciadas por algún otro objeto local, mala suerte: debe usar eval()AFAIK, vea llamar dinámicamente a la función local en javascript

Solo necesita convertir su cadena en un puntero por window[<method name>]. ejemplo:

var function_name = "string";
function_name = window[function_name];

y ahora puedes usarlo como un puntero.

Aquí está mi contribución a las excelentes respuestas de Jason Bunting / Alex Nazarov, donde incluyo la verificación de errores solicitada por Crashalot.

Dado este preámbulo (artificial):

a = function( args ) {
    console.log( 'global func passed:' );
    for( var i = 0; i < arguments.length; i++ ) {
        console.log( '-> ' + arguments[ i ] );
    }
};
ns = {};
ns.a = function( args ) {
    console.log( 'namespace func passed:' );
    for( var i = 0; i < arguments.length; i++ ) {
        console.log( '-> ' + arguments[ i ] ); 
    }
};
name = 'nsa';
n_s_a = [ 'Snowden' ];
noSuchAgency = function(){};

entonces la siguiente función:

function executeFunctionByName( functionName, context /*, args */ ) {
    var args, namespaces, func;

    if( typeof functionName === 'undefined' ) { throw 'function name not specified'; }

    if( typeof eval( functionName ) !== 'function' ) { throw functionName + ' is not a function'; }

    if( typeof context !== 'undefined' ) { 
        if( typeof context === 'object' && context instanceof Array === false ) { 
            if( typeof context[ functionName ] !== 'function' ) {
                throw context + '.' + functionName + ' is not a function';
            }
            args = Array.prototype.slice.call( arguments, 2 );

        } else {
            args = Array.prototype.slice.call( arguments, 1 );
            context = window;
        }

    } else {
        context = window;
    }

    namespaces = functionName.split( "." );
    func = namespaces.pop();

    for( var i = 0; i < namespaces.length; i++ ) {
        context = context[ namespaces[ i ] ];
    }

    return context[ func ].apply( context, args );
}

le permitirá llamar a una función de JavaScript por el nombre almacenado en una cadena, ya sea de espacios de nombres o global, con o sin argumentos (incluidos los objetos de matriz), proporcionando comentarios sobre los errores encontrados (con suerte, atrapándolos).

La salida de muestra muestra cómo funciona:

// calling a global function without parms
executeFunctionByName( 'a' );
  /* OUTPUT:
  global func passed:
  */

// calling a global function passing a number (with implicit window context)
executeFunctionByName( 'a', 123 );
  /* OUTPUT:
  global func passed:
  -> 123
  */

// calling a namespaced function without parms
executeFunctionByName( 'ns.a' );
  /* OUTPUT:
  namespace func passed:
  */

// calling a namespaced function passing a string literal
executeFunctionByName( 'ns.a', 'No Such Agency!' );
  /* OUTPUT:
  namespace func passed:
  -> No Such Agency!
  */

// calling a namespaced function, with explicit context as separate arg, passing a string literal and array 
executeFunctionByName( 'a', ns, 'No Such Agency!', [ 007, 'is the man' ] );
  /* OUTPUT:
  namespace func passed:
  -> No Such Agency!
  -> 7,is the man
  */

// calling a global function passing a string variable (with implicit window context)
executeFunctionByName( 'a', name );
  /* OUTPUT:
  global func passed:
  -> nsa
  */

// calling a non-existing function via string literal
executeFunctionByName( 'n_s_a' );
  /* OUTPUT:
  Uncaught n_s_a is not a function
  */

// calling a non-existing function by string variable
executeFunctionByName( n_s_a );
  /* OUTPUT:
  Uncaught Snowden is not a function
  */

// calling an existing function with the wrong namespace reference
executeFunctionByName( 'a', {} );
  /* OUTPUT:
  Uncaught [object Object].a is not a function
  */

// calling no function
executeFunctionByName();
  /* OUTPUT:
  Uncaught function name not specified
  */

// calling by empty string
executeFunctionByName( '' );
  /* OUTPUT:
  Uncaught  is not a function
  */

// calling an existing global function with a namespace reference
executeFunctionByName( 'noSuchAgency', ns );
  /* OUTPUT:
  Uncaught [object Object].noSuchAgency is not a function
  */

Dependiendo de dónde se encuentre, también puede usar:

this["funcname"]();
self["funcname"]();
window["funcname"]();
top["funcname"]();
globalThis["funcname"]();

o, en nodejs

global["funcname"]()

Si desea llamar a una función de un objeto en lugar de una función global con window["functionName"]. Puedes hacerlo como;

var myObject=new Object();
myObject["functionName"](arguments);

Ejemplo:

var now=new Date();
now["getFullYear"]()

¡¡¡TEN CUIDADO!!!

Uno debe tratar de evitar llamar a una función por cadena en JavaScript por dos razones:

Razón 1: Algunos ofuscadores de código destruirán su código ya que cambiarán los nombres de las funciones, lo que invalidará la cadena.

Razón 2: es mucho más difícil mantener el código que utiliza esta metodología, ya que es mucho más difícil localizar el uso de los métodos llamados por una cadena.

Aquí está mi enfoque Es6 que le permite llamar a su función por su nombre como cadena o su nombre de función y también le permite pasar diferentes números de argumentos a diferentes tipos de funciones:

function fnCall(fn, ...args)
{
  let func = (typeof fn =="string")?window[fn]:fn;
  if (typeof func == "function") func(...args);
  else throw new Error(`${fn} is Not a function!`);
}


function example1(arg1){console.log(arg1)}
function example2(arg1, arg2){console.log(arg1 + "  and   " + arg2)}
function example3(){console.log("No arguments!")}

fnCall("example1", "test_1");
fnCall("example2", "test_2", "test3");
fnCall(example3);
fnCall("example4"); // should raise an error in console

Sorprendido de no ver mención de setTimeout.

Para ejecutar una función sin argumentos:

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

Para ejecutar la función con argumentos:

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

Para ejecutar una función de espacios de nombres profundos:

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

Entonces, como otros dijeron, definitivamente la mejor opción es:

window['myfunction'](arguments)

Y como dijo Jason Bunting , no funcionará si el nombre de su función incluye un objeto:

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

Así que aquí está mi versión de una función que ejecutará todas las funciones por nombre (incluido un objeto o no):

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

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

Una solución más OOP ...

Un detalle más sobre las publicaciones de Jason y Alex. Me pareció útil agregar un valor predeterminado al contexto. Solo ponlo context = context == undefined? window:context;al comienzo de la función. Puede cambiar windowa su contexto preferido, y luego no necesitará pasar la misma variable cada vez que llame a esto en su contexto predeterminado.

Para agregar a la respuesta de Jason Bunting, si está usando nodejs o algo (y esto también funciona en dom js), puede usar en thislugar de window(y recuerde: eval es malo :

this['fun'+'ctionName']();

Hay algo muy similar en mi código. Tengo una cadena generada por el servidor que contiene un nombre de función que necesito pasar como devolución de llamada para una biblioteca de terceros. Entonces tengo un código que toma la cadena y devuelve un "puntero" a la función, o nulo si no se encuentra.

Mi solución fue muy similar a la " función muy útil de Jason Bunting " * , aunque no se ejecuta automáticamente, y el contexto siempre está en la ventana. Pero esto se puede modificar fácilmente.

Esperemos que esto sea útil para alguien.

/**
 * Converts a string containing a function or object method name to a function pointer.
 * @param  string   func
 * @return function
 */
function getFuncFromString(func) {
    // if already a function, return
    if (typeof func === 'function') return func;

    // if string, try to find function or method of object (of "obj.func" format)
    if (typeof func === 'string') {
        if (!func.length) return null;
        var target = window;
        var func = func.split('.');
        while (func.length) {
            var ns = func.shift();
            if (typeof target[ns] === 'undefined') return null;
            target = target[ns];
        }
        if (typeof target === 'function') return target;
    }

    // return null if could not parse
    return null;
}

También hay alguna forma muy útil.

http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

var arrayMaker = {  
    someProperty: 'some value here',  
    make: function (arg1, arg2) {  
        return [ this, arg1, arg2 ];  
    },
    execute: function_name
};

No puedo resistirme a mencionar otro truco, que ayuda si tienes un número desconocido de argumentos que también se pasan como parte de la cadena que contiene el nombre de la función. Por ejemplo:

var annoyingstring = 'call_my_func(123, true, "blah")';

Si su Javascript se ejecuta en una página HTML, todo lo que necesita es un enlace invisible; puede pasar una cadena al onclickatributo y llamar al clickmétodo.

<a href="#" id="link_secret"><!-- invisible --></a>

$('#link_secret').attr('onclick', annoyingstring);
$('#link_secret').click();

O cree el <a>elemento en tiempo de ejecución.

La forma más fácil es acceder a ella como si tuviera un elemento

window.ClientSideValidations.forms.location_form

es igual que

window.ClientSideValidations.forms['location_form']

Puede llamar a la función javascript dentro de eval("functionname as string")cualquiera. Como a continuación: (eval es pura función de javascript)

function testfunc(){
    return "hello world";
}

$( document ).ready(function() {

     $("div").html(eval("testfunc"));
});

Ejemplo de trabajo: https://jsfiddle.net/suatatan/24ms0fna/4/

Esto es trabajo para mí:

var command = "Add";
var tempFunction = new Function("Arg1","Arg2", "window." + command + "(Arg1,Arg2)");
tempFunction(x,y);

Espero que esto funcione.

No creo que necesite funciones intermedias complicadas o eval o dependa de variables globales como window:

function fun1(arg) {
  console.log(arg);
}

function fun2(arg) {
  console.log(arg);
}

const operations = {
  fun1,
  fun2
};

let temp = "fun1";

try {
  // You have to use square brackets property access
  operations["fun1"]("Hello World");
  operations["fun2"]("Hello World");
  // You can use variables
  operations[temp]("Hello World");
} catch (error) {
  console.error(error);
}

También funcionará con funciones importadas:

// mode.js
export function fun1(arg) {
  console.log(arg);
}

export function fun2(arg) {
  console.log(arg);
}

// index.js
import { fun1, fun2 } from "./mod";

const operations = {
  fun1,
  fun2
};

try {
  operations["fun1"]("Hello World");
  operations["fun2"]("Hello World");
} catch (error) {
  console.error(error);
}

Sin usar eval('function()'), podría crear una nueva función usando new Function(strName). El siguiente código se probó con FF, Chrome, IE.

<html>
<body>
<button onclick="test()">Try it</button>
</body>
</html>
<script type="text/javascript">

  function test() {
    try {    
        var fnName = "myFunction()";
        var fn = new Function(fnName);
        fn();
      } catch (err) {
        console.log("error:"+err.message);
      }
  }

  function myFunction() {
    console.log('Executing myFunction()');
  }

</script>

use this

function executeFunctionByName(functionName, context /*, args */) {
      var args = [].slice.call(arguments).splice(2);
      var namespaces = functionName.split(".");
      var func = namespaces.pop();
      for(var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
      }
      return context[func].apply(context, args);
    }

Mira básico:

var namefunction = 'jspure'; // String

function jspure(msg1 = '', msg2 = '') { 
  console.log(msg1+(msg2!=''?'/'+msg2:''));
} // multiple argument

// Results ur test
window[namefunction]('hello','hello again'); // something...
eval[namefunction] = 'hello'; // use string or something, but its eval just one argument and not exist multiple

Existe otro tipo de función es class y mira el ejemplo nils petersohn

Gracias por la respuesta muy útil. Estoy usando la función de Jason Bunting en mis proyectos.

Lo extendí para usarlo con un tiempo de espera opcional, porque la forma normal de establecer un tiempo de espera no funcionará. Ver la pregunta de abhishekisnot

function executeFunctionByName(functionName, context, timeout /*, args */ ) {
	var args = Array.prototype.slice.call(arguments, 3);
	var namespaces = functionName.split(".");
	var func = namespaces.pop();
	for (var i = 0; i < namespaces.length; i++) {
		context = context[namespaces[i]];
	}
	var timeoutID = setTimeout(
		function(){ context[func].apply(context, args)},
		timeout
	);
    return timeoutID;
}

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

console.log('now wait')
executeFunctionByName("_very._deeply._defined._function", window, 2000, 40, 50 );