轶哥

📚 Having fun with AI Agent. Always learning.

    关于JavaScript作用域与函数提升的一道思考题
    •   更新:2021-05-12 08:36:53
    •   首发:2021-05-12 01:37:23
    •   教程
    •   4791

    在某个JavaScript前端群里面,网友深圳-resolve发的一道关于JavaScript作用域与函数提升的思考题引发了众位大佬的讨论。

    题目

    console.log(a)
    if (true) {
        a = 2
        function a () {}
        a = 3
        console.log('内部', a)
    }
    console.log('外部', a)
    

    执行结果:

    image.png

    打印a在所有位置的值:

    image.png

    疑点

    1. 为什么第一个console没有报错?(为什么没有发生a is not defined报错?)
    2. 为什么外部a的值为2

    答疑

    拆解问题

    我们先把这个复杂问题拆解成几个小问题,逐一解决。

    1. if语句里面的函数定义对全局有何影响?
    2. var声明的变量、无var声明的变量对函数定义分别有什么样的影响?

    为什么第一个console没有报错?(为什么没有发生a is not defined报错?)

    image.png

    正常情况下打印一个未被定义的值是会直接报错的。但是如果存在函数定义,那么就会出现函数提升的情况。

    这是所有JavaScript程序员都知道的常识

    然而如果函数声明可能出现在一个 if 语句里,在不同的浏览器将会得到不同的结果。

    image.png

    详情参阅:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function

    也就是说,在Chrome浏览器中,

    console.log(a)
    if (true) {
        function a() {}
    }
    

    a被提升,可以看作是:

    var a = undefined
    console.log(a)
    if (true) {
        a = function () {}
    }
    

    因此第一个console没有报错。而且函数只在程序执行到定义位置的时候赋给已被提升的变量a。因此在Chrome浏览器中,if判断条件能影响后续函数a是否能够被执行。

    例如:

    image.png

    image.png

    同样的代码在Safari中,是这样的:

    image.png

    为什么外部a的值为2

    根据上一步得到的结论,我们将a=2加入到单元测试里再进行测试。

    image.png

    我们发现位于函数体之前的赋值操作修改了a的全局作用域。

    这是因为不使用var定义的变量,在块级作用域视为定义全局变量window.a

    此时我们将a=3放置回去。

    image.png

    根据第一个问题的结论,和我们熟知的函数提升原则,以及函数声明的提升优于变量提升的规则,可以视作如下代码:

    
    window.a = undefined
    console.log(1, a)
    if (true) {
        window.a = function () {}
        console.log(2, window.a) // 非严格模式的函数提升也导致 a 在全局作用域被提升,此时window.a是function
        window.a = 2 // 由于没有添加var声明变量a,因此此时全局变量 a 变为了 2
        console.log(3, window.a)
        // function a () {} 被提升到全局最前方了
        let a = window.a // 由于Chrome的策略,此时函数声明处将创建局部变量a
        a = 3 // 此时再对a进行赋值,修改的是块级作用域的a
        console.log(4.1, window.a)
        console.log(4.2, a)
    }
    console.log(5, a)
    

    由于浏览器差异,同样的代码在Safari浏览器得到不一致的结果:

    image.png

    结论

    问题性质

    这类问题不适合作为面试题或者笔试题,虽然能考察对函数、变量的理解,但是涉及的特殊情形太多。

    如何避免类似问题的产生?

    使用严格模式 + ES6

    使用严格模式 + ES6,在不同浏览器都能得到一致的结果。

    Chrome:

    image.png

    Safari: image.png

    使用let定义局部函数

    在结构体内定义函数尽量使用let,避免函数被提升到外部。

    "use strict";
    if (true) {
        let a = () => {
            console.log('ok')
        }
        a();
    }
    a()
    

    感谢

    感谢Johnson木马啊、清明雨上、imakan、幻☆精灵、Kapok、青山几重、田热、北城之阙等网友提供的解答思路。

    打赏
    交流区(3)
    欢乐马

    大佬666

    2021年5月13日 14:18回复
    秦瑞

    是不是还有一个解决方法:函数和变量不要重名

    2024年9月23日 12:38回复
    轶哥

    嗯嗯,但最好还是用let

    2024年9月23日 14:07回复
    尚未登陆
    发布
      上一篇 (Linux/Win/OMV5 安装WebDAV服务)
    下一篇 (Win10中通过WSL2开发基于Electron的Ubuntu应用程序)  

    评论回复提醒