CODEWITHSUNDEEP
javascript
Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Call a JavaScript function name using a string?

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

Upvotes: 57

Views: 68597

Answers (10)

Greg
Greg

Reputation: 321638

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

Upvotes: 94

levinit
levinit

Reputation: 504

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

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

Upvotes: 1

cronoklee
cronoklee

Reputation: 6712

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

Upvotes: 0

Ben Tahar Nidhal
Ben Tahar Nidhal

Reputation: 97

Just an eval would do the job

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

Upvotes: 5

Anthony Scaife
Anthony Scaife

Reputation: 564

Perhaps?

setTimeout ( "myFunc()", 1 );

Upvotes: 6

geowa4
geowa4

Reputation: 41823

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

Upvotes: 3

Ikon
Ikon

Reputation: 660

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

Upvotes: 9

Thomas Kjørnes
Thomas Kjørnes

Reputation: 1927

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.

Upvotes: 1

Crescent Fresh
Crescent Fresh

Reputation: 116980

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

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

Upvotes: 3

dkretz
dkretz

Reputation: 37655

... or this[myFuncName];

Upvotes: 8

Related Questions