浏览器的预解析过程

Posted ︶ㄣ鳯躌氷瀚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器的预解析过程相关的知识,希望对你有一定的参考价值。

 

浏览器的预解析过程

题目:

var foo;
function foo(){}
console.log(foo);
  • 1
  • 2
  • 3
  • 4

结果是函数体function foo(){} 
接着下面一道题:

function foo(){}
var foo;
console.log(foo);
  • 1
  • 2
  • 3

结果也是函数体function foo(){}

所有就有很多人说,函数声明的优先级大于变量声明的优先级。那么,为什么呢?这就要从浏览器的预解析说起了。

预解析流程

  1. 搜寻预解析关键字 
    • 寻找var关键字
    • 寻找function关键字
  2. 执行预解析 
    • 先应用var关键字声明的标识符,使这些标识符有定义 
      • 标识符有定以后,使用这项标识符就不会报错了
      • 但因为没有赋值,因此其值为undefined
    • 至此标识符中保存了函数的引用

几个需要注意的细节

  • var 关键字对同一个标识符重复使用时,除第一次有效外,其他均做忽略处理。
  • 预解析时先处理变量声明,再处理函数声明
  • 不要纠结谁的优先级高,这些只是表面现象
  • 懂得了预解析流程,一切都是浮云

看了预解析原理以后,下面咱们回到本文开头的两题,分析下预解析的过程,详细的了解为什么函数的优先级高于变量的优先级。follow me—->

先看第一个

var foo;
function foo(){}
console.log(foo);
  • 1
  • 2
  • 3

预解析过程为:

var foo;<----变量声明的var
var foo;<----函数声明抽出的var
foo=function (){}<----函数声明抽出的赋值
console.log(foo);
  • 1
  • 2
  • 3
  • 4

再来看第二个,

function foo(){}
var foo;
console.log(foo);
  • 1
  • 2
  • 3

预解析过程为:

var foo;<----变量声明的var
var foo;<----函数声明抽出的var
foo=function (){}<----函数声明抽出的赋值
console.log(foo);
  • 1
  • 2
  • 3
  • 4

比较这两个,你发现了什么?原来他们的预解析过程一样啊,这也就是为什么函数优先级高于变量的原因了。


如果你理解了上面的内容,那么下面再出一个题:

var a=1;
function a(){}
console.log(a);
  • 1
  • 2
  • 3

这个浏览器是如何解析的呢?下面来跟着我的思路一起走: 
1. 解析器首先搜寻var 关键字,结果第一行就发现了,把它提取到开头。 
2. 解析器搜寻function关键字,第二行发现了,首先分离var+函数名,此时发现和第一步的一样,不做处理,然后开始分离函数的赋值,也就是a=function (){},此时a为函数体。 
3. 解析器接着处理变量的赋值,a=1,上一步的函数体被覆盖掉,此时a=1。 
4. 最后处理console.log(a),自然而然的结果为1。

下面是解析器处理的代码过程:

var a;<----变量声明的var
var a;<----函数声明抽出的var
a=function (){}<----函数声明抽出的赋值
a=1;
console.log(a);
  • 1
  • 2
  • 3
  • 4
  • 5

以上是关于浏览器的预解析过程的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript的预编译过程

JavaScript的预编译过程

函数和变量中的预解析

死磕JavaScript变量和函数的预解析

JS——变量和函数的预解析匿名函数函数传参return

JavaScript预解析