JS的解析与执行过程—全局预处理阶段之命名冲突的处理策略

更新日期: 2019-03-07阅读: 2.1k标签: 命名分享

复制链接

新浪微博

QQ 好友

扫一扫分享

有如下代码：

<body>
    <script>
        alert(f);
        
        function f() {
            console.log("fff");
        }
        var f = 5;
    </script>
</body>

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

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

处理函数声明有冲突，会覆盖；
处理变量声明有冲突，会忽略；

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

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

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

总结：有如下代码：

<script>
        alert(a);
        // alert(b);
        alert(f);
        alert(g);

        var a = 5;
        b = 6;
        alert(b);
        function f() {
            console.log("fff");
        }
        var g = function() {
            console.log("ggg");
        }
        alert(g);
    </script>

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

window = {
        f: 函数引用,
        a: undefined,
       g: undefined
 }

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

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

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

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

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

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

链接: https://www.fly63.com/article/detial/2259

JS的解析与执行过程—全局预处理阶段之命名冲突的处理策略

这些 CSS 命名规范将省下你大把调试时间

web前端开发_文件/目录/样式/函数等命名规范

CSS命名规范_常用的CSS命名规则

如何看待CSS中BEM的命名方式?

BEM的命名规范

常用的CSS命名规则

是否需要重新命名 JavaScript？

前端BEM命名方式的思考

大驼峰命名规则是什么？

小驼峰命名规则是什么？