Javascript call() method not generating expected output

Question

I am trying to understand how the call() method works. I have the following snippet of code that I executed in the Firebug Javascript console.

Code:

var window = {num1: 10, num2: 20};
var o = {num1: 20, num2: 30};

var sum = function(num1, num2) {
    return this.num1 + this.num2;
};

console.log(sum.call(o)); // 50
console.log(sum.call(window)); // 30
console.log(sum.call(this)); // 30

Output:

50
NaN
NaN

I expected the output to be 50 and 30 respectively. Why does call() return a NaN when window/this object is passed as an execution context?

window is a reserved word in a browser. You can't override or hide it with a variable. — Dark Falcon
– Dark Falcon, Commented Sep 26, 2013 at 18:26
And this is referring to the global namespace, which apparently doesn't have a num1 or num2 member in it. — Scott Mermelstein
– Scott Mermelstein, Commented Sep 26, 2013 at 18:26
Well, you can shadow it with a local variable - (function() { var window = {}; console.log(window) }()); - but of course you can't overwrite it completely and you can still access it in the closure by doing something like top.window — Adam Jenkins
– Adam Jenkins, Commented Sep 26, 2013 at 18:30
I misunderstood the use of window and assumed that if I override window and add variables to it, it would be part of the global scope. The clarification helps :) — vish
– vish, Commented Sep 27, 2013 at 18:13

Nicolas Straub · Accepted Answer · 2013-09-26 18:31:21Z

2

declaring a window variable will step over the window object for the current scope. this can result in unexpected behaviour (in my browser, firefox, I get 50, 30, NaN). change the first line to:

window.num1 = 10; window.num2= 20;

that will assign num1 and num2 to the global window property (not a good idea).

On another note, call passes the first argument as context (this). the params in your function declaration are unnecessary. if you want to pass an array with your args, use apply, e.g:

var myArgs = [10, 20];
sum.apply(window, myArgs);

you would then have to remove the this qualifiers from you function body for it to add up the args passed.

answered Sep 26, 2013 at 18:31

Nicolas Straub

3,4096 gold badges24 silver badges43 bronze badges

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

Comments

Wyatt · Accepted Answer · 2013-09-26 18:32:58Z

0

What environment are you doing these tests in? window is a host object that acts as the global object in all browsers. You can't override it with a variable in the global context.

So when you call to window you are calling to the global object which has no num1 or num2 properties attached to it. If you did

var num1 = 10, num2 = 20;

You would get the expected values for your logs.

This is because assigning variables in the global scope assigns them as a property of the window.

It works for the third case because the this value is determined at the time of calling, and when you reference this from global code, it refers to the window object.

answered Sep 26, 2013 at 18:32

Wyatt

2,51917 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript call() method not generating expected output

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related