将函数转换为箭头函数[重复]

Question

这个问题在这里已有答案：

• What does “this” refer to in arrow functions in ES6? 7个答案

我正在学习ES6，我只想将我的ES5知识转换为ES6。

这是我的ES5代码：

function click() {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
};

这是我的ES6代码：

const click = () => {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
  console.log('RENDERING');
}

我的问题是this.className + ='抢';和setTimeout（（）=>（this.className ='remove'），0）;没有运行该功能。但是console.log显示在日志中。

这种方法对箭头功能不起作用吗？

Answer 1

没有足够的背景来给你一个好的答案，但有一点是突出的。箭头函数保持范围，因此this和function click()中的const click可能会有所不同。在ES6版本中，this将在闭包创建期间引用任何this，这可能不是您想要的。

Arrow Functions at MDN清除它：

箭头函数没有自己的this.

......这意味着this将继承自声明范围。

ES6箭头函数不仅仅是一种声明函数的新方法，而且function myFunction(...)语法没有任何本质上的错误，它也不会消失。在将函数作为参数传递时（例如，对forEach），箭头函数避免了一些冗长，并且在某些情况下避免需要将函数重新绑定到不同的this。将所有函数声明转换为箭头语法不是升级。

Answer 2

原因是你只需要稍微重组一下。

setTimeout(() => {this.className = 'remove'}, 0)

你有括号与花括号。

你的this可能会或可能不会工作，这取决于其他代码中的结构

Answer 3

在箭头函数中，this不是你期望的this。箭头函数中的this是在创建函数时定义的 - 而不是在调用它时。有关详细信息，请参阅here。

感谢@Jaromanda X的评论 - 在这种情况下，继续使用标准功能表示法（function() {...}） - 也就是因为你买了一把新螺丝刀，并不意味着旧锤子仍然不是敲打钉子的最佳工具

Answer 4

       const click = () => {
           console.log(this);
           this.className += ' grab';
          setTimeout(() => (this.className = 'remove'), 0);
          console.log('RENDERING');
      }
      click();

箭头函数中的“this”表示从何处调用。例如，如果我打开浏览器并转到控制台并输入上面的代码，那么'this'将成为窗口对象，因为该函数是从全局环境调用的。箭头函数也没有自己的'this'。

Answer 5

您可以绑定this for arrow函数来访问函数和数据。你的代码应该是这样的

const click = () => {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
  console.log('RENDERING');
}.bind(this)

它将this绑定为箭头功能，您可以访问这些变量和函数。

Answer 6

箭头函数表达式是常规函数表达式的语法紧凑替代方法，尽管它没有自己的this，arguments，super或new.target关键字绑定。箭头函数表达式不适合作为方法，它们不能用作构造函数。