箭头功能难以追踪吗？

Question

我刚才了解到,写下这个:

const setName = name => {
  // set name here
}

与此相反,这是坏事

function setName(name) {
  //set name here
}

原因是第一种方法使调试与该函数相关的问题变得困难,因为它不会出现在堆栈跟踪中.

问题:为什么这不会出现在堆栈跟踪中？

Answer 1

箭头功能难以追踪吗？

不,如果您指的是能够调试它们,堆栈跟踪等,它们就像任何其他函数一样可追踪.

我刚才了解到,写这篇文章......与此相反......

不,不是.这不一样.这不是客观上不好的 .¹

原因是第一种方法使调试与该函数相关的问题变得困难,因为它不会出现在堆栈跟踪中.

是的,它会的.如果有人告诉你它不会,那就错了:

const setName = name => {
  throw new Error("Ack!");
};

const wrapper = name => setName(name);

wrapper("foo");

Look in the real console.

如果你运行它,你会在控制台中看到这个:

注意如何列出setName和wrapper.

谁告诉你这可能是你的箭头功能没有名称的印象.他们也错了.

¹事实上,另一种方式有一些参数:箭头函数没有prototype属性和与之关联的对象,调用它不需要设置新的this绑定或arguments伪对象和绑定(因为箭头不是没有自己的this,arguments或[相关的] super).所以从理论上讲,它的重量更轻.反驳这是一个可读性问题 - "我没有意识到这是一个功能" - 尽管我怀疑人们会习惯箭头功能.

Answer 2

无论是谁告诉您这一点，都可能会认为您的箭头函数没有名称。他们也错了。

情况似乎并不总是如此。“匿名”函数只有在分配给变量时才会被命名。

const f = () => () => { debugger; };
const h = f();
const g = () => { debugger; };


console.log(f.name) // "f"
console.log(h.name) // ""
console.log(g.name) // "g"


h();
g();

调用 h() 具有以下堆栈跟踪：

而调用 g() 有以下堆栈跟踪：

请注意“g”是如何命名的，而“h”只是表示“匿名”。

因此，如果您按照上面示例中 f 的编写方式定义部分应用函数，您可能会遇到一些人正在讨论的问题。

我想如果您依赖其他人向您报告错误并向您发送他们的堆栈跟踪，那么这将主要是一个问题，因为如果您在开发时点击 if ，您将能够单击它并查看它。

在某些示例中，您可能可以使用行号到达那里，但如果有人为您提供某些捆绑代码的堆栈跟踪，那么这可能会成为一个更大的问题。

您可以通过将函数命名为其他函数的“内部”来避免这种情况......

const f1 = () => {
  const named = () => { debugger; };
  return named;
}

// or

const f2 = () => { 
  return function named() { debugger; }
};