实例讲解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和ActionScript的交互实现代码
Aug 01 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 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
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
python二分法实现实例
2013/11/21 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python读取与处理netcdf数据方式
2020/02/14 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python是怎样处理json模块的
2020/07/16 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
介绍一下write命令
2012/09/24 面试题
某公司面试题
2012/03/05 面试题
期中考试后的反思
2014/02/08 职场文书
运动会广播稿100字
2015/08/19 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
创业计划书之美甲店
2019/09/20 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python