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

141 阅读1分钟

嵌套函数声明

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;
}

ES6支持块级作用域,上述代码结果为["local","global"]["local"]

提示

  • 始终将函数声明置于程序或被包含的函数的最外层以避免不可移植的行为。
  • 使用var声明和有条件的赋值语句替代有条件的函数声明