create anonymous methods using "eval" - browser specific behaviour

Question

Hello everybody.

I working with jQuery and i needed to generate an anonymous method with the eval() function.

The following lines worked with Opera but not with IE, FF, Chrome:

var callbackStr = "function(){alert('asdf');}";  
var callback = eval(callbackStr);  
callback();

This code works with all Browsers:

var callbackStr = "var callback = function(){alert('asdf');}";  
eval(callbackStr);  
callback();  

You see, I already solved my problem. But I want to know, what exactly is happening. Can anybody explain this behaviour to me, or tell me where i can find further information?

(PS: I know this page.)

Answer 1

eval does not return the function like that. Instead it executes a piece of code in the global scope, thats why the second example works - the callback var has been created in the global scope.

I'm sure these are just extremely simplified examples but you can almost always avoid using eval in the first place, which is recommended.

Answer 2

The first case simply evaluates your string and executes the function. It does not return a pointer to that particular function, that's why you cannot execute it by calling callback.

Answer 3

the first example will work if you'll do your eval like this

var callbackStr = "function(){alert('asdf');}";  
var callback = eval("(" + callbackStr + ")");  
callback();

Answer 4

The reason is the same as the reason you need to wrap parentheses around JSON strings before using eval on them - eval treats { as a token, the start of a statement eval assumes the anonymous functions is a FunctionDeclaration. Using parentheses allows eval to treat what's inside as an expression:

var callbackStr = "(function(){alert('asdf');})";  
var callback = eval(callbackStr);  
callback();
// -> alerts 'asdf';

As for why Opera behaves differently here, I have no idea. As for your use of eval, there's probably a better way (there nearly always is).

I dug out a quote from the spec for you, section 12.4 of ECMA-262 3rd Edition:

Note that an ExpressionStatement cannot start with an opening curly brace because that might make it ambiguous with a Block. Also, an ExpressionStatement cannot start with the function keyword because that might make it ambiguous with a FunctionDeclaration.

Emphasis mine.