es6返回动态命名的箭头函数

Question

如果可能，返回命名箭头函数的最简单方法是什么？

const add = a => b => b + a
const add5 => add(5)

add.name == 'add' // true
add5.name == '' // true, but I would like it to be 'add5'

所以，正如上面的例子所示，返回的箭头函数是匿名的，我希望它被命名（理想情况下基于'父'函数和'参数'a） - 其中是有用的，即用于调试。

Answer 1

你可以这样做：

＆＃13;

＆＃13;

const add = a => (({[`add${a}`]: b => b + a})[`add${a}`]);
const add5 = add(5);

console.log(add5.name);

＆＃13;

＆＃13;

＆＃13;

工作原理：定义一个本地对象，并将箭头方法指定为具有所需名称的成员：

const add = a => {
  const o = {
    [`add${a}`]: b => b + a
  };
  return o[`add${a}`];
};

Answer 2

这不完全相同，但是：

const add = a => b => a + b;
const add5 = (...a) => add(5)(...a);

console.log(add5(100));  // => 105
console.log(add5.name);  // => 'add5'

div{min-height:100%}

Answer 3

此示例演示如何分配箭头函数名称，并且无法更改此行为。箭头函数name等于分配给它的变量或对象属性的名称。

name是不可写属性，但在大多数实现中都是可配置的，包括常绿浏览器，因此可以安全地用于调试目的：

function namedArrow(name, fn) {
  Object.defineProperty(fn, 'name', { enumerable: false, value: name });
  return fn;
}

const foo = namedArrow('foo!', () => { throw new Error });
foo();

输出：

[

出于调试目的，displayName也可以使用，它应该扮演相同的角色，并得到一些调试器和浏览器调试器工具的支持，特别是Firefox和Chrome：

function namedArrow(name, fn) {
  fn.displayName = name;
  return fn;
}

它会产生类似的输出，但它与Error调用堆栈不能很好地匹配：