zoukankan      html  css  js  c++  java
  • 浏览器的预解析过程

     

    浏览器的预解析过程

    题目:

    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

  • 相关阅读:
    CI框架(Codeigniter)总结
    ssh自动下载SFTP文件
    数据库设计原则
    Java代码性能优化的 39个细节
    quartz定时任务时间设置
    Myeclipse 反编译工具插件
    Maven -- 使用Myeclipse创建Maven项目
    详解Java Web项目启动执行顺序
    java web项目下的lib和build path 中jar包问题解惑
    java读取存在src目录下和存在同级目录下的配置文件
  • 原文地址:https://www.cnblogs.com/oklfx/p/8027383.html
Copyright © 2011-2022 走看看