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解析机制——预解析的更多相关文章

  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. 使用HTTP协议访问网路

    使用HTTP协议访问网路 一.使用HttpURLConnection //new一个URL对象 URL url = new URL("http://www.qq.com");//千 ...

  2. 16,Python网络爬虫之Scrapy框架(CrawlSpider)

    今日概要 CrawlSpider简介 CrawlSpider使用 基于CrawlSpider爬虫文件的创建 链接提取器 规则解析器 引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话, ...

  3. 4444: [Scoi2015]国旗计划

    4444: [Scoi2015]国旗计划 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 485  Solved: 232 Description A国 ...

  4. Redis实现之数据库(三)

    过期键删除策略 在Redis实现之数据库(二)一小节中,我们知道了数据库键的过期时间都保存在过期字典中,又知道了如果根据过期时间去判断一个键是否过期,现在剩下的问题是:如果一个键过期了,那么它什么时候 ...

  5. Java装箱和拆箱

    https://www.cnblogs.com/dolphin0520/p/3780005.html http://mxdxm.iteye.com/blog/2028196 装箱过程是通过调用包装器的 ...

  6. leetcode 【Search a 2D Matrix 】python 实现

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  7. android实现前置后置摄像头相互切换

    首先自定义一个继承自SurfaceView并且实现了SurfaceHolder.Callback接口的组件: public class CameraView extends SurfaceView i ...

  8. 生成比较短的Token字符串

    有的时候,我们需要生成一些Token作为标识:如认证后的标识符,资源的提取码等.一个比较常见的算法是生成一个GUID来作为Token,由于GUID的随机性和唯一性特点,作为Token是一个非常可靠的选 ...

  9. Python之文件操作:文件、目录的操作

    一.创建 1.创建文件 open(path,'w') 2.创建目录 (1)os.mkdir(pt[, mode=0777]) 新建一个目录pt,参数mode表示生成的目录的权限,默认是超级权限,也就是 ...

  10. 使用mapMutations扩展写法后参数传递的办法

    在没使用扩展办法的时候,在组件当中通过下面方式进行传参 testMethods(data) { this.$store.commit("add",data) } 而使用了扩展函数了 ...