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
– Niet the Dark Absol, Commented May 23, 2016 at 10:07
@NiettheDarkAbsol Maybe new Function("return " + arr[1] + '()') — Ruan Mendes
– Ruan Mendes, Commented May 23, 2016 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
– Atif, Commented May 24, 2016 at 6:15

Ruan Mendes · Accepted Answer · 2016-05-23 18:28:11Z

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, 2016 at 18:28

answered May 23, 2016 at 18:00

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

techie_28 Over a year ago

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 Over a year ago

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 Over a year ago

I have to extract onclick attribute because there is dynamic params there which are different everytime.

Community · Accepted Answer · 2017-05-23 11:58:40Z

0

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?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 26, 2016 at 7:01

techie_28

2,1454 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

Function Typecasting JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related