JavaScript的预编译

JS预编译解析

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30512785

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ddjps/p/10133726.html

本文深入探讨JavaScript的预编译过程，包括全局和局部预编译的细节，以及如何影响变量和函数声明。

JavaScript 有一些特点：1.跨平台 2.弱类型 3.解释执行（逐行执行）

在JavaScript运行时，会按顺序进行一些步骤

1.先对代码进行语法分析，所谓语法分析，作用是检查代码有没有基本的语法错误，例如单词拼写，括回，等。

2.词法分析（预编译）

3.逐行执行

下面我们就深入了解一下第二步词法分析（预编译）

预编译过程一般分为两种情况

全局和局部

1.全局指的是直接在script标签中的代码，不包括函数执行部分的代码

例子：

　　var a = 100;

　　var b = 200;

　　var c = 300;

　　function a(){}

　　function fun(){}

</script>

执行前：

　　1.在window对象下生成一个GO（global object）对象

　　GO = {

　　　　自带的属性这里省略不写

　　}

　　2.分析变量声明，变量名为属性名，值全为undefined

　　GO = {

　　　　a : undefined,

　　　　b : undefined,

　　　　c : undefined

}

　　3.分析函数声明（而不是函数表达式）函数名为属性名,值为函数体，如果函数名和变量名相同，则无情覆盖（如例子中的 var a 和 function a(){}）

　　GO ={

　　　　a : function a(){},

　　　　b : undefined,

　　　　c : undefined，

　　　　fun : function fun(){}

}

此时，GO就是预编译完成的最终对象，词法分析结束

最后一步逐行执行

已经被词法分析分析过的语句就可以不管了，专心赋值

此时 GO = {

　　　　a : 100, // 赋值时 var a = 100 讲 a属性值再次改变

　　　　b : undefined,

　　　　c : undefined，

　　　　fun : function fun(){}

}

2.局部函数执行的时候进行的

例子：

　　var num = 100;

　　function fun(num){

　　　　console.log(num)

　　}

　　fun(5)

</script>

执行前

1.预编译过程

GO = {

　　num：undefined，

　　fun : function fun(num){...}

}

2.执行过程

GO = {

　　num : 100,

　　fun : function fun(num){...}

}

3.函数调用过程：函数调用时也会生成自己的作用域（AO：action object）函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO

3.1 函数执行前的一瞬间，生成AO活动对象

fun.AO = {

}

3.2 分析参数，形参作为对象的属性名,实参作为对象的属性值

fun.AO = {

　　num : 5

}

3.3 分析变量声明，变量名为属性名，值为underfind，如果遇到AO对象上属性同名，不做任何改变

fun.AO = {

　　num : 5

}

3.4 分析函数声明，属性名为属性名，值为函数体，如果遇到AO对象上属性同名，则无情覆盖

最后逐行执行。

下面给出一个例子

function test(){
    console.log(b);  
    if(a){    
        var b = 100;
    }
    c = 123;
    console.log(c);   
}
var a;
test();
a = 20;
test();
console.log(c);

1.生成GO

GO = { }

2.分析变量声明

GO = {

　　a : undefined

}

3.分析函数声明

GO = {

　　a : undefined,

　　test : function

}

4.逐行执行

4.1 test调用

4.1.1 生成test.AO = { }

4.1.2 分析参数没有

4.1.3 分析变量声明

test.AO = {

　　b : undefined

}

4.1.4 分析函数声明没有

4.1.5 结果

test.AO = {

　　b : undefined

}

继续逐行执行

4.2 a 的值改变

GO = {

　　a : 20，

　　test : function,

　　c : 123

}

4.3 test调用生成test.AO = { }

4.3.1 参数没有

4.3.2 变量声明

test.AO = {

　　b : undefined

}

4.3.3 函数声明没有

4.3.4 结果

test.AO = {

　　b : undefined

}

4.3.5 继续执行

test.AO = {

　　b : 100

}

可以清楚的看出每个属性的值为多少了

转载于:https://www.cnblogs.com/ddjps/p/10133726.html