Object.hasOwn() 与 Object.prototype.hasOwnProperty()

问题描述 投票:0回答:1

新方法

Object.hasOwn()
返回一个布尔值,指示指定对象是否将指定属性作为其自己的属性,但
Object.prototype.hasOwnProperty()
也是如此,它们之间有什么区别以及使用其中一个相对于另一个的好处是什么?

javascript javascript-objects prototypal-inheritance hasownproperty
1个回答
56
投票

使用

Object.hasOwn()
替代
Object.hasOwnProperty()

Object.hasOwn()
旨在替代
Object.hasOwnProperty()
,并且是一种可供使用的新方法(尚未完全支持 safari 等所有浏览器,但很快就会支持)

Object.hasOwn()
是一个静态方法,如果指定对象将指定属性作为其自己的属性,则返回 true。如果该属性是继承的,或者不存在,该方法返回 false。

const person = { name: 'John' };
console.log(Object.hasOwn(person, 'name'));// true
console.log(Object.hasOwn(person, 'age'));// false

console.log(person.hasOwnProperty('name'));// true
console.log(person.hasOwnProperty('age'));// false

const person2 = Object.create({gender: 'male'});
console.log(Object.hasOwn(person2, 'gender')); // false
console.log(person.hasOwnProperty('gender')); //false
 
// gender is not an own property of person, it exist on the person2 prototype

所以,在查看了

Object.hasOwn()
Object.hasOwnProperty()
的实际效果后,它们看起来非常相似。那么为什么我们应该使用
Object.hasOwn()
而不是
Object.hasOwnProperty()
呢?

建议使用此方法而不是

Object.hasOwnProperty()
,因为它也适用于使用
Object.create(null)
创建的对象以及覆盖继承的
hasOwnProperty()
方法的对象。虽然可以通过在外部对象上调用
Object.prototype.hasOwnProperty.call(<object reference>, <property name>)
来解决此类问题,但
Object.hasOwn()
克服了这些问题,因此是首选(请参阅下面的示例)

let person = {
  hasOwnProperty: function() {
    return false;
  },
  age: 35
};
 
console.log(Object.hasOwn(person, 'age')); // true
console.log(person.hasOwnProperty('age')); // false

let person = Object.create(null);
person.age = 35;
if (Object.hasOwn(person, 'age')) {
  console.log(person.age); // true - works regardless of how the object was created
}

if (person.hasOwnProperty('age')){ // throws error - person.hasOwnProperty is not a function
   console.log('hasOwnProperty' + person.age);
}

有关

Object.hasOwn
的更多信息可以在这里找到:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn

浏览器兼容性 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn#browser_compatibility

© www.soinside.com 2019 - 2024. All rights reserved.