15.当心局部块函数声明笨拙的作用域

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_33882443

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a697dbb518825733b0f1298

本文探讨了JavaScript中嵌套函数声明的行为变化，特别是在ES5到ES6的过渡中。介绍了如何正确地使用函数声明和表达式以确保代码的可移植性。

嵌套函数声明

function f() {
    return "global";
}

function test(x) {
    function f() {
        return "local";
    }
    var result = [];
    if (x) {
        result.push(f());
    }
    result.push(f());
    return result;
}

test(true); // ["local","local"]
test(false); // ["local"]
复制代码

如果我们把函数f移到局部块里。

function f() {
    return "global";
}

function test(x) {
    var result = [];
    if (x) {
        function f() {
            return "local";
        }
        result.push(f());
    }
    result.push(f());
    return result;
}

test(true); // ？
test(false); // ？
复制代码

ES5里面JavaScript没有块级作用域，所以内部函数f的作用域应该是整个test函数，上述例子合理猜测是["local","local"]和["local"]。直到ES5，JavaScript标准才承认局部块函数声明存在，官方指定函数声明只能出现在在其他函数或程序的最外层。ES5甚至建议将在非标准环境的函数声明转变成警告或错误。

编写可移植的函数的最好方式是始终避免将函数声明至于局部块或子语句中。如果你想编写嵌套函数声明，应该将它置于其父函数的最外层。如果需要有条件地选择函数，最好的办法是使用var声明和函数表达式来实现。

function f() {
    return "global";
}

function test(x) {
    var g = f,
        result = [];
    if (x) {
        function g() {
            return "local";
        }
        result.push(g());
    }
    result.push(g());
    return result;
}
复制代码