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.

The `new Function` constructor works like `eval()`. So `new Function(arr[1]+"()");` might work. — Niet the Dark Absol, May 23 '16 at 10:07
@NiettheDarkAbsol Maybe `new Function("return " + arr[1] + '()')` — Ruan Mendes, May 23 '16 at 17:59
@techie_28 you can call another function on the on click event, with these parameters. And from that function you can call the actual function with the desired parameters. — Atif, May 24 '16 at 06:15

Ruan Mendes · Answer 1 · 2016-05-23T18:28:11.483

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?

edited May 23 '16 at 18:28

answered May 23 '16 at 18:00

Ruan Mendes

90,375
31
153
217

Yes I did not expect it to run immediately but I expected the `var funcName` to get the reference of the function `doSomething` whose name I am extracting as a string from `arrArgs[1].slice(0,arrArgs[1].indexOf('(')) this gives doSomething` the call to the function is `funcName.apply('',funcArgs);` which does not gets called in this case unless I do `var funcName = eval(arrArgs[1].slice(0,arrArgs[1].indexOf('(')));` – techie_28 May 24 '16 at 05:05
looks like `var funcName = new Function(arrArgs[1].slice(0,arrArgs[1].indexOf('(')));` is not referencing the function despite getting name correctly i.e `doSomething` from `arrArgs[1].slice(0,arrArgs[1].indexOf('('))` – techie_28 May 24 '16 at 05:17
I have to extract onclick attribute because there is dynamic params there which are different everytime. – techie_28 May 24 '16 at 07:14

score 0 · Accepted Answer · edited May 23 '17 at 11:58

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?

Function Typecasting JavaScript

2 Answers2

Linked