execute string as javascript function

Question

My object has a call back:

var MyObject = {
CallBack: "function (whichSubMenuIsClicked, subMenuObjectTag) { self.doStuff(whichSubMenuIsClicked.SubMenuItem, whichSubMenuIsClicked.HeaderColumnName, whichSubMenuIsClicked.DivIdentifier);}",
}

The callback is a string. Now I need to execute it using MyObject.CallBack(param1, param2) How can this be done using jquery or javascript. The self in this case is the original widget calling another widget. Thus the call back is on the original widget.

WTH would you write a function as a string if it shell be used as a function? — Bergi, Nov 23 '12 at 14:13
In case not all the answers are clear, **you should not be doing this**. If you are receiving a function in JSON and therefore it needs to be a string, then **you shouldn't be receiving a function in JSON**. This approach needs to be reconsidered. It is inefficient and, as with any use of `eval`, insecure. — zetlen, Nov 23 '12 at 14:19
@zetlen: It is only insecure when the source of the string can't be trusted - as with every script. Also have a look at [When is eval() not evil?](http://stackoverflow.com/q/197769/1048572) — Bergi, Nov 23 '12 at 14:35
@Bergi you are absolutely right. Opening up a new execution context has its own security problems, but they are edge cases compared to the overall problems with running any untrusted code. — zetlen, Nov 23 '12 at 15:38
@zetlen: You are receiving all/many functions as string: downloading them as .js file by a browser request. The key here is: can the source trusted or not. — g.pickardou, Jun 01 '15 at 06:10

score 3 · Answer 1 · answered Nov 23 '12 at 14:12

Just don't have the function as a string.

Have the function as a function:

var MyObject = {
   CallBack: function (whichSubMenuIsClicked, subMenuObjectTag) {
                  self.doStuff(whichSubMenuIsClicked.SubMenuItem, whichSubMenuIsClicked.HeaderColumnName, whichSubMenuIsClicked.DivIdentifier);
             }
}

Asad Saeeduddin · Accepted Answer · 2012-11-23T14:29:25.973

1

Use the Function constructor, which accepts a list of parameter names followed by the function body:

var MyObject = {
    CallBack: "self.doStuff(whichSubMenuIsClicked.SubMenuItem, whichSubMenuIsClicked.HeaderColumnName, whichSubMenuIsClicked.DivIdentifier)",
};

var myfunc = new Function("whichSubMenuIsClicked", "subMenuObjectTag", MyObject.CallBack);

edited Nov 23 '12 at 14:29

answered Nov 23 '12 at 14:17

Asad Saeeduddin

46,193
6
90
139

Bergi · Answer 3 · 2012-11-23T14:46:09.147

0

You should write the function as a function, as @Curt demonstrated. Only if you really have no other choice than getting it as a string (e.g. from user input), you would first need to parse it to executable code which you then could call. The way to do so is eval. A problem will become the reference self, which is not a variable inside your function and would be assumed global. Yet, you can use a with statement to work around that:

var MyObject = {
    CallBack: "function (whichSubMenuIsClicked, subMenuObjectTag) { self.doStuff(whichSubMenuIsClicked.SubMenuItem, whichSubMenuIsClicked.HeaderColumnName, whichSubMenuIsClicked.DivIdentifier);}",
};
var widget = {doStuff: console.log};
var fn;
with( {self: widget} ) {
    fn = eval( MyObject.CallBack );
}
fn({SubMenuItem: "…", HeaderColumnName: "…", DivIdentifier: "…"});

edited Nov 23 '12 at 14:46

answered Nov 23 '12 at 14:23

Bergi

630,263
148
957
1,375

You don't need eval, the `Function` constructor is purpose built for this. – Asad Saeeduddin Nov 23 '12 at 14:26
@Asad: Is it? Where is the difference? Also, the OP already has a full function string, and not a parameter list + function body code. Also, the `Function` constructor does not seem to be able to handle the `self` variable. – Bergi Nov 23 '12 at 14:29
The difference is that the Function constructor will never execute any statements passed to to it, whereas the `eval` function would execute any malicious statements sneaked in. This is pretty much the entire point behind the hubbub over the use of `eval`. I'm not sure what you mean by "handling the `self` variable". – Asad Saeeduddin Nov 23 '12 at 14:34
Of course `Function` does not execute any line of code - only you execute the resulting function. And malicious statements could be "sneaked" into a function body as well, there's no difference. – Bergi Nov 23 '12 at 14:38
Here's the difference: `eval('function(){};alert("LOL")')` vs. `new Function('//note that you can't sneak in code that will be immediately executed')` – Asad Saeeduddin Nov 23 '12 at 14:40
The `myfunc` your code generates references a `self` variable - which seems to be implied as global there. With `eval` and `with` you can assign a local variable. Try my function. – Bergi Nov 23 '12 at 14:44
@Asad: Ouch. Of course you would execute that function, otherwise you wouldn't need to generate it. `var myfunc = new Function('alert("LOL!");'); myfunc();` – Bergi Nov 23 '12 at 14:47
Yes, but I'm not talking about what the callback contains. My point is that it will always return a function, and not unexpectedly execute other code. If you have a callback that alerts `"LOL"` on loop, so be it, this is no different from property assigning `CallBack: function(){while(true){alert("LOL");}}`. We're not discussing the merits of what is in the function itself, we're talking about the ways of constructing it. At least `Function` follows a contract, and doesn't arbitrarily execute the code passed in. – Asad Saeeduddin Nov 23 '12 at 14:54
Sure, that's true. So if malicious code were injected, just the point of the unexpected execution would differ. However, I think `eval` is suited better for the OP's current problem (we still don't know the actual task) as it allows handling of variable scope and the OP already has a full `"function(){…}"` string which does not need to be parsed before. – Bergi Nov 23 '12 at 15:05

Starx · Answer 4 · 2012-11-23T14:33:41.603

-2

Very bad approach but You can do it by eval()

var MyObject = { CallBack: "AName = function(param1, param2) { alert(param1 + param2); }", }

eval(MyObject.CallBack+"(1,2)");

Demo

edited Nov 23 '12 at 14:33

answered Nov 23 '12 at 14:12

Starx

77,474
47
185
261

2

If the only solution to your problem is eval, change the problem. – Rory McCrossan Nov 23 '12 at 14:13
@RoryMcCrossan, "Never" really? – Starx Nov 23 '12 at 14:14
@RoryMcCrossan You certainly don't have to use it here, but there are indeed times when `eval` is useful. Metaprogramming, for instance! – zetlen Nov 23 '12 at 14:14
@Starx yup never. I edited my comment as you changed your answer, but you should never use eval. – Rory McCrossan Nov 23 '12 at 14:14
I didn't downvote you by the way as this does solve the problem. – Rory McCrossan Nov 23 '12 at 14:16
1

Doesn't deserve a downvote; yes `eval` is terrible, but this answers the OP's question. – Jeffrey Sweeney Nov 23 '12 at 14:16
@RoryMcCrossan, __NEVER__ is too much I think :P – Starx Nov 23 '12 at 14:16
@JeffreySweeney Does it though? OP wants to pass 2 parameters to that function. `MyObject.CallBack(param1, param2)` – Curtis Nov 23 '12 at 14:17
@Starx You don't really need the `eval` even within the ridiculous constraints of the problem. You can use the `Function` constructor. – Asad Saeeduddin Nov 23 '12 at 14:18
@Curt, Unquestionably yours is the right approach for many reason. Including the `parameter` problem you just mentioned. – Starx Nov 23 '12 at 14:18
@Starx That aside, I still don't think this would run. Your code snippet isn't passing parameters. – Curtis Nov 23 '12 at 14:21
@JeffreySweeney: No, it does. The variable of the OP is named `MyObject`, and also this code tries to call a string - resulting in a TypeError only. – Bergi Nov 23 '12 at 14:25
@Bergi, This was a stupid answer to start with. I have updated with working answer. – Starx Nov 23 '12 at 14:35

execute string as javascript function

4 Answers4