Does the javascript Window object not have local variables?

Question

When I define a local variable under global namespace, it gets overwritten by an instance variable of the same name.

var outerVar;

outerVar = 'outerVar';
this.outerVar = 'thisOuterVar';
console.log(outerVar);            // thisOuterVar

However the same does not happen while inside a function.

var fun;

fun = function() {
  var innerVar;
  innerVar = 'innerVar';
  this.innerVar = 'thisInnerVar';
  return console.log(innerVar);      // innerVar
};

fun();

This code was run in Firebug.

this.constructor                  // Window { }

If I run the same code under node, where this.constructor is [Function: Object], it returns 'outerVar' instead of 'thisOuterVar' which makes sense.

Why does it behave differently under Window?

Try new fun(); and the result will be different (this.innerVar in your example without new is just the same as window.innerVar). — bfavaretto
– bfavaretto, Commented Apr 24, 2013 at 19:06

Adidi · Accepted Answer · 2013-04-25 00:27:05Z

1

If you run code in the browser from the global space like your first sample:

var outerVar;

outerVar = 'outerVar';
this.outerVar = 'thisOuterVar';
console.log(outerVar);

Then everything runs under the basic global space: window - this is basically the base scope of all environment in browser js.

so when you define value like var outerVar it's basically like window.outerVar or this.outerVar or window['outerVar'].

But if you run your code under anonymous function/object function like:

fun = function() {
  var innerVar;
  innerVar = 'innerVar';
  this.innerVar = 'thisInnerVar';
  return console.log(innerVar);      // innerVar
};

the this refer to the function(object) and the var innerVar refer to the scope of the function (like private var in basic oop class) You can look at this like the this.somevar is public and var othervar is private - those are different things completely.

This is also answer your node question since in node everything runs under anonymous function "behind the scenes" - this is commonjs way - so in node it's basically the same as your anonymous function sample.

Edit: As @bfavaretto comment me correctly - the this.innerVar is defined according to how you use it - meaning if you use it as regular function of course the this will be the window - hence global - if you make an object of it(like i thought - it will be define to the instance and be "public"):

function func(){
   alert(this);
}

func(); //alerts 'window'

var f = new func(); //alerts 'object'

edited Apr 25, 2013 at 0:27

answered Apr 24, 2013 at 19:11

Adidi

5,2835 gold badges27 silver badges30 bronze badges

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

6 Comments

bfavaretto Over a year ago

Actually, the this inside the function refers to the global object (as the call is fun(), not new fun()).

Adidi Over a year ago

This is what I said and meant - function(object)

bfavaretto Over a year ago

I'm not sure we're talking about the same thing! This is a good answer, but that part is confusing. You seem to mean that fun would be a constructor, and this would refer to the constructed instance (you even mention "public"), when that's not the case in the example from the OP (as the function is simply invoked, without the new keyword)

Adidi Over a year ago

It's the same thing - even if you define a "static" class which is an object that you don't have to run with new like var SomeClass = {a:1,func: function(){var b;alert(this.a)}} the variants inside func behaves the same as oop class in js - you can call without new like SomeClass.func(); and still var b is like private and this.a is like public. same for if you making an instance from a function definition ("js class")

bfavaretto Over a year ago

It's not the same! In your example, this.a is indeed a property of SomeClass; in the OP code, this.innerVar is global.

|

Matt Oates · Accepted Answer · 2013-04-24 19:08:34Z

0

In the global namespace, 'a = 5;' is semantically equivalent to 'window.a = 5;', or 'this.a = 5;'

answered Apr 24, 2013 at 19:08

Matt Oates

1558 bronze badges

Comments

Michael L. · Accepted Answer · 2013-04-24 19:12:40Z

0

You said, "When I define a local variable under global namespace...". That's a contradiction in terms. When you are in global scope there is no such thing as a 'local variable'. As for what's happening inside your function, when you declare var innerVar; you are creating a variable that only exists in the scope of that function. When you then modify this.innerVar inside the function, you're modifying (or declaring) the variable innerVar on whatever this happens to be at the time which, in this case, is window or, basically, global scope.

answered Apr 24, 2013 at 19:12

Michael L.

6183 silver badges17 bronze badges

Collectives™ on Stack Overflow

Does the javascript Window object not have local variables?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related