环境记录初始化对函数变量的影响-对前端微专业群内一道难题的解析

事情原委：

我在做前端微专业JavaScript进阶篇的测验，然后遇到这么一题。

<span style="font-size:14px;">以下代码执行时两个alert分别输出值是
(function(){
a = 5;
alert(window.a);
var a = 10;
alert(a);
})();
</span>

我一开始判断是选择A，因为我知道在函数中，如果对一个变量直接赋值，而没有声明的话，JS会创建一个全局变量，也就是挂靠在window底下。

比如：

<span style="font-size:14px;">test(); 
function test(){a=10;}; 
console.log(a);    //结果是输出10；</span>

可见，我所知道的这条原则确实是存在的。

然而，当我把题目这几行代码输入到console中去测试的时候，结果是"undefined, 10".

这个我就非常不理解了，我一度以为是浏览器的错误。

直到群里的大神指点后，我把代码改成这样：

<span style="font-size:14px;">(function(){
a = 5;
alert(window.a); 
// var a = 10;
alert(a);
})();
</span>

马上，直接结果就变成了5，也就是说我之前深信不疑的原则起作用了。

也就是说，底下这个var a = 10; 改变了结果，使得第一个alert无法取到window.a的值，或者说，使得window.a这个变量根本就不存在。

估计看到这里，聪明的人已经知道答案了，没错，原因就是JS中环境记录初始化的规则：

环境记录初始化：也就是常说的声明提前。在全局代码或者函数代码执行前，JS都会为其进行环境初始化。函数形参->函数声明(function x())->函数中变量声明(var y )（按照我写的顺序）都会在常规执行前就先做了。

所以说，

<span style="font-size:14px;">(function(){
a = 5;
alert(window.a);
var a = 10;
alert(a);
})();</span>

的真实执行顺序是：

（1）环境初始化：

var a;    //a已经被声明在函数内；

（2）常规执行阶段：

a = 5;   //a被第一次赋值；

alert(window.a)   // 由于a已经被声明在函数内，因此window下并没有a这个变量，因此弹出undefined；

a = 10;    //a被第二次赋值；

alert (a);   // 弹出10；

现在你明白了嘛？

感谢：大葱，Link等一众群友的指点！