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().

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

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

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

Answer 6

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

Answer 7

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

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

Answer 10

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