实例讲解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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
一个简易需要注册的留言版程序
2006/10/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python中str.join()简单用法示例
2018/03/20 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
护士自我鉴定
2013/10/23 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
老同学聚会感言
2014/02/23 职场文书
学雷锋月活动总结
2014/04/25 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
个人委托书怎么写
2014/09/17 职场文书
毕业证代领委托书
2014/09/26 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
英文升职感谢信
2015/01/23 职场文书
珍爱生命主题班会
2015/08/13 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
python异步的ASGI与Fast Api实现
2021/07/16 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers