14.当心命名函数表达式笨拙的作用域

297 阅读2分钟

相同的JavaScript函数根据上下文其含义会发生变化。

// 在程序的顶层作为函数声明
function double() { return x * 2; }
// 作为函数表达式
var f = function double(x) { return x * 2; };
// 匿名函数表达式
var f = function(x) { return x * 2; };

命名函数表达式会绑定到与其相同函数名相同的变量上,该变量将作为该函数内的一个局部变量,可以用来写递归函数表达式(命名函数表达式不能通过其内部的函数名在外部被引用)。

var f = function find(tree, key) {
    if (!tree) {
        return null;
    }
    if (tree.key === key) {
        return tree.value;
    }
    return find(tree, left, key) || find(tree, right, key);
}

使用外部作用域的函数名也可到达同样的效果

var f = function(tree, key) {
    if (!tree) {
        return null;
    }
    if (tree.key === key) {
        return tree.value;
    }
    return f(tree, left, key) || f(tree, right, key);
}

只使用一个声明

function find(tree, key) {
    if (!tree) {
        return null;
    }
    if (tree.key === key) {
        return tree.value;
    }
    return find(tree, left, key) || find(tree, right, key);
}
var f = find;

在ES3和有问题的JavaScript环境中命名函数表达式在其作用域内继承了Object.prototype.constructor

var construction = function() { return null; };
var f = function f() {
    return construction ();
}
f(); // {}

在一些JavaScript引擎中另一个缺陷是对命名函数表达式的声明进行提升

var f = function g() { return 17; };
g(); // 17
// 通过创建一个与函数表达式同名的局部变量并赋值为null来解决
var f = function g() { return 17; };
var g = null;

提示

  • 在Error对象和调试器中使用命名函数表达式改进栈跟踪。
  • 在ES3和有问题的JavaScript环境中谨记函数表达式作用域会被Object.prototype污染。
  • 谨记在错误百出的JavaScript环境中会提升命名函数表达式声明,并导致命名函数表达式的重复存储。
  • 考虑避免使用命名函数表达式或在发布前删除函数名。
  • 如果你将代码发布到正确实现的ES5环境中,那么你没有什么好担心的。