zoukankan      html  css  js  c++  java
  • JS的解析与执行过程—全局预处理阶段之命名冲突的处理策略

    有如下代码:

     1 <body>
     2     <script>
     3         alert(f);
     4         
     5         function f() {
     6             console.log("fff");
     7         }
     8         var f = 5;
     9     </script>
    10 </body>

    不论var f 与function f 的先后顺序如何,该代码执行的结果总是弹出function f 的字符串,为什么呢?像这种函数与变量命名冲突时JS的处理原则又是什么?

    在扫描函数声明与变量声明的时候,是先扫描函数声明(function fn()),后扫描变量声明(var a)的;

    • 处理函数声明有冲突,会覆盖;
    • 处理变量声明有冲突,会忽略;

    上面代码中,由于先扫描函数声明,所以LexicalEnviroment对象中先存在了 f 指向函数的引用,然后扫描到变量的时候发现变量名冲突,忽略这个变量,所以总是弹出函数字符串。

    也就是说,在JS中函数的优先级是高于变量的。相同优先级以后面的为准,不同优先级以级别高的为准。

    然后当存在两个同名函数时,会覆盖,所以总是指向后一个函数的,这点就像声明两个同名变量一样。

    总结:有如下代码:

     1     <script>
     2         alert(a);
     3         // alert(b);
     4         alert(f);
     5         alert(g);
     6 
     7         var a = 5;
     8         b = 6;
     9         alert(b);
    10         function f() {
    11             console.log("fff");
    12         }
    13         var g = function() {
    14             console.log("ggg");
    15         }
    16         alert(g);
    17     </script>

    这段代码在预处理阶段,分别扫描函数声明和变量声明,加入到全局对象window中:

    1 window = {
    2             f: 函数引用,
    3             a: undefined,
    4             g: undefined
    5         }

    注意,由于函数 g 是以函数表达式的方式声明的,所以在预处理时会当作一个变量,其值为undefined,所以上面代码执行结果为弹出undefined, f 的字符串表示, undefined

    然后走过了var a = 5; b = 6;之后window对象变为:

    1 window = {
    2             f: 函数引用,
    3             a: 5,
    4             b: 6,
    5             g: undefined
    6         }

    所以此时alert(b)弹出6;

    因为在JS中不用var声明,直接写的变量默认为全局变量(window的),此时直接不用预处理而直接一步加到全局对象中,预处理的undefined被赋值。

    然后走过函数f与函数g的表达式,此时g也指向函数,所以最后alert(g)弹出g的字符串。

  • 相关阅读:
    购物网站数据库表
    C#Excel的导入与导出
    DataTable过滤重复字段
    压力测试~一套完整的压力测试项目文档
    压力测试~测试工具的使用
    C#调用本机摄像头
    linq学习笔记
    EasyPlayer RTSP播放器对RTSP播放地址url的通用兼容修改意见
    我们计划为EasyDSS定制开发一款超低延时的EasyPlayer Flash播放器
    EasyRTMP+EasyDSS实现一套完整的紧急视频回传直播与存储回放方案
  • 原文地址:https://www.cnblogs.com/jixiaohua/p/10486970.html
Copyright © 2011-2022 走看看