Object.hasOwn() 对比 Object.prototype.hasOwnProperty()

Question

新方法 Object.hasOwn() returns 一个布尔值，指示指定对象是否将指示的属性作为其自身属性但 Object.prototype.hasOwnProperty() 也是如此，它们之间有什么区别，使用一个比另一个有什么好处？

Answer 1

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

Object.hasOwn() 旨在替代 Object.hasOwnProperty() 并且是一种可用的新方法（但仍未完全支持所有浏览器，如 safari，但很快就会支持）

Object.hasOwn() 是一个静态方法，如果指定的对象具有指定的属性作为它自己的属性，则 returns 为真。如果属性被继承，或者不存在，方法 returns false.

const person = { name: 'dan' };

console.log(Object.hasOwn(person, 'name'));// true
console.log(Object.hasOwn(person, 'age'));// false

const person2 = Object.create({gender: 'male'});

console.log(Object.hasOwn(person2, 'gender'));// false

建议在 Object.hasOwnProperty() 上使用此方法，因为它也适用于使用 Object.create(null) 创建的对象以及已覆盖继承的 hasOwnProperty() 方法的对象。虽然可以通过在外部对象上调用 Object.prototype.hasOwnProperty() 来解决此类问题，但 Object.hasOwn() 克服了这些问题，因此是首选（参见下面的示例）

let person = {
  hasOwnProperty: function() {
    return false;
  },
  age: 35
};

if (Object.hasOwn(person, 'age')) {
  console.log(person.age); // true - the remplementation of hasOwnProperty() did not affect the Object
}

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

Object.hasOwn() 对比 Object.prototype.hasOwnProperty()

Object.hasOwn() vs Object.prototype.hasOwnProperty()

javascript

prototypal-inheritance

javascript-objects

hasownproperty

hasown