JS {}代码块中关于函数声明的问题

最新推荐文章于 2023-03-25 19:55:10 发布

原创最新推荐文章于 2023-03-25 19:55:10 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

web 专栏收录该内容

23 篇文章

订阅专栏

探讨JavaScript中函数声明在代码块内的行为变化，分析其与函数表达式的区别，以及在不同上下文中函数声明如何被处理。

JS {}代码块中关于函数声明的问题

正常情况下函数声明会有声明提升的现象，会被提升到当前作用域的顶部，但如果函数声明出现在代码块中会出现不一样的情况。（IE10以下版本除外）

	foo()
        var a = true;
        if (a) {
            function foo() {
                console.log("a");
            }
        } else {
            function foo() {
                console.log("b");
            }
        }

运行这段代码按照正常声明提升的理解，应该会打印b，但这里会直接报错
在这里插入图片描述
也许可以解释为if和else，这时a没有值所以函数没有值，但看下面这个例子

  foo()
        {
            function foo() {
                console.log("a");
            }
        }

在这里插入图片描述
这里依然报错，而且不是报"foo is not defined",这里报了一个"foo is not a function"。接下来看这段代码

foo()
        var foo = function (){
            console.log("a")
        }

在这里插入图片描述
        可以看到这里的报错和函数表达式的声明提升报错一样，回到第一个例子，我们不直接调用，直接console.log(foo)

        undefined说明当前作用域是有foo变量的，但它的值为undefined所以不能直接调用。
        因此有可能函数声明在代码块中会被转换成表达式声明，在全局作用域中创建了这个变量明，但具体的值需要在代码执行后才会被赋予。

foo()
        {
            function foo() {
                console.log("a");
            }
        }

拿这个例子来说，应该与下列代码类似

foo()
        {
         var foo = function() {
                console.log("a");
            }
        }

具体是显示声明提升还是隐式声明提升呢，这里只需要执行一下
delete window.foo 看看foo是否还存在，结果foo是删除不掉的，说明这里应该是显示声明提升。