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

最新推荐文章于 2025-09-06 08:01:57 发布

weixin_34082789

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

本文探讨了JavaScript中函数表达式的不同形式及其行为差异，包括命名函数表达式的作用域问题及其实现递归的方法，同时也讨论了如何避免在某些JavaScript环境中出现的问题。

相同的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环境中，那么你没有什么好担心的。