向对象声明添加函数名称有什么好处?

时间:2015-09-21 02:26:10

标签: javascript gulp webpack

例如,当我将一个函数指定为对象声明的属性时,我的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]);
    }
  }
}

[比较:函数(a,b)已更改为比较:函数比较(a,b)]

2 个答案:

答案 0 :(得分:1)

为调试和递归目的命名所有函数是一个很好的做法。 Babel使用加载器对转换后的代码执行此操作,这不是Webpack的工作。

答案 1 :(得分: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;
}

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

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

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