看一段简单的javascript代码背后隐藏的问题

Question

1.先看如下一段简单的代码:

var name = 'hello'; 
function test() {
     alert(name);
}
test();

执行大家都知道会弹出 hello,没啥疑问.

2.那么在alert后面再加上一行代码后,如下:

var name = 'hello'; 
function test() {
     alert(name);
     var name = 'hi';
}
test();

大家猜猜会输出什么结果?
弹出的是一个 undefined。

3.在2的基础上,再做修改:

var name = 'hello'; 
function test() {
     alert(name);
     name = 'hi';
}
test();

为什么这次就输出hello呢?

4.这里牵涉到javascript的作用域,作用域链的知识。
网上的文章觉得讲得都有点教课化,看过之后觉得似懂非懂。
求通俗易懂的解答,最好能对两种情况做对比回答。

Answer 1

第一段代码因为test里面没有name的声明，所以向上访问到外部的的name
第二段代码相当于

var name = 'hello'; 
function test() {
     var name;
     alert(name);
     name = 'hi';
}
test();

变量name的声明提升了，但是还没赋值，所以输出undefined

第三段代码 test函数里的name因为在外部找到了声明，所以引用的是外部的name，自然有值了，假如你把外部的name声明去掉，输出的还会是undefined

Answer 2

javascript引擎在进入作用域开始读取数据之前，会为这段作用域里所有被声明的变量和函数名开辟开辟一块内存，但内存里什么都没有，只是undefined。拿你上面的例子来说，在执行alert(name);的时候，其实name已经在内存中有一席之地了，只是还没有赋值，这时候alert，就会返回undefined。当执行到var name = 'hi';的时候，才给name的内存中保存了数据'hi'。

Answer 3

这东西叫做变量声明提升。

通俗的语言就是，调用函数，函数执行之前会扫描一边整个函数的代码。把其中的变量声明和函数声明提取出来。执行的这个函数作用域中创建这些变量，函数声明赋值为最后声明的那个函数，变量声明初始值为undefined。
然后移除所有的变量声明和函数声明执行这个函数。
从实现的效果来看就是，变量可以先声明后使用（先不考虑let）。即使声明在后面，只要后面声明了也是一个局部变量。

详见我的博客：http://zonxin.github.io/post/2015/10/javascript-hoisting

Answer 4

楼主的这一段代码

var name = 'hello'; 
function test() {
     alert(name);
     var name = 'hi';
}
test();

在浏览器处理的时候会变成：

var name = 'hello'; 
function test() {
     var name;  // var name = undefined;
     alert(name);  // undefined;
     name = 'hi';
}
test();

这叫做变量提升。

Answer 5

这是我之前学习总结的。希望对你有所帮助。