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

编辑: admin 分类: javascript 发布时间: 2021-11-17 来源:互联网
目录
  • 什么是预解析?
  • 变量和函数预解析的区别
  • 重复声明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. 解析器接着处新加坡服务器http://www.558idc.com/sin.html理变量的赋值，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预解析与变量提升的资料请关注hwidc其它相关文章！

    更多阅读