解决 ESLint 错误：'this' is not allowed

前言

在进行前端开发的时候，使用 ESLint 是一个很好的实践。然而，有时在编码过程中会出现 'this' is not allowed 这样的错误。这篇文章将介绍这个错误的原因，并提供一些解决方案。希望对正在学习前端的小伙伴们有所帮助。

错误原因

在 JavaScript 中，this 关键字指向当前对象。然而，this 的指向在不同的情况下可能会有所不同。在 JavaScript 中，this 的值取决于当前函数的调用方式。

当在一个对象中调用方法时，this 指向该对象。

const obj = {
  name: 'John',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // 'John'

当直接调用一个函数时，this 指向全局对象。

function sayHello() {
  console.log(this); // window
}

sayHello();

对于箭头函数，this 指向定义时的上下文。

const obj = {
  name: 'John',
  sayName: () => {
    console.log(this.name); // 'John'
  }
};

obj.sayName();

然而，在使用 ESLint 时，有时候会出现 'this' is not allowed 的错误。这是因为 ESLint 遵循一套严格的规则，禁止使用 this 关键字。

解决方案

不使用 this

在一些情况下，可以通过不使用 this 来避免错误。例如，可以使用 bind 方法或者箭头函数来绑定上下文。

-- -------------------- ---- -------
-- -- ----
----- --- - -
  ----- -------
  -------- ---------- -
    -----------------------
  -
--

----- ------------ - ----------------------
--------------- -- ------

-- ------
----- --- - -
  ----- -------
  -------- -- -- -
    ----------------------
  -
--

-------------- -- ------

在某些情况下，可能需要使用回调函数。在这种情况下，可以使用 that 或者 self 来保存上下文。

-- -------------------- ---- -------
----- --- - -
  ----- -------
  -------- ---------- -
    --------------------- -
      ----------------------
    -- ------
  -
--

--------------

在 ESLint 中配置允许 this

如果想在 ESLint 中使用 this，可以进行配置来解决这个问题。可以将 eslint-plugin-this 添加到项目中，并在 .eslintrc 文件中添加以下配置。

{
  "plugins": [
    "this"
  ],
  "rules": {
    "this/no-this": "off"
  }
}

这会禁用 this/no-this 规则，允许使用 this 关键字。

总结

在本文中，我们介绍了 'this' is not allowed 错误的原因，并提供了一些解决方案。在开发过程中，遵循代码规范是一个好的实践。通过了解为什么会出现错误，并学习如何排除错误，可以加强我们的前端开发技能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e95c05f6b2d6eab34aa088