JavaScript indicating function

Question

I recently asked a question

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

I needed to programmatically access the onclick attribute of a button in which there was a function call along with a parameter, and then provide an additional parameter and call the function call ( onclick=doSomething(2,4) ).

But as I find out that using apply/call can also come in handy to provide additional options. To do this, I extracted the function name from the attribute and came to a string like

 arr[1] = 'doSomething'; 

I tried using the Function Constructor to treat this as a function, but it does not work (for example, Function(arr[1]) ) Why?

Solution mentioned by Javascript: interpret string as object reference? works great. But why is this impossible to achieve through the function constructor?

Some code information

  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, the function is not called until I replaced

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

Thank.

Answer 1

I discussed this in the JavaScript chat room, from where I realized that the new Function(..) constructor needs the full body of the function in order to return the link as I expected.

The function constructor does not consider the definition of the doSomething function, which is written in the script, but eval does.

Other methods that may be applicable in these scenarios are given here:

Use Javascript variable as object name

Comments?

Answer 2

new Function and eval are not interchangeable. When you eval, you create code that runs immediately. When you create a Function , it returns a function that you can run yourself.

It is almost as if you were doing:

 // 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 than your code, we can offer something, but the key is that when you call the Function constructor, the code does not start immediately, it returns a link to the newly created function.

In addition, you seem to understand that you can call the function yourself. What is the problem with this?