震惊，Object.hasOwnProperty的正确调用方法

最新推荐文章于 2024-10-11 00:15:00 发布

原创最新推荐文章于 2024-10-11 00:15:00 发布 · 922 阅读

2 ·

CC 4.0 BY-SA版权

arr[0] = javascript 专栏收录该内容

12 篇文章

订阅专栏

探讨ESLint为何禁用hasOwnProperty直接调用，及其潜在的安全风险与合理性。介绍了两个主要原因：一是对象可能自有一个名为hasOwnProperty的属性，导致调用混乱；二是使用Object.create(null)创建的对象没有prototype，进而没有hasOwnProperty方法。并提供了合理的解决方案。

今天在家写一个Vue的项目时使用Object.hasOwnProperty时出现一个错误，代码差不多如下：

let data = {a:1, b:2};
for(let key in data) {
    if (data.hasOwnProperty(key) {
        //todo...
    }
}

在执行类似上述代码时直接报错：

为啥hasOwnProperty都不让我用了，还有没有天理。

后来发现原来是ESLint禁用的原因，但ESLint为啥要禁用呢，在翻阅文章后发现hasOwnProperty还真是不要直接调用的好。

原因有二：

第一个是“JavaScript 并没有保护 hasOwnProperty 这个属性名，因此，当某个对象可能自有一个占用该属性名的属性时，就需要使用外部的 hasOwnProperty 获得正确的结果。”也就是说对象可以使用hasOwnProperty作为属性名，例如向服务器发送一个恶意json，如：{"hasOwnProperty": null} 发送给web服务器，web服务器解析json后调用hasOwnProperty就会崩溃。

第二个是Object.create的问题，在使用Object.create(null)创建对象时，虽然创建的对象为{}，但prototype却是undefined，也就意味着没有hasOwnProperty方法，再调用hasOwnProperty方法会使代码报错。

let data = Object.create(null)

console.log(data) // {}
data.prototype // undefined
data.hasOwnProperty // undefined

那怎么使用才合理呢，很简单，直接使用Object.prototype.hasOwnProperty，让我们修改一下我们的代码：

let data = {a:1, b:2};
let hasOwnProperty = Object.prototype.hasOwnProperty;

for(let key in data) {
    if (hasOwnProperty.call(data, key) {
        //todo...
    }
}

这下ESLint就不报错了，使用也更安全更合理。