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

    xiaoxiao2025-01-11  10

    事情原委:

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

    转载请注明原文地址: https://ju.6miu.com/read-1295374.html
    最新回复(0)