JavaScript-javascript函数执行顺序

Question

var foo = 1;
function bar(){
alert(foo);
var foo = 2;
}
bar();
alert(foo);

请问为什么会依次弹出 undefined 1。
也就是 为什么会先解释函数后为变量赋值呢？麻烦说下原理好吗？万分感激。

Answer 1

你在function bar()里定义的foo覆盖了你之前定义的全局变量foo; 但是在alert(foo)的时候还没有赋值.
试验1:

var foo = 1;
function bar(){
alert(foo); //全局变量
}
bar();
alert(foo); //全局变量

结果: 1 1

试验2:

var foo = 1;
function bar(){
alert(foo); //局部变量
var foo = 2;
alert(foo); //局部变量
}
bar();
alert(foo); //全局变量

结果: undefined 2 1

Answer 2

这个涉及到作用域链的问题，bar()的作用域链是自身内部定义的变量作用域和外层的变量作用域，查找foo时，首先查找最近的作用域链，也就是自己的内部作用域链，所以首先查找内部的foo变量，但这时候foo没有赋值，所以是undefined。

Answer 3

在函数内部，变量的声明都是在函数内部的作用域中。
而无论声明的局部变量在函数代码的任何位置，它都会提升到函数的顶部；

即
alert(foo);
var foo = 2;

与var foo;
alert(foo);
foo = 2;
是一样的。记住这么一点就行了。当然了用比较专业的术语就是作用域链

Answer 4

 function bar(){
alert(foo);
var foo = 2;
}

实际上相当于

 function bar(){
var foo;
alert(foo);
foo = 2;
}

Answer 5

你这个问题和变量的作用域有关。

1，首先第一行 var foo = 1; 并不是正真的全局变量。 全局变量定义可以不用var 来修饰。
2，在bar 函数中的输出的foo，并不能获取到第一行定义的foo变量值，所以是undefined
3，函数中 var foo = 2; 并不会覆盖第一行的foo的值，应为这里的foo变量作用域只是在当前bar() 函数内。

如果想输出 1 ，2 那么将代码改为：

var foo = 1;
function bar(){
    alert(foo);
    foo = 2;
}
bar();
alert(foo);

或者：

foo = 1;
function bar(){
    alert(foo);
    foo = 2;
}
bar();
alert(foo);

但不能是：

foo = 1;
function bar(){
    alert(foo);
    var foo = 2;
}
bar();
alert(foo);

至于为什么，可以参考：

@Javascript 函数的执行过程问题？
@使用var和不使用var，在JS中有什么差异？

这个就涉及到 js预编译，以及 解释执行相关的知识了。