Call a JavaScript function name using a string?

Question

How can I hook up an event to a function name I have defined as a string?

I'm using Prototype.js, although this is not Prototype-speficic.

$(inputId).observe('click', formData.fields[x].onclick);

This would result in JavaScript complaining that my handler is not a function. I would prefer not us use eval().

• oHo: possible duplicate of How to execute a JavaScript function when I have its name as a string

Answer 1

Property accessors can be used to access any object's properties or functions.

If the function is in the global scope, you can get it using the window object:

var myFunc = window[myFuncName];

This also works within the this scope:

var myFunc = this[myFuncName];

• annakata: ...or scope[myFuncName] in general
• Greg: Yup, as long as you have a handle to the scope somewhere, this'll work
• jocull: Is there a way to do this in a Node.js module?

Answer 2

I have worked on this problem, as I needed a function like this. Here is my sandbox code, not thoroughly tested, but can be a startpoint for others. Note that there is one eval() in the code as I couldn't figure out how to bypass that step, maybe a javascript quirk and cannot be done in any other way. Let me know if there is a way to get rid of eval() here!

executeFunctionByName = function(functionName)
{
 var args = Array.prototype.slice.call(arguments).splice(1);
 //debug
 console.log('args:', args);
 var namespaces = functionName.split(".");
 //debug
 console.log('namespaces:', namespaces);
 var func = namespaces.pop();
 //debug
 console.log('func:', func);
 ns = namespaces.join('.');
 //debug
 console.log('namespace:', ns);
 if(ns == '')
 {
 ns = 'window';
 }
 ns = eval(ns);
 //debug
 console.log('evaled namespace:', ns);
 return ns[func].apply(ns, args);
}
core = {
 paragraph: {
 titlebar: {
 user: "ddd",
 getUser: function(name)
 {
 this.user = name;
 return this.user;
 }
 }
 }
}
var testf = function()
{
 alert('dkdkdkd');
}
var x = executeFunctionByName('core.paragraph.titlebar.getUser', 'Ikon');
executeFunctionByName('testf');

• Cristian Vrabie: To get rid of the eval you could navigate the namespaces from the window object: var func = window; for(var i=0;i<namespaces.length;++i){ func = func[namespaces[i]]; }
• Arun G: Thanks Ikon. I tried many ways, this answer will solve my problem.

Answer 3

... or this[myFuncName];

Answer 4

Perhaps?

setTimeout ( "myFunc()", 1 );

Answer 5

Just an eval would do the job

var call = eval("method_name").call(args);

• Bishal Paudel: Great! this worked... thanks; You forgot . in between. var call = eval("mathod_name").call(args);

Answer 6

Looks like formData.fields[x].onclick holds the name of a global function? If so try:

$(inputId).observe('click', window[formData.fields[x].onclick]);

Answer 7

window.myFunction === window["myFunction"]

Answer 8

Do you know what the onclick property contains or what type it is? I assume this is prototype specific stuff, as "fields" does not exist in DOM forms.

Answer 9

update:--- use ES6 export and import

a.js

const fn = {
 aaa: function() {
 //code
 },
 bbb: function() {
 //code
 },
 //codes ....
 nnn: function() {
 //code
 }
}
export default fn

b.js

 import someFn from './a'
 //eg
 const str1='aaa'
 const str2 = 'bbb'
 someFn[str1]()

---

• eval('str') (obsolete feature https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features )

• setTimeout('str') setInterval('str')

• window['str'] (but...sometimes,global object is not window)

• new Function('str')

These methods above always not be recommend by some reasons, but they are really convenient to use. These methods below are safe, but really not conveninet to use.

• switch...case (or if...else)

  switch(str){
   case 'str1': 
   fn1()
   break
   case 'str2':
   fn2
   //and so on
  }
  

• put functions in a object

  const fn={
   str1:fn1,
   str2:fn2
   //and so on
  }
  fn[str1] //call function
  

Answer 10

If you need to call a string function with arguments, do this:

window[stringFunctionName].apply( window, arrayOfArguments )

You can use scope in place of window if preferred