JavaScript解析机制是什么?

  JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个就是执行阶段。

  * 编译阶段

         编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码。

  * 执行阶段

    在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并顺序执行。

编译阶段(预解析阶段)做什么操作?

  * var , function声明的变量提升

    首先,创建一个当前执行环境下的活动对象,然后将用 var 声明的变量设置为活动对象的属性(也就是将其添加到活动对象当中)并将其赋值为undefined,然后将 function 定义的函数 也添加到活动对象当中。

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

 

 * 函数声明与函数表达式在预解析的区别

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

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

  * function 覆盖

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

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

  * 预解析把变量或函数解析到其运行时的环境中

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

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

  * JavaScript“预解析”分段进行

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

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

  * var 变量提升以及 function 函数声明提升

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

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

javascript解析机制——预解析的更多相关文章

  1. javascript作用域、预解析笔记

    1.作用域     一般情况下,一段代码中所用到的名字并不总是有效可用的,     而限定这个名字(变量)的可用性的代码范围就是这个名字的作用域,可用有效的减少变量名冲突     2.js的作用域(e ...

  2. 第112天:javascript中函数预解析和执行阶段

    关于javascript中的函数:  1.预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前  2.执行 :从上到下执行,但有例外(setTimeout,setInterval,aja ...

  3. JavaScript的变量预解析特性

    JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,J ...

  4. js作用域其二:预解析

    文章目錄 解析机制 JavaScript是一门解释型的语言 , 想要运行js代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript ...

  5. 从var func=function 和 function func()区别谈Javascript的预解析机制

    var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function ...

  6. 你不知道的JavaScript--Item6 var预解析与函数声明提升(hoist )

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉, ...

  7. js---07 js预解析,作用域---闭包

    js解析器首先不会逐行读代码,这是第二部了. 首先 根据var找到变量,根据function找函数,找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义,并不会读取等 ...

  8. 14 (H5*) JS第4天 函数、作用域、预解析

    目录 1:函数的其他定义 2:函数作为参数 3:函数作为返回值 4:作用域 5:作用域链 6:预解析 7:预解析分段 复习 <script> /* * 复习: * 函数:把一些重复的代码封 ...

  9. JavaScript - 运行机制,作用域,作用域链(Scope chain)

    参考 https://www.jianshu.com/p/3b5f0cb59344 https://jingyan.baidu.com/article/4f34706e18745be386b56d46 ...

随机推荐

  1. 配置Wampserver和安装thinksns

    一.先安装Wampserver(去官网下载) 二.安装好后单击wampserver图标,Apache->Service->测试80端口,如果显示: i 端口被iis占用 控制面板-> ...

  2. C 语言 习题 1-12

    练习 1-12 编写一个程序,以每行一个单词的形式打印其输入. #include <stdio.h> #define IN 1 #define OUT 0 int main(int arg ...

  3. Postgresql 查看建表语句 命令

    pg_dump -U username databasename -W -s -t tablename -s, --schema-only 只转储模式, 不包括数据 -t, --table=TABLE ...

  4. 菜鸟之路——机器学习之BP神经网络个人理解及Python实现

    关键词: 输入层(Input layer).隐藏层(Hidden layer).输出层(Output layer) 理论上如果有足够多的隐藏层和足够大的训练集,神经网络可以模拟出任何方程.隐藏层多的时 ...

  5. Windows 7中安装SQL2005提示IIS未安装 解决办法 .(转载)

    在Windows 7系统中安装SQL Server 2005时,可能会收到一个警告:提示IIS未安装或者未启用.在通过“控制面板”的“打开或关闭Windows功能”按默认设置安装IIS后,发现仍有这个 ...

  6. Unity --yield return

    1.yield return null; //暂停协同程序,下一帧再继续往下执行 yield new WaitForFixedUpdate (); //暂停协同程序,等到下一次调用FixedUpdat ...

  7. Python的生成器Generator小结

    一. 生成器的介绍 在介绍生成器(Generator)之前,我们首先需要熟悉列表生成式,列表生成式是Python内置的简单又强大的用来创建列表的生成式. 举个例子, 如果我们想生成[1*1,2*2,3 ...

  8. 声卡(Sound Card)基本概念

    声卡 (Sound Card)是实现声音的模拟/数字信号相互转换.信号处理的一种硬件. 声卡的基本功能是把来自话筒.磁带.光盘的原始声音信号加以转换(模数转换或者数模转换),输出到耳机.扬声器.扩音机 ...

  9. input[type="radio"]自定义样式

    input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...

  10. golang深坑记录

    go深坑:1.gin.context.JSON,如果没有make数组时,数组返回为null,make后,数组为[]2.json.Number转int64类型 datatemp.(json.Number ...