ESLint 如何解决 “'this' is not allowed before super()” 报错

在使用 ES6 中的类继承时，我们经常会遇到 “'this' is not allowed before super()” 报错。这个错误提示通常是由于我们在子类的构造函数中使用了 this 关键字，而在 super() 之前使用了它。这里我们将介绍如何使用 ESLint 来解决这个问题。

ESLint 简介

ESLint 是一个开源的 JavaScript 代码检查工具，它可以用来检查代码中的语法错误、未定义变量、未使用变量、代码风格等等。ESLint 可以通过配置文件来实现对应用程序的自定义规则。

ESLint 配置

在使用 ESLint 之前，我们需要先安装它。可以通过 npm 来安装：

npm install eslint --save-dev

安装完成后，我们需要配置 ESLint。创建一个 .eslintrc.json 文件，并添加以下内容：

// javascriptcn.com 代码示例
{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "warn"
  }
}

我们使用了 extends 来继承了 ESLint 推荐的规则，使用了 parserOptions 来指定使用 ES2018 的语法，使用了 rules 来指定了一个规则，即禁止在代码中使用 console 函数。

解决 “'this' is not allowed before super()” 报错

我们可以使用 ESLint 的 no-this-before-super 规则来解决 “'this' is not allowed before super()” 报错。在 .eslintrc.json 文件中添加以下内容：

// javascriptcn.com 代码示例
{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "warn",
    "no-this-before-super": "error"
  }
}

这里我们将 no-this-before-super 的值设置为 error，表示如果在 super() 之前使用了 this，则会抛出错误。

示例代码

下面是一个示例代码，展示了如何在子类的构造函数中使用 super() 来解决 “'this' is not allowed before super()” 报错：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

在上面的代码中，我们使用了 super() 来调用父类的构造函数，并将 name 传递给了它。在 super() 之后，我们再使用 this 来定义了 breed。

总结

ESLint 是一个非常有用的工具，它可以帮助我们检查代码中的语法错误、未定义变量、未使用变量、代码风格等等。在使用 ES6 中的类继承时，我们经常会遇到 “'this' is not allowed before super()” 报错。我们可以使用 ESLint 的 no-this-before-super 规则来解决这个问题。通过示例代码的演示，我们可以更好地理解和掌握这个问题的解决方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656dbe98d2f5e1655d5fcf08