How to dynamically attach a function to an object

问题

I know there are a few similar questions already on SO (1, 2, 3) but unfortunately my limited knowledge of JS doesn't allow me to extrapolate the scenarios to my personal use case, hence this question.

I have the following piece of code which allows me to dynamically attach to and call from an object some functions, which works fine (available on JsFiddle):

JavaScript:

$.extend(true, window, {
    "MyPlugin": {
        "dynamicFunction": dummy_function
     }                
});

function dummy_function() {

}

function real_function(string) {
    alert(string);
}

function dynamic_call(function_name, text) {
    MyPlugin["dynamicFunction"] = eval(function_name);
    MyPlugin["dynamicFunction"](text);
}

HTML:

<button onClick="dynamic_call('real_function','some text');">click me</button>

UPDATE:

Funny enough, I was trying to replicate an issue I have whereby my function is scoped locally, but I ended writing an example where it isn't :) (I told you JS isn't my thing). Therefore all window[function_name] answers are correct, although I accepted James Allardice's because he extrapolated to the issue I was trying to resolve but didn't raise.

How can I achieve the same functionality without the use of eval?

回答1:

Function declarations in the global scope become properties of window, so you can use square bracket syntax:

function dynamic_call(function_name, text) {
    MyPlugin["dynamicFunction"] = window[function_name];
    MyPlugin["dynamicFunction"](text);
}

If your function is not in the global scope, you could make it the value of a property of some object:

var myFuncs = {
    real_function: function () {
        alert(string);
    }
};

Then you can simply use:

MyPlugin["dynamicFunction"] = myFuncs[function_name];

回答2:

You cannot do this without eval if the function is scoped locally. You can only do it without eval if the function is property of some object. This includes global object, so global functions can be done without eval.

With a global function or function that is property of some object:

MyPlugin["dynamicFunction"] = window[function_name];//window references global object

回答3:

If real_function is a gloabl function, you just call

window[function_name](text);

回答4:

I know this is not the exact question, but if you can just pass in the function as a parameter, like this:

<button onClick="dynamic_call(real_function,'some text');">click me</button>

function dynamic_call(f, text) {
   MyPlugin["dynamicFunction"] = f;
   MyPlugin["dynamicFunction"](text);
}

回答5:

Instead of using eval, reference function_name from the window object:

MyPlugin["dynamicFunction"] = window[function_name];

来源：https://stackoverflow.com/questions/11471175/how-to-dynamically-attach-a-function-to-an-object

标签

javascript

function

object

dynamic