ESLint 报错：Unexpected use of 'this' in object literal
在前端开发中，我们常常使用ESLint来规范代码风格和避免一些错误。然而，有些时候，它会给我们带来一些不方便。比如，你在写JavaScript对象字面量时，可能会遇到ESLint报错“Unexpected use of 'this' in object literal”。这是因为在对象字面量中使用'this'会导致一些问题，而 ESLint 会提示我们避免使用它。
这个问题的根源可以追溯到this的指向问题。在JavaScript中，this指的是当前正在执行的函数的执行上下文。在对象字面量中，this的指向可能不是我们所期望的。例如：
const person = { name: "Tom", getName: () => { console.log(this.name); } }
person.getName(); // 输出 undefined
以上代码中，getName是一个箭头函数，箭头函数的this指向是它所处的作用域中的this，而对象字面量本身没有this，所以this指向的是全局作用域中的this，即undefined。
为了避免这个问题，我们可以使用ES6的箭头函数或者使用类来创建对象，而不是使用对象字面量。例如：
class Person { constructor(name) { this.name = name; }
getName() { console.log(this.name); } }
const person = new Person("Tom"); person.getName(); // 输出 "Tom"
这里我们使用了类来创建一个Person对象，并使用构造函数来初始化name属性。getName方法中的this指向的是当前对象实例，因此不会出现问题。
总结一下，避免在对象字面量中使用this是一个好的习惯，可以有效避免一些不必要的错误。如果你必须要使用this，请使用箭头函数或者类来创建对象，这样能够避免this指向问题，更加清晰和可维护。
示例代码如下：
// Good const obj = { name: "Tom", getName() { console.log(this.name); } };
// Better class Person { constructor(name) { this.name = name; }
getName() { console.log(this.name); } }
const person = new Person("Tom"); person.getName(); // 输出 "Tom"
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ccb0f75ad90b6d042ab1c2