JavaScript 预编译

z果青

已于 2022-05-16 23:15:49 修改

阅读量385

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-05-16 23:13:54 首次发布

本文链接：https://blog.youkuaiyun.com/zgq1259805541/article/details/124810470

版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了JavaScript中的预编译概念，包括全局预编译和函数预编译的过程。全局预编译中，变量声明先于函数声明，但函数会覆盖同名变量。而在函数预编译阶段，形参、变量声明、函数声明都会被处理，实参值会被赋予形参。通过实例展示了预编译的执行顺序和结果，帮助理解JS执行机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预编译

预编译是上下文环境创建之后，js代码执行之前的对js代码的预处理

预编译包含全局预编译和函数预编译

全局预编译

全局上下文创建后，会生成VO变量对象，VO首先会寻找变量声明，将var声明的变量作为VO对象的属性名，值为undefined。然后寻找函数声明，将函数名作为VO对象的属性名，函数本身作为对应的属性值。如果函数名和变量名冲突，函数值会覆盖掉变量值。
查找顺序：变量声明 -> 函数声明

console.log(a)
var a = 100
function a (){}
console.log(a)

/*VO:{
    a:undefined -> function //先是变量声明值为undefined，然后是函数声明，值是函数本身
}*/
 //输出结果：
 //function
 //100

函数预编译

函数上下文创建后，会生成AO变量对象

预编译过程：

寻找变量声明，变量名作为AO对象的属性名，属性值为undefined
寻找形参，形参名作为AO对象的属性名，属性值为undefined
实参给形参赋值，对应形参在AO中的属性值变为实参的值
寻找函数声明，函数名作为AO对象的属性名，属性值为函数本身
如果函数名与变量名冲突，则函数值将变量值覆盖

function fn(a,b){
    console.log(a)
    var a =100
    console.log(a)
    function a(){}
    console.log(b)
}
   fn(200, 300);
/*   VO:{
    a:undefined-> undefined -> 200 ->function
    b:undefined ->300
    }
    输出结果：
    ƒ a() {}
    100
    300
 */