今天在家写一个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就不报错了,使用也更安全更合理。