this 关键字不适用于箭头函数

Question

我正在学习 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 += 'grab'; 和 setTimeout(() => (this.className = 'remove'), 0); 没有运行函数。但是 console.log 显示在日志中。

Is this method don't work on arrow functions?

Answer 1

没有足够的上下文来给你一个好的答案，但有一件事很突出。箭头函数保持作用域，因此 function click() 和 const click 中的 this 很可能不同。在 ES6 版本中，this 将引用闭包创建期间 this 的任何内容，这可能不是您想要的。

Arrow Functions at MDN 清除：

An arrow function does not have its own this.

…这意味着 this 将从声明范围继承。

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

Answer 2

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

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

你有括号和花括号。

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

Answer 3

在箭头函数中，this 不是您期望的 this。 Arrow Functions 中的 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' 将变为 window 对象，因为该函数是从全局环境调用的。箭头函数也没有自己的 'this'.

Answer 5

您可以为箭头函数绑定this以访问函数和数据。您的代码应该类似于

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

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

Answer 6

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

this 关键字不适用于箭头函数

The this keyword not working with arrow functions

javascript

function

arrow-functions