ES12 中的 Object.hasOwn() 在对象属性检查中的优势

在前端开发中，对象属性检查是一个很常见的操作。在 ES6 之前，我们通常使用 Object.hasOwnProperty() 方法来判断一个对象是否具有某个属性。但是，这种方法存在一些缺陷。在 ES12 中，新增了 Object.hasOwn() 方法，它在对象属性检查中具有优势。

Object.hasOwnProperty() 的缺陷

Object.hasOwnProperty() 方法用于判断一个对象是否具有指定的属性。它的使用方法如下：

const obj = { foo: 'bar' };
if (obj.hasOwnProperty('foo')) {
  console.log('obj has property foo');
}

这种方法看起来很简单，但是它存在一些缺陷。首先，它只能判断对象自身是否具有某个属性，而不能判断原型链上是否存在该属性。其次，它无法处理一些特殊的属性名，比如 '__proto__'。

Object.hasOwn() 的优势

Object.hasOwn() 方法在对象属性检查中具有优势，它解决了 Object.hasOwnProperty() 存在的缺陷。它的使用方法如下：

const obj = { foo: 'bar' };
if (Object.hasOwn(obj, 'foo')) {
  console.log('obj has property foo');
}

相比于 Object.hasOwnProperty() 方法，Object.hasOwn() 方法有以下几个优势：

1. 可以判断原型链上是否存在属性

Object.hasOwn() 方法可以判断原型链上是否存在属性。如果一个对象的原型链上存在一个属性，Object.hasOwn() 方法仍然会返回 false。

// javascriptcn.com 代码示例
const parent = { foo: 'bar' };
const child = Object.create(parent);
if (child.hasOwnProperty('foo')) {
  console.log('child has property foo');
} else {
  console.log('child does not have property foo');
}
if (Object.hasOwn(child, 'foo')) {
  console.log('child has property foo');
} else {
  console.log('child does not have property foo');
}

上面的代码中，child 对象的原型是 parent 对象，parent 对象具有属性 'foo'。使用 child.hasOwnProperty('foo') 方法判断 child 对象是否具有属性 'foo'，返回的是 false。但是，使用 Object.hasOwn(child, 'foo') 方法判断 child 对象是否具有属性 'foo'，返回的是 true。

2. 可以处理特殊的属性名

Object.hasOwn() 方法可以处理特殊的属性名，比如 '__proto__'。

// javascriptcn.com 代码示例
const obj = { '__proto__': 'bar' };
if (obj.hasOwnProperty('__proto__')) {
  console.log('obj has property __proto__');
} else {
  console.log('obj does not have property __proto__');
}
if (Object.hasOwn(obj, '__proto__')) {
  console.log('obj has property __proto__');
} else {
  console.log('obj does not have property __proto__');
}

上面的代码中，obj 对象具有属性 '__proto__'，但是使用 obj.hasOwnProperty('__proto__') 方法判断 obj 对象是否具有属性 '__proto__'，返回的是 false。但是，使用 Object.hasOwn(obj, '__proto__') 方法判断 obj 对象是否具有属性 '__proto__'，返回的是 true。

总结

Object.hasOwn() 方法在对象属性检查中具有优势，它可以判断原型链上是否存在属性，可以处理特殊的属性名。使用 Object.hasOwn() 方法，可以更加准确地判断一个对象是否具有某个属性。

示例代码

// javascriptcn.com 代码示例
// 判断一个对象是否具有某个属性
const obj = { foo: 'bar' };
if (Object.hasOwn(obj, 'foo')) {
  console.log('obj has property foo');
} else {
  console.log('obj does not have property foo');
}

// 判断一个对象是否具有原型链上的某个属性
const parent = { foo: 'bar' };
const child = Object.create(parent);
if (Object.hasOwn(child, 'foo')) {
  console.log('child has property foo');
} else {
  console.log('child does not have property foo');
}

// 处理特殊的属性名
const obj2 = { '__proto__': 'bar' };
if (Object.hasOwn(obj2, '__proto__')) {
  console.log('obj2 has property __proto__');
} else {
  console.log('obj2 does not have property __proto__');
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656eb384d2f5e1655d6ed970