JavaScript 详解预编译原理

 更新时间:2017年01月22日 16:28:06   投稿:lqh  
这篇文章主要介绍了JavaScript 详解预编译原理的相关资料,需要的朋友可以参考下

JavaScript 预编译原理

今天用了大量时间复习了作用域、预编译等等知识

看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译)

发现当初觉得自己学的很明白,其实还是存在一些思维误区 (很多博文具有误导性)

今晚就整理了一下凌乱的思路

先整理一下预编译的知识吧,日后有时间再把作用域详细讲解一下

大家要明白,这个预编译和传统的编译是不一样的(可以理解js预编译为特殊的编译过程)

JavaScript是解释型语言,

既然是解释型语言,就是编译一行,执行一行

传统的编译会经历很多步骤,分词、解析、代码生成什么的

日后有时间再给大家科普

下面就给大家分享一下我所理解的JS预编译

JavaScript运行三部曲

脚本执行js引擎都做了什么呢?

  • 语法分析
  • 预编译
  • 解释执行

在执行代码前,还有两个步骤

语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误

解释执行顾名思义便是执行代码了

预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数

理解了预编译对大家理解作用域同样有帮助

JS预编译什么时候发生

我当初思维误区也发生在这里

预编译到底什么时候发生

希望大家不要让上面的运行过程让你产生误会,

误以为预编译仅仅发生在script内代码块执行前

这倒并没有错

预编译确确实实在script代码内执行前发生了

但是它大部分会发生在函数执行前

JS预编译实例

举例前,先来思考一下这几个概念:

  • 变量声明 var…
  • 函数声明 function…
<script>
  var a = 1;// 变量声明
  function b(y){//函数声明
    var x = 1;
    console.log('so easy');
  };
  var c = function(){//是变量声明而不是函数声明!!
    //...
  }
  b(100);
</script>
<script>
  var d = 0;
</script>

让我们看看引擎对这段代码做了什么吧

1.页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)

2.第一个脚本文件加载

3.脚本加载完毕后,分析语法是否合法

4.开始预编译

查找变量声明,作为GO属性,值赋予undefined
查找函数声明,作为GO属性,值赋予函数体

//伪代码
GO/window = {
  //页面加载创建GO同时,创建了document、navigator、screen等等属性,此处省略
  a: undefined,
  c: undefined,
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

解释执行代码(直到执行函数b)

//伪代码
GO/window = {
  //变量随着执行流得到初始化
  a: 1,
  c: function(){
    //...
  },
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

执行函数b之前,发生预编译

  • 创建AO活动对象(Active Object)
  • 查找形参和变量声明,值赋予undefined
  • 实参值赋给形参
  • 查找函数声明,值赋予函数体
//伪代码
AO = {
  //创建AO同时,创建了arguments等等属性,此处省略
  y: 100,
  x: undefined
}

解释执行函数中代码

第一个脚本文件执行完毕,加载第二个脚本文件

第二个脚本文件加载完毕后,进行语法分析

语法分析完毕,开始预编译

重复最开始的预编译步骤……

大家要注意,

预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译

只有在解释执行阶段才会进行变量初始化

嗯~最后收一下尾

总结

预编译(函数执行前)※

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

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

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

理解了预编译对理解提升行为,this指向,作用域及性能等问题都有很大帮助

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • JavaScript类的继承操作实例总结

    JavaScript类的继承操作实例总结

    这篇文章主要介绍了JavaScript类的继承操作,结合实例形式总结分析了JavaScript面向对象程序设计中类的继承常见实现方式与操作技巧,需要的朋友可以参考下
    2018-12-12
  • JS实现焦点图轮播效果的方法详解

    JS实现焦点图轮播效果的方法详解

    这篇文章主要介绍了JS实现焦点图轮播效果的方法,结合实例形式详细分析了JS焦点图轮播效果的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • javascript 键盘事件总结 推荐

    javascript 键盘事件总结 推荐

    在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件。
    2009-12-12
  • 用javascript实现的汉字简繁转换

    用javascript实现的汉字简繁转换

    用javascript实现的汉字简繁转换...
    2007-06-06
  • JS中FormData类实现文件上传

    JS中FormData类实现文件上传

    这篇文章主要为大家详细介绍了JS中FormData类实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js实现图片查看器

    js实现图片查看器

    这篇文章主要为大家详细介绍了js实现图片查看器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 微信小程序实现人脸识别对比

    微信小程序实现人脸识别对比

    这篇文章主要介绍了微信小程序实现人脸识别对比,此文主要通过小程序实现对比人脸相似度,并返回相似度分值,可以基于分值判断是否为同一人,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • layui复选框的全选与取消实现方法

    layui复选框的全选与取消实现方法

    今天小编就为大家分享一篇layui复选框的全选与取消实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Bootstrap按钮组简单实现代码

    Bootstrap按钮组简单实现代码

    这篇文章主要为大家详细介绍了Bootstrap按钮组的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript Chart 插件整理

    JavaScript Chart 插件整理

    前段时间由于工作关系,查找了一些JS的chart插件,以下数据采集于2010.4.8。
    2010-06-06

最新评论