实例讲解JavaScript预编译流程


Posted in Javascript onJanuary 24, 2019

大家都知道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() {}
  }

执行结果:

实例讲解JavaScript预编译流程

注意:

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

预编译(函数执行前)

创建AO对象(Active Object)

查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined

实参形参相统一,实参值赋给形参

查找函数声明,函数名作为AO对象的属性,值为函数引用

预编译(脚本代码块script执行前)
查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined

查找函数声明,函数名作为全局对象的属性,值为函数引用

预编译小结

预编译两个小规则

函数声明整体提升-(具体点说,无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面)

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

预编译前奏

imply global 即任何变量,如果未经声明就赋值,则此变量就位全局变量所有。(全局域就是Window)

一切声明的全局变量,全是window的属性; var a = 12;等同于Window.a = 12;

函数预编译发生在函数执行前一刻。

Javascript 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
js 内存释放问题
Apr 25 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
实例讲解vue源码架构
Jan 24 #Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 #Javascript
JavaScript私有变量实例详解
Jan 24 #Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 #Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 #Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
vue结合element-ui使用示例
Jan 24 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Python 导入文件过程图解
2019/10/15 Python
Tensorflow 实现释放内存
2020/02/03 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
新闻学专业求职信
2014/07/28 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
MySQL基础(二)
2021/04/05 MySQL
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
python神经网络Xception模型
2022/05/06 Python