Do not access Object.prototype method 'hasOwnProperty' 问题原因及解决方法

如何修复ESLint错误：请勿从目标对象无原型内置对象访问Object.prototype方法'hasOwnProperty'

使用 Vue.js 启动新项目将自动生成配置为与 ESLint 一起使用的样板。ESLint 是可插拔和可配置的 Linter 工具，可帮助您识别和报告 JavaScript 中的不良模式，因此您可以轻松维护代码质量。如果您在不受控制的情况下开始编程，则可能会引入一些 ESLint 不建议的写法。举个简单的例子，如，检查某个对象是否具有特定的属性：

let events = {"some-index": false};
let key = "some-index";
if(events.hasOwnProperty(key)){
    // Do Something ...
    console.log("The object has the property");
}

由于存在 no-prototype-builtins 规则，这将在您尝试构建应用程序时触发提到的异常。在ECMAScript 5.1 中，Object.create添加了该方法，该方法可以创建具有指定[[Prototype]]的对象。Object.create（null）是用于创建将用作Map的对象的常见模式。当假设对象将具有from的属性时，这可能会导致错误Object.prototype。该规则no-prototype-builtins防止Object.prototype直接从对象调用方法。有关no-prototype- builtins的更多信息，请在此处访问ESLint的官方文档。

在本文中，我将与您分享不同的方法，以避免在尝试构建应用程序时出现此错误。

解决方案

有多种方法可以避免此错误，第一种方法是简单地从Object的原型访问hasOwnPropertyMethod并使用call执行函数：

let events = {"some-index": false};
let key = "some-index";
if(Object.prototype.hasOwnProperty.call(events, key)) {
    // This would compile without any issue !
    console.log("The object has the property");
}

只要您没有做任何使属性不可枚举的检查对象的等效方法：

let events = {"some-index": false};
let key = "some-index";
if({}.propertyIsEnumerable.call(events, key)) {
    // This would compile without any issue !
    console.log("The object has the property");
}

或通过getOwnPropertyDescriptor方法：

let events = {"some-index": false};
let key = "some-index";
if(!!Object.getOwnPropertyDescriptor(events, key)) {
    // This would compile without any issue !
    console.log("The object has the property");
}

编码愉快❤️！

---