带有此关键字的胖箭头或函数（）[重复]

Question

在我问我的问题之前，我会设置一些上下文。

我今天还在学习并做了一个练习，我不得不使用带有“this”关键字的传统函数。

将下面的示例与 console.log 一起使用，我可以检索我想要的值，例如 input.value。

let inputs = document.querySelectorAll(".controls input")
let input = document.querySelector("input")

const handleUpdate(){
 
 console.log(this.value) \\ the output is the value of input.value eg 25
  
}

  inputs.forEach(item=>item.addEventListener("mousemove", handleUpdate))
  inputs.forEach(item=>item.addEventListener("change", handleUpdate))

但是，如果我使用带有粗箭头的 ES6 函数，则它不起作用并得到“未定义”。

在疯狂阅读文章之后，我明白“this”总是指向父对象，例如。全局对象（窗口）（如果我错了，请纠正我。因此，在这种情况下，ES6 函数总是会返回“未定义”。如果我将“this.value”更改为“input.value”，它可以正常工作，见下文。

let inputs = document.querySelectorAll(".controls input")
let input = document.querySelector("input")

const handleUpdate=()=>{
 
 console.log(this.value) \\ undefined
console.log(input.value) \\ the output is the value of input.value eg 25
  
}

  inputs.forEach(item=>item.addEventListener("mousemove", handleUpdate))
  inputs.forEach(item=>item.addEventListener("change", handleUpdate))

我的问题是我应该使用第一种方法，它是带有“this”关键字的传统函数还是带有 ES6 语法的方法（这意味着我不能使用“this”关键字）。我用哪个重要吗？

感谢您对此的任何帮助。

Answer 1

使用传统的函数声明，因为它会将你的handleUpdate()函数与UI分离，所以：

• 您可以在完全不同的文件中实现它，并在需要其功能的任何地方重复使用它
• 函数不需要在使用它的上下文中定义input 变量

如果您仍然怀疑这是否可行，VueJS 还在几个地方使用传统函数，如果使用粗箭头函数，则实际上无法正常工作：

来自Vue's official docs：

不要在选项属性或回调上使用箭头函数，例如created: () => console.log(this.a) [...]。由于箭头函数绑定到父上下文，this 不会是你期望的 Vue 实例，通常会导致诸如Uncaught TypeError: Cannot read property of undefined 之类的错误。

所以，是的，不用担心使用传统函数，特别是如果你能解释你选择背后的原因。

Answer 2

如果我错了，请纠正我。

就方法而言，当我们比较函数和粗箭头函数时，只要我们了解它们之间的区别，这是个人选择，正如 MDN doc 所说

箭头函数表达式是传统函数表达式的紧凑替代方案，但受到限制且不能在所有情况下使用。

mdn doc for arrow function

但是，在阅读了您的方法之后，我建议您使用第一种方法。

一个原因是，如果有任何新开发人员加入团队，并且不了解语法，那么他可能会像您一样在接近解决方案时遇到一些困难。但同样，我们应该尽可能尝试使用最新的代码技术。