Function Typecasting JavaScript

Question

Recently I had asked a question

Extract & call JavaScript function defined in the onclick HTML attribute of an element(using jQuery attr/prop)

I needed to programmatically access the onclick attrib of a button which had a function call along with param's in it then supply an extra param & make a function call(onclick=doSomething(2,4)).

But as I figure out that the use of apply/call can also come handy to supply extra param's.For this I extracted the the function name from the attribute & it comes in a string like

arr[1] = 'doSomething';

I tried using Function Constructor to treat this as a function but it doesn't work (like Function(arr[1])) Why?

Solution mentioned Javascript: interpret string as object reference? works fine. But why it cant be achieved via the function constructor?

Some code info

 var funDef      ='doSomething'; // this is the name of real function defined in the script
 var funcName    = new Function(funDef); //expected it to return reference of function doSomething,shows function anonymous() in console

    var funcArgs    = [5,7,10];
    funcName.apply('',funcArgs); //this is the function call.

In this case function does not get called untill I replace

    var funcName = new Function(funDef); with var funcName = eval(funDef);

Thanks.

Answer 1

I discussed this on the JavaScript chat room from where I understood that new Function(..) constructor needs whole function body to return reference in the way I was expecting.

The function constructor does not consider the definition of the doSomething function that is written in the script while eval does.

Other ways that could be fit in this scenarios are here:

Javascript use variable as object name

Comments?

Answer 2

new Function and eval are not interchangeable. When you eval, you are creating code that runs immediately. When you create a Function, that is going to return a function that you can run yourself.

It's almost as if you do:

// This executes 1+2
var resultOfEval = eval('1+2');
// This creates a function that when called, returns 1+2
var resultOfWrappedEval = eval( '(function(){return 1+ 2})' );
// This is much like the line above, you have to call it for it to execute
var resultOfFunctionCtor = new Function('return 1+ 2;');


console.log('resultOfEval', resultOfEval);
console.log('resultOfWrappedEval', resultOfWrappedEval);
console.log('executing resultOfWrappedEval', resultOfWrappedEval());
console.log('resultOfFunctionCtor', resultOfFunctionCtor);
console.log('executing resultOfWrappedEval', resultOfFunctionCtor());

If you show more of your code, we can suggest something, but the key is that when calling the Function constructor, the code doesn't run immediately, it returns a reference to the newly created function.

Also, you seem to understand that you can call the function yourself. What is the problem with doing that?