JavaScript预编译流程详解

1-JavaScript运行三部曲

1.语法分析
2.预编译
3.解释执行

语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误; 解释执行顾名思义便是执行代码了; 预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 ;

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()之前,发生预编译

1.创建AO活动对象(Active Object);
2.查找形参和变量声明,值赋予undefined;
3.实参值赋给形参;
4.查找函数声明,值赋予函数体;

预编译之前面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() {}
    }

执行结果:

注意:

预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译 ; 只有在解释执行阶段才会进行变量初始化 ;

预编译(函数执行前)

1.创建AO对象(Active Object)
2.查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
3.实参形参相统一,实参值赋给形参
4.查找函数声明,函数名作为AO对象的属性,值为函数引用

预编译(脚本代码块script执行前)

查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
查找函数声明,函数名作为全局对象的属性,值为函数引用

预编译小结

预编译两个小规则

函数声明整体提升-(具体点说,无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面)
变量 声明提升-(具体点说,无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明,所以值是undefined)
预编译前奏

imply global 即任何变量,如果未经声明就赋值,则此变量就位全局变量所有。(全局域就是Window)
一切声明的全局变量,全是window的属性; var a = 12;等同于Window.a = 12;
函数预编译发生在函数执行前一刻。

这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

原文地址:http://blog.51cto.com/14082686/2346433

时间: 2024-10-27 19:27:56

JavaScript预编译流程详解的相关文章

5分钟读懂JavaScript预编译流程

5分钟读懂JavaScript预编译流程 javascripttypescriptes6es5 阅读约 7 分钟 大家都知道JavaScript是解释型语言,既然是解释型语言,就是编译一行,执行一行,那又何来预编译一说呢?脚本执行js引擎都做了什么呢?今天我们就来看看吧. 1-JavaScript运行三部曲 语法分析 预编译 解释执行 语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误: 解释执行顾名思义便是执行代码了: 预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 :

【转】Android编译系统详解(三)——编译流程详解

原文网址:http://www.cloudchou.com/android/post-276.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 1.概述 编译Android的第三步是使用mka命令进行编译,当然我们也可以使用make –j4,但是推荐使用mka命令.因为mka将自动计算-j选项的数字,让我们不用纠结这个数字到底是多少(这个数字其实就是所有cpu的核心数).在编译时我们可以带上我们需要编译的目标,假设你想生成recovery,那么使用mka recov

ssl协议工作流程详解

SSL 协议 (HTTPS) 握手.工作流程详解 (双向 HTTPS 流程 )SSL 协议的工作流程:服务器认证阶段: 1)客户端向服务器发送一个开始信息"Hello"以便开始一个新的会话连接; 2)服务器根据客户的信息确定是否需要生成新的主密钥,如需要则服务器在响应客户的"Hello"信息时将包含生成主密钥所需的信息; 3)客户根据收到的服务器响应信息,产生一个主密钥,并用服务器的公开密钥加密后传给服务器; 4)服务器恢复该主密钥,并返回给客户一个用主密钥认证的信

javascript AJAX与Comet详解

          博客专家福利      [限时活动]建专辑得大奖       专访荣浩:流程的永恒之道      当青春遇上互联网,能否点燃你的创业梦      推荐有礼--找出您心中的技术大牛 javascript AJAX与Comet详解 分类: javascript2012-12-24 17:39 367人阅读 评论(0) 收藏 举报 XMLHttpRequest对象 在IE5中,XHR对象是通过MSXML库中的ActiveX对象实现的.在IE中可能会遇到三种不同版本的XHR对象,即M

CentOS开机流程详解

CentOS开机流程详解 一.linux开机流程: BIOS:(Basic Input Output System)基本输入输出系统,它是一组固化到计算机内主板上一个ROM芯片 上的程序,保存着计算机最重要的基本输入输出的程序.开机后自检程序和系统自启动程序,可从CMOS中读写系统设置的具体信息. MBR:Master Boot Record,主要引导记录区. Boot Loader:启动引导程序. 二.详细流程 第一步:加载BIOS 打开计算机电源,计算机硬件会自动加载BIOS,读取BIOS内

迅为4412开发板Linux驱动教程——总线_设备_驱动注册流程详解

视频下载地址: 驱动注册:http://pan.baidu.com/s/1i34HcDB 设备注册:http://pan.baidu.com/s/1kTlGkcR 总线_设备_驱动注册流程详解 ? 注册流程图 ? 设备一般都需要先注册,才能注册驱动 – 现在越来越多的热拔插设备,反过来了.先注册驱动,设备来了再注册 设备 ? 本节使用的命令 – 查看总线的命令#ls /sys/bus/ – 查看设备号的命令#cat /proc/devices ? 设备都有主设备号和次设备号,否则255个设备号不

Android View measure流程详解

Android View measure流程详解 Android中View绘制的流程包括:measure(测量)->layout(布局)->draw(绘制). 因为Android中每个View都占据了一块矩形的空间,当我们要在屏幕上显示这个矩形的View的时候 首先我们需要知道这个矩形的大小(宽和高)这就对应了View的measure流程. 有了View的宽和高,我们还需要知道View左上角的起点在哪里,右下角的终点在哪里,这就对应了View的layout流程. 当矩形的区域在屏幕上确定之后,

unity3d-配置Android环境,打包发布Apk流程详解

31:unity3d-配置Android环境,打包发布Apk流程详解 作者 阿西纳尼 关注 2016.08.28 22:52 字数 498 阅读 1806评论 0喜欢 5 Unity配置Android环境,打包发布安卓流程 一:SDK与JDK下载地址:http://pan.baidu.com/s/1mhVaXHe下载完成后,解压文件 SDK文件 二.安装 JDK 运行安装程序jdk-7u67-windows-x64 Java-JDK 分别点击下一步进行安装. 安装中 在安装过程中先后会出现两次选

CentOS 5,6 系统启动流程详解

一.linux 组成介绍 1.linux 组成: Linux: kernel+rootfs(根文件系统) kernel: 进程管理.内存管理.网络管理.驱动程序.文件系统.安全功能 rootfs: 程序和glibc 库:函数集合, function, 调用接口(头文件负责描述) 过程调用: procedure,无返回值 函数调用: function 程序:二进制执行文件 2.内核设计流派: 单内核(monolithic kernel): Linux 把所有功能集成于同一个程序 微内核(micro