实例讲解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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
Vue.js用法详解
Nov 13 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php实现中文转数字
2016/02/18 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
全面理解闭包机制
2016/07/11 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
vue实现记事本功能
2019/06/26 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python给你的头像加上圣诞帽
2018/01/04 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
青年标兵事迹材料
2014/08/16 职场文书
公司年底活动方案
2014/08/17 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
初中军训感言
2015/08/01 职场文书
开学第一天的感想
2015/08/10 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL