函数范围和全局变量

Question

var foo = '1',
    bar = '2';

console.log(foo, bar, window.foo); //1, 2, undefined

(function(foo){
    console.log(foo, bar); //2, 2
})(bar);

I have two trivial questions regarding the code above:

1. Why is window.foo undefined? Aren't all global variables attached to the window object by default?

2. Why is foo === 2 inside of the closure? I know that I'm passing the original bar with the alias foo , which is 2 , but outside of the function scope foo is still 1 . And as far as I know, the original foo can be accessed from inside of the closure as well. Is the "new foo" prioritized since it's passed as an argument to the IIFE?

http://jsfiddle.net/GbeDX/

Answer 1

Why is window.foo undefined? Ins't all "global" variables automatically attached to the window object?

Yes, global variables become properties of window , but the code is not run in global scope in your fiddle. It is run in the load event handler (see the second checkbox on the left hand side, it says "onLoad"). Here it is run in global scope: http://jsfiddle.net/GbeDX/1/

Why is foo === 2 inside of the closure? [...] And as far as I know, the original foo can be accessed from inside of the closure as well.

No, it can't. The parameter foo shadows the variable foo . If it is a global variable though, you can access it with window.foo .

Answer 2

1. Yes. My guess is you execute that code in some debug environment like Firebug, jsFiddle, etc., which implicitly wraps that code into a scope

2. You pass the value 2 into that self-executing anonymous function, and you access the value via the local argument foo . Since the scope chain lookup always works bottom->up , the resolving for that variable name stops at the local scope, where foo is found as argument.

Answer 3

1. window.foo === '1' , unless you've run this inside of another function.
2. foo === '2' inside of the closure becuase you declared foo as an input argument to the function. You could access the globally scoped foo if you hadn't decided to declare a locally scoped variable with the same name.

Answer 4

1. Yes. Probably you are seeing the variable foo as undefined because you are running your script in a debug environment like firebug or jsfiddle (related https://stackoverflow.com/a/11572991/975520 )
2. No. The parameter foo overwrite the variable foo . But it's still a global variable, so you can use it as window.foo .