事情原委:
我在做前端微专业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等一众群友的指点!