分析一个JavaScript预解析的题

ゞ浴缸里的玫瑰 2022-10-01 04:46 154阅读 0赞

上一篇转了预解析的总结，学习了，感谢！  
下面找了个综合的题目来一步步剖析…

alert(a);
            var a = 1;
            alert(a);
            function a(){ alert(2);}
            alert(a);
            var a = 3;
            alert(a);
            function a(){alert(4);}
            alert(a);
    
            alert( typeof a);
            a();

#### 浏览器解析js的步骤 ####

1.  先是预解析（找关键词 var， function， 参数），获取的数据记录
2.  然后一句句代码执行

--------------------

### 开始 ###

alert(a);                     // 它什么都没有
            var a = 1;                    // 它有 var 记下来
            alert(a);
            function a(){ alert(2);} alert(a);
            var a = 3;
            alert(a);
            function a(){alert(4);} alert(a);
    
            alert( typeof a);
            a();

#### 记录结果 ####

> a = undefined;
> 
> （var 的值都不读，凡是var声明的变量预解析就给undefined）

### 继续下一句 ###

alert(a);                     // 它什么都没有
            var a = 1;                    // 它有 var 记下来
            alert(a);                     // 它什么都没有
            function a(){  alert(2);}      // 它有 function 记下来
            alert(a);
            var a = 3;
            alert(a);
            function a(){ alert(4);}
            alert(a);
            alert( typeof a);
            a();

#### 记录结果 ####

> a = undefined;  
> a = function a()\{ alert(2) \}; // 看到function 关键字就全记下来  
> 但是，这俩不会都记下来的，都记下来，后边来人要用 a ,他俩谁上？？  
> 这样规定的，function 和 undefined 都在，取 function
> 
> 所以，现在的记录结果是：  
> a = function a()\{ alert(2) \};

### 继续下一句 ###

alert(a);                     // 它什么都没有
            var a = 1;                    // 它有 var 记下来
            alert(a);                     // 它什么都没有
            function a(){  alert(2);}      // 它有 function 记下来
            alert(a);                     // 它什么都没有
            var a = 3;                   // 它有 var 记下来
            alert(a);                    
            function a(){ alert(4);}
            alert(a);
            alert( typeof a);
            a();

#### 记录结果 ####

> a = function a()\{ alert(2) \};  
> a = undefined;  
> 都是 a 比较一下吧；  
> 留 a = function a()\{ alert(2) \};

### 继续下一句 ###

alert(a);                     // 它什么都没有
            var a = 1;                    // 它有 var 记下来
            alert(a);                     // 它什么都没有
            function a(){  alert(2);}      // 它有 function 记下来
            alert(a);                     // 它什么都没有
            var a = 3;                    // 它有 var 记下来
            alert(a);                     // 它什么都没有
            function a(){ alert(4);}       // 它有 function 记下来
            alert(a);
            alert( typeof a);
            a();

#### 记录结果 ####

> a = function a()\{ alert(2) \};  
> a = function a()\{ alert(4) \};  
> 都是 a， 又都是function，那就后面的覆盖之前的  
> 留下 a = function a()\{ alert(4) \};

### 继续下一句 ###

alert(a);                    // 它什么都没有
            var a = 1;                   // 它有 var 记下来
            alert(a);                    // 它什么都没有
            function a(){ alert(2);} // 它有 function 记下来
            alert(a);                    // 它什么都没有
            var a = 3;                   // 它有 var 记下来
            alert(a);                    // 它什么都没有
            function a(){ alert(4);} // 它有 function 记下来
            alert(a);                    // 它什么都没有
            alert( typeof a);            // 它什么都没有
            a();                         // 它什么都没有 结束

#### 记录结果 ####

> a = function a()\{ alert(4) \};

### 开始执行代码 ###

> 执行代码过程中赋值语句会修改 预解析的记录结果

alert(a); //执行这一行 输出 a 
            var a = 1;
            alert(a);
            function a(){ alert(2);}
            alert(a);
            var a = 3;
            alert(a);
            function a(){alert(4);}
            alert(a);
    
            alert( typeof a);
            a();

> 根据记录结果 输出 function a()\{ alert(4) \};

alert(a);                    //执行这一行 输出 a 
            var a = 1;                   //执行这一行 赋值语句 改变记录
            alert(a);
            function a(){ alert(2);} alert(a);
            var a = 3;
            alert(a);
            function a(){alert(4);} alert(a);
    
            alert( typeof a);
            a();

> 记录由 a = function a()\{ alert(4) \}; 改为 a = 1;

alert(a);                    //执行这一行 输出 a 
            var a = 1;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a
            function a(){ alert(2);} alert(a);
            var a = 3;
            alert(a);
            function a(){alert(4);} alert(a);
    
            alert( typeof a);
            a();

> 输出结果 1

alert(a);                    //执行这一行 输出 a 
            var a = 1;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a
            function a(){  alert(2);}     //执行这一行 没有赋值，也没调用
            alert(a);                    //执行这一行 输出 a
            var a = 3;                   
            alert(a);
            function a(){ alert(4);}
            alert(a);
    
            alert( typeof a);
            a();

> 输出结果 1

alert(a);                    //执行这一行 输出 a 
            var a = 1;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a
            function a(){  alert(2);}     //执行这一行 没有赋值，也没调用
            alert(a);                    //执行这一行 输出 a
            var a = 3;                   //执行这一行 赋值语句 改变记录
            alert(a);
            function a(){ alert(4);}
            alert(a);
    
            alert( typeof a);
            a();

> 记录 a = 3;

alert(a);                    //执行这一行 输出 a 
            var a = 1;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a
            function a(){  alert(2);}     //执行这一行 没有赋值，也没调用
            alert(a);                    //执行这一行 输出 a
            var a = 3;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a 
            function a(){ alert(4);}
            alert(a);
    
            alert( typeof a);
            a();

> 输出结果 3

alert(a);                    //执行这一行 输出 a 
            var a = 1;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a
            function a(){  alert(2);}     //执行这一行 没有赋值，也没调用
            alert(a);                    //执行这一行 输出 a
            var a = 3;                   //执行这一行 赋值语句 改变记录
            alert(a);                    //执行这一行 输出 a 
            function a(){ alert(4);}      //执行这一行 没有赋值，也没调用
            alert(a);                    //执行这一行 输出 a 
    
            alert( typeof a);            
            a();

> 结果 3

alert(a);                   //执行这一行 输出 a 
            var a = 1;                  //执行这一行 赋值语句 改变记录
            alert(a);                   //执行这一行 输出 a
            function a(){ alert(2);} //执行这一行 没有赋值，也没调用
            alert(a);                   //执行这一行 输出 a
            var a = 3;                  //执行这一行 赋值语句 改变记录
            alert(a);                   //执行这一行 输出 a 
            function a(){ alert(4);} //执行这一行 没有赋值，也没调用
            alert(a);                   //执行这一行 输出 a 
    
            alert( typeof a);           // a是3 Number
            a();                        // 3(); 报错