在对象声明中添加函数名有什么好处？答案

【问题标题】：What would be the benefit of adding a function name to an object declaration?在对象声明中添加函数名有什么好处？
【发布时间】：2015-09-21 02:26:10
【问题描述】：

例如，当我将函数分配为对象声明的属性时，我的 Webpack 加载器 babel-loader 会自动添加函数名称吗？例如，假设我有以下比较函数：

var utils = {
  compare: function (a, b) {
    if (parseFloat(a[0]) - parseFloat(b[0]) === 0) {
      return parseFloat(a[1]) - parseFloat(b[1]);
    }
    else {
      return parseFloat(a[0]) - parseFloat(b[0]);
    }
  }
}

Webpack 会将其编译为以下内容：

var utils = {
  compare: function compare(a, b) {

    if (parseFloat(a[0]) - parseFloat(b[0]) === 0) {
      return parseFloat(a[1]) - parseFloat(b[1]);
    } else {
      return parseFloat(a[0]) - parseFloat(b[0]);
    }
  }
}

[compare: function (a,b) 已改为 compare: function compare (a,b)]

【问题讨论】：

调试有用，写起来很痛苦。
不是 webpack 做的，而是一个 loader
@elclanrs 你能详细说明一下吗？
@Razroo-Chief：在 devtools 中，您会看到函数的名称而不是（匿名）。

标签： javascript gulp webpack

【解决方案1】：

在您在问题中发布的代码中，确实没有什么好处。但是，要递归调用匿名函数，您需要为其命名（至少在较新版本的 javascript 中）。此语法有一个名称。它被称为named function expression。

在旧版本的 javascript 中，arguments 对象有一个名为 .callee 的属性，它引用该函数。这可以用于递归到匿名函数：

var sum = function(numbers){
    var n = numbers.pop();
    if (numbers.length) {
        return n + arguments.callee(numbers);
    }
    return n;
}

arguments.callee 属性在 ES5 中已被弃用。因此，在当前（和更新）版本的 javascript 中，您需要使用命名函数表达式对匿名函数进行递归：

var sum = function s (numbers){
    var n = numbers.pop();
    if (numbers.length) {
        return n + s(numbers);
    }
    return n;
}

请注意，根据规范，命名函数表达式的名称是函数本身私有的。因此，在没有错误的 javascript 解释器/编译器中，上面的第二个示例不应在匿名函数 sum() 之外创建名为 s() 的函数。但是，已知某些 ES4 实现（旧版浏览器）会被破坏，并且会同时创建 s() 和 sum()。除了名称泄漏之外，命名函数表达式语法适用于过去 10 年左右发布的所有浏览器。

【讨论】：

【解决方案2】：

为调试和递归目的命名所有函数只是一个好习惯。 Babel 用 loader 对转译的代码做这件事，这不是 Webpack 的工作。

【讨论】：