欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

web面试之JS预解析与变量提升区别

程序员文章站 2022-06-22 13:00:18
目录什么是预解析?变量和函数预解析的区别重复声明var变量变量提升和函数提升优先级函数优先级大于变量优先级的深入探究预解析流程搜寻预解析关键字 执行预解析 几个需要注意的细节什么是预解析...

什么是预解析?

概念:

js代码在在代码从上往下执行前,浏览器会先把所有变量声明解析一遍, 这个阶段叫预解析。

详讲

寻找作用域中的var 和function声明(匿名函数没有function声明,所以不会提升),然后对其进行事先声明, 并把赋值操作留在原地,再从上到下执行代码。这就是一个预解析的过程。

变量和函数预解析的区别

​ 在预解析时,会把所有用 var 声明的变量, 和 function 声明的函数,提升到所在的作用域最顶端

var声明的变量, 在预解析的时, 只是提前了声明, 赋值语句依然留在原地;

function 声明的函数, 在预解析的时, 会提前声明并同时定义, 函数执行的时候,函数内部才会进行预解析。

注意: 匿名函数没有function声明,所以不会提升

重复声明var变量

var重复声明时:若已经存在,编译器会忽略 var 继续向下编译;

若不存在,则顺着作用域链向上查找,

若没有找到,会在本作用域声明该变量

变量提升和函数提升优先级

总结:

函数提升优先级高于变量提升,且不会被同名变量声明时覆盖,但是会被变量赋值后覆盖

下面内容转载自:

https://blog.csdn.net/caoyafeicyf/article/details/53172532

函数优先级大于变量优先级的深入探究

浏览器的预解析过程

先由一道小题进入本文

var foo;
function foo(){}
console.log(foo);

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

function foo(){}var foo;console.log(foo);

结果也是函数体

function foo(){}

所有就有很多人说,函数声明的优先级大于变量声明的优先级。

那么,为什么呢?这就要从浏览器的预解析说起了。

预解析流程

搜寻预解析关键字

寻找var关键字

寻找function关键字

执行预解析

先应用var关键字声明的标识符,使这些标识符有定义
标识符有定以后,使用这项标识符就不会报错了但因为没有赋值,因此其值为undefined

至此标识符中保存了函数的引用

几个需要注意的细节

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

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

先看第一个

var foo;
function foo(){}
console.log(foo);

预解析过程为:

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

再来看第二个

function foo(){}
var foo;
console.log(foo);

预解析过程为:

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

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

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

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

这个浏览器是如何解析的呢?下面来跟着我的思路一起走:

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);

以上就是web面试之js预解析与变量提升区别的详细内容,更多关于js预解析与变量提升的资料请关注其它相关文章!

相关标签: Web 面试 JS