javascript解析机制——预解析
JavaScript解析机制是什么?
JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个就是执行阶段。
* 编译阶段
编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码。
* 执行阶段
在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并顺序执行。
编译阶段(预解析阶段)做什么操作?
* var , function声明的变量提升
首先,创建一个当前执行环境下的活动对象,然后将用 var 声明的变量设置为活动对象的属性(也就是将其添加到活动对象当中)并将其赋值为undefined,然后将 function 定义的函数 也添加到活动对象当中。

- 1 if( false ){
- 2 var aa = 20;
- 3 var bb = 30;
- 4 }
- 5
- 6 function AA(){};
- 7 function BB(){};
- 8
- 9 //var定义的aa,bb以及function定义的AA(),BB()都会被变量提升到window对象下面

* 函数声明与函数表达式在预解析的区别
首先,我们知道解析器会对function定义的函数(也就是函数声明)在代码开始执行之前对其实行函数声明提升(function declaration hoisting),所以在函数声明之前调用该函数是不会在执行期间报错,但是函数表达式不同,函数表达式用 var 声明,也就是说解析器会对其变量提升,并对其赋值为undefined,然后在执行期间,等到执行到该var 变量的时候再将其变量指向一个function函数,所以在函数表达式之前执行该函数是会报错的。

- 1 AA();
- 2 function AA(){};
- 3
- 4 BB();
- 5 var BB = function(){};
- 6
- 7 //AA();不会报错,因为是以function的变量提升,BB()会报错,因为是以var的变量提升,到其相当于 BB(); var BB = undefined; BB = function(){};

* function 覆盖
若定义了两个同名的函数,则在预解析期间后面一个会覆盖签名一个

- 1 AA(); // 输出 I am AA_2;
- 2 function AA(){
- 3 console.log('I am AA_1');
- 4 };
- 5
- 6 AA(); // 输出 I am AA_2;
- 7 function AA(){
- 8 console.log('I am AA_2');
- 9 }

* 预解析把变量或函数解析到其运行时的环境中
解析器将变量提升并不是将所有的变量都提升到window对象下面,其提升的原则是提升到变量运行的环境中去。

- 1 aa = "I am aa";
- 2 (function(){
- 3 console.log(aa); // 输出 aa 是 undefined
- 4 var aa = "I am aa in a function";
- 5 console.log(aa); //输出 aa 是 I am aa in a function
- 6 })();
- 7
- 8 // 这里 aa 被变量提升,但是aa 没有被变量提升到 window下面,而是被提升到其运行的环境 (function(){ })() 中去,也就是等同于
- 9
- 10 // aa = "I am aa";
- 11 //(function(){
- 12 // var aa;
- 13 // console.log(aa); // 输出 aa 是 undefined
- 14 // aa = "I am aa in a function";
- 15 // console.log(aa); //输出 aa 是 I am aa in a function
- 16 //})();
- 17
- 18
- 19
- 20 // 下面代码等同于上面,目的是为了若看不懂上面,则可看下面。
- 21 aa = "I am aa";
- 22 function AA(){
- 23 console.log(aa);
- 24 var aa = "I am aa in a function";
- 25 console.log(aa);
- 26 }
- 27 AA();

* JavaScript“预解析”分段进行
所谓分段进行是按照<script>标签来分块进行预解析

- 1 <script>
- 2 AA(); // 输出 AA2;
- 3 function AA(){
- 4 console.log('AA1');
- 5 }
- 6
- 7 function AA(){
- 8 console.log('AA2');
- 9 }
- 10 </script>
- 11
- 12
- 13 <script>
- 14 function AA(){
- 15 console.log('AA3');
- 16 }
- 17 </script>
- 18
- 19 //上面例子说明function函数声明是分块的,然而至于var变量的提升经过反复验证是不分块的( 此处如有不同意见请指教 )。

* var 变量提升以及 function 函数声明提升
该点是对函数声明以及函数表达式进一步的说明,其实前面函数声明和函数表达式在预解析的不同表现,其主要的原因就是 var 和 function 两者不同的提升。这个问题从解析阶段到运行阶段来说明。首先,在解析阶段 var 后面的 AA 会被提升然后 AA 被定义为undefined,BB 也会被提升,而BB被提升后的内容就是整个 function 里面的内容,其实从浏览器的控制台我们可以看出一二。然后,整个解析过程完了就到了运行阶段,在运行阶段期间,当读到 AA() 的时候,其实就是将 AA 这个变量指向function(){}这个函数然后调用,而到了 BB() 的时候,就会从之前声明的函数中去查找该早已经声明的函数,然后直接调用。

- 1 var AA = function(){
- 2 console.log(' AA_ 1 ');
- 3 }
- 4
- 5 AA(); // 输出 AA_1
- 6
- 7
- 8 function AA(){
- 9 console.log(' AA_2 ');
- 10 }
- 11 AA(); //输出 AA_2
- 12
- 13 //这个例子就很好说明了 var 在运行阶段动态内建,而 function 在预解析阶段静态建立。

javascript解析机制——预解析的更多相关文章
- javascript作用域、预解析笔记
1.作用域 一般情况下,一段代码中所用到的名字并不总是有效可用的, 而限定这个名字(变量)的可用性的代码范围就是这个名字的作用域,可用有效的减少变量名冲突 2.js的作用域(e ...
- 第112天:javascript中函数预解析和执行阶段
关于javascript中的函数: 1.预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2.执行 :从上到下执行,但有例外(setTimeout,setInterval,aja ...
- JavaScript的变量预解析特性
JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,J ...
- js作用域其二:预解析
文章目錄 解析机制 JavaScript是一门解释型的语言 , 想要运行js代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript ...
- 从var func=function 和 function func()区别谈Javascript的预解析机制
var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function ...
- 你不知道的JavaScript--Item6 var预解析与函数声明提升(hoist )
1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉, ...
- js---07 js预解析,作用域---闭包
js解析器首先不会逐行读代码,这是第二部了. 首先 根据var找到变量,根据function找函数,找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义,并不会读取等 ...
- 14 (H5*) JS第4天 函数、作用域、预解析
目录 1:函数的其他定义 2:函数作为参数 3:函数作为返回值 4:作用域 5:作用域链 6:预解析 7:预解析分段 复习 <script> /* * 复习: * 函数:把一些重复的代码封 ...
- JavaScript - 运行机制,作用域,作用域链(Scope chain)
参考 https://www.jianshu.com/p/3b5f0cb59344 https://jingyan.baidu.com/article/4f34706e18745be386b56d46 ...
随机推荐
- 配置Wampserver和安装thinksns
一.先安装Wampserver(去官网下载) 二.安装好后单击wampserver图标,Apache->Service->测试80端口,如果显示: i 端口被iis占用 控制面板-> ...
- C 语言 习题 1-12
练习 1-12 编写一个程序,以每行一个单词的形式打印其输入. #include <stdio.h> #define IN 1 #define OUT 0 int main(int arg ...
- Postgresql 查看建表语句 命令
pg_dump -U username databasename -W -s -t tablename -s, --schema-only 只转储模式, 不包括数据 -t, --table=TABLE ...
- 菜鸟之路——机器学习之BP神经网络个人理解及Python实现
关键词: 输入层(Input layer).隐藏层(Hidden layer).输出层(Output layer) 理论上如果有足够多的隐藏层和足够大的训练集,神经网络可以模拟出任何方程.隐藏层多的时 ...
- Windows 7中安装SQL2005提示IIS未安装 解决办法 .(转载)
在Windows 7系统中安装SQL Server 2005时,可能会收到一个警告:提示IIS未安装或者未启用.在通过“控制面板”的“打开或关闭Windows功能”按默认设置安装IIS后,发现仍有这个 ...
- Unity --yield return
1.yield return null; //暂停协同程序,下一帧再继续往下执行 yield new WaitForFixedUpdate (); //暂停协同程序,等到下一次调用FixedUpdat ...
- Python的生成器Generator小结
一. 生成器的介绍 在介绍生成器(Generator)之前,我们首先需要熟悉列表生成式,列表生成式是Python内置的简单又强大的用来创建列表的生成式. 举个例子, 如果我们想生成[1*1,2*2,3 ...
- 声卡(Sound Card)基本概念
声卡 (Sound Card)是实现声音的模拟/数字信号相互转换.信号处理的一种硬件. 声卡的基本功能是把来自话筒.磁带.光盘的原始声音信号加以转换(模数转换或者数模转换),输出到耳机.扬声器.扩音机 ...
- input[type="radio"]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...
- golang深坑记录
go深坑:1.gin.context.JSON,如果没有make数组时,数组返回为null,make后,数组为[]2.json.Number转int64类型 datatemp.(json.Number ...