JavaScript预编译原理分析
来源:互联网 发布:红米note只有2g网络 编辑:程序博客网 时间:2024/06/05 02:04
今天用了大量时间复习了作用域、预编译等等知识
看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译)
发现当初觉得自己学的很明白,其实还是存在一些思维误区
(很多博文具有误导性)
今晚就整理了一下凌乱的思路
先整理一下预编译的知识吧,日后有时间再把作用域详细讲解一下
大家要明白,这个预编译和传统的编译是不一样的(可以理解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>
让我们看看引擎对这段代码做了什么吧
- 页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)
- 第一个脚本文件加载
- 脚本加载完毕后,分析语法是否合法
- 开始预编译
- 查找变量声明,作为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作用域原理——预编译
- PreparedStatement 预编译原理
- JDBC-预编译原理
- PreparedStatement 预编译原理
- PreparedStatement 预编译原理
- javascript预编译
- javascript预编译
- javascript之预编译
- javaScript的预编译
- javascript 预编译
- Javascript之预编译
- JavaScript的预编译
- Javascript“预编译”理解
- JavaScript之预编译
- javascript 预编译 作用域
- 1011. World Cup Betting (20)
- 【工具篇】——利用EditPlus进行Json数据格式化
- Python中用MetaClass实现委托、不可变集合
- visual studio 2015 配置 Winpcap
- 第二十天学习笔记
- JavaScript预编译原理分析
- Go中变量声明的三种方式
- 嵌入式开发之c基础第一天笔记
- mysql安装需要的配置文件
- 学习Hadoop第二十二课(Sqoop---数据迁移工具)
- 【备忘】科卡在线Linux高级应用视频教程(全套17集)视频下载
- bower解决js的依赖管理
- PS,AI各类设计页面大小
- 学习笔记 Tianmao 篇 RecyclerView.Adapter 的封装