实例讲解JavaScript预编译流程
大家都知道JavaScript是解释型语言，既然是解释型语言，就是编译一行，执行一行，那又何来预编译一说呢?脚本执行js引擎都做了什么呢？今天我们就来看看吧。
1-JavaScript运行三部曲
语法分析
预编译
解释执行
语法分析很简单，就是引擎检查你的代码有没有什么低级的语法错误； 解释执行顾名思义便是执行代码了； 预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数 ；
2-JS预编译什么时候发生
预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有错 预编译确确实实在script代码内执行前发生了 但是它大部分会发生在函数执行前
3-实例分析
先来区分理解一下这2个概念： 变量声明 var ... 函数声明 function(){}
<script>
var a = 1;
console.log(a);
function test(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
}
var c = function (){
console.log("I at C function");
}
console.log(c);
test(2);
</script>
分析过程如下：
页面产生便创建了GO全局对象（Global Object）（也就是window对象）；
第一个脚本文件加载；
脚本加载完毕后，分析语法是否合法；
开始预编译 查找变量声明，作为GO属性，值赋予undefined； 查找函数声明，作为GO属性，值赋予函数体；
预编译
//抽象描述
GO/window = {
a: undefined,
c: undefined，
test: function(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
}
}
解释执行代码（直到执行调用函数test(2)语句）
//抽象描述
GO/window = {
a: 1,
c: function (){
console.log("I at C function");
}
test: function(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
}
}
执行函数test()之前，发生预编译
创建AO活动对象（Active Object）；
查找形参和变量声明，值赋予undefined；
实参值赋给形参；
查找函数声明，值赋予函数体；
预编译之前面1、2两小步如下：
//抽象描述
AO = {
a:undefined,
b:undefined,
}
预编译之第3步如下：
//抽象描述
AO = {
a:2,
b:undefined,
}
预编译之第4步如下：
//抽象描述
AO = {
a:function a() {},
b:undefined
d:function d() {}
}
执行test()函数时如下过程变化：
//抽象描述
AO = {
a:function a() {},
b:undefined
d:function d() {}
}
--->
AO = {
a:123,
b:undefined
d:function d() {}
}
--->
AO = {
a:123,
b:function() {}
d:function d() {}
}
执行结果：
注意：
预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 ； 只有在解释执行阶段才会进行变量初始化 ；
预编译(函数执行前)
创建AO对象（Active Object）
查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
实参形参相统一，实参值赋给形参
查找函数声明，函数名作为AO对象的属性，值为函数引用
预编译(脚本代码块script执行前)
查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined
查找函数声明，函数名作为全局对象的属性，值为函数引用
预编译小结
预编译两个小规则
函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
预编译前奏
imply global 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)
一切声明的全局变量，全是window的属性； var a = 12;等同于Window.a = 12;
函数预编译发生在函数执行前一刻。
相关文章
本文通过几段示例代码，给我们深入分析了下javascript的冒泡事件，非常的详细，这里推荐给大家，希望对大家有所帮助2014-12-12
MyBatis是一款一流的支持自定义SQL、存储过程和高级映射的持久化框架。MyBatis几乎消除了所有的JDBC代码，也基本不需要手工去 设置参数和获取检索结果,对MyBatis感兴趣的小伙伴们可以参考一下2015-09-09
这篇文章主要为大家详细介绍了JavaScript的语法基础，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了javascript单引号和双引号的区别和处理,希望对大家有所帮助2014-05-05
键盘 keycode的值 javascript时触发事件时很有用的要素
键盘keycode的值 编写javascript时触发事件时很有用的要素,大家可以收藏一下。2009-11-11
在需要对img进行onload事件绑定的时候，一般大家都会想到用常规的方法进行事件绑定此时大家会发现alert(1)并没有执行，这是什么原因呢？特别是在ie和ff浏览器下这是为什么呢,本文将详细为您解答2012-12-12
下面小编就为大家带来一篇全面了解JavaScript的数据类型转换。小编觉得挺不错的，现在就分享给大家看，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
下面小编就为大家带来一篇基于JS脚本语言的基础语法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
数组对象用来在单独的变量名中存储一系列的值。我们使用关键词 new 来创建数组对象。有两种向数组赋值的方法，也可以使用一个整数自变量来控制数组的容量2014-10-10
JavaScript If...Else 声明...2007-04-04
最新评论