一起来了解一下JavaScript的预编译(小结)-6ren

一起来了解一下JavaScript的预编译(小结)

转载作者：qq735679552 更新时间：2022-09-28 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章一起来了解一下JavaScript的预编译(小结)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

JS运行三部曲

js运行代码共分三步。

语法分析
预编译
解释执行

JavaScript代码在运行时，首先会进行语法分析，通篇检查代码是否存在低级错误，然后进行预编译，整理内部的一个逻辑，最后再开始一行一行的执行代码。

语法分析

代码在执行之前，系统会通篇扫描一遍，检查代码有没有低级的语法错误，比如少写个大括号.

预编译

预编译前奏

预编译发生在函数执行的前一刻。变量未经声明就赋值，此变量为全局对象所有。

a = 3 。

var b = c = 4 。

一切声明的全局变量，全是window的属性。

var a = 1 ===> window.a = 1 。

预编译四部曲

创建AO(Activation Object)对象（里面存储的是函数内部的局部变量）
找形参和变量声明，将变量和形参名做为AO属性名，值为undefined
将实参和形参统一
在函数体里面找函数声明，值赋予函数体

用一个例子来说明一下，也可以自己先给出一个答案，再继续往下看。

 
    ? 
   
         function 
         fn(a) { 
        
         console.log(a); 
        
         var 
         a = 123; 
        
         console.log(a); 
        
         function 
         a() {} 
        
         console.log(a); 
        
         var 
         b =  
         function 
         () {}; 
        
         console.log(b); 
        
         function 
         d() {} 
        
         console.log(d) 
        
         } 
        
         fn(1);

第一步，创建AO(Activation Object)对象 {}第二步，找形参和变量声明，将变量和形参名做为AO属性名，值为undefined 。

 
    ? 
   
         { 
        
         a: undefined, 
        
         b: undefined, 
        
         }

第三步，将实参和形参统一。

 
    ? 
   
         { 
        
         a: 1, 
        
         b: undefined, 
        
         }

第四步，找函数声明，值赋予函数体。

 
    ? 
   
         { 
        
         a: function a() {}, 
        
         b: undefined, 
        
         d: function d() {} 
        
         }

所以在函数fn执行的前一刻，a、b、d的值如上所示。

所以fn(1)执行的结果为。

// ƒ a() {} // 123 // 123 // ƒ () {} // ƒ d() {} 。

在全局作用域里，预编译过程有些许不同。

创建GO(Global Object)对象（里面存储的是函数内部的全局变量）GO === window
找形参和变量声明，将变量和形参名做为GO属性名，值为undefined
在函数体里面找函数声明，值赋予函数体

解释执行

一行一行的执行代码。

实践题

这里有几个例题，有兴趣的可以看一下。

 
    ? 
   
         function test(a, b) { 
        
         console.log(a); 
        
         console.log(b); 
        
         var b = 234; 
        
         console.log(b); 
        
         a = 123; 
        
         console.log(a); 
        
         function a() {} 
        
         var a; 
        
         b = 234; 
        
         var b = function() {}; 
        
         console.log(a); 
        
         console.log(b); 
        
         } 
        
         test(1);

 
    ? 
   
         global = 100; 
        
         function fn() { 
        
         console.log(global); 
        
         global = 200; 
        
         console.log(global); 
        
         var global = 300; 
        
         } 
        
         fn(); 
        
         var global;

 
    ? 
   
         function test() { 
        
         console.log(b); 
        
         if (a) { 
        
         var b = 100; 
        
         } 
        
         c = 234; 
        
         console.log(c); 
        
         } 
        
         var a; 
        
         test(); 
        
         a = 10; 
        
         console.log(c);