JS `Object.hasOwn` (ES2022)：更安全的属性检查替代 `hasOwnProperty`

嗨，大家好！今天咱们聊聊 JavaScript 里的小秘密：Object.hasOwn()。

大家好啊！今天咱不聊那些高大上的框架和架构，来点实在的，聊聊 JavaScript 里一个非常实用，但可能被不少人忽略的小家伙：Object.hasOwn()。 这玩意儿是 ES2022 引入的，专门用来解决属性检查问题的。 你可能会想：“属性检查？ hasOwnProperty 不挺好用的吗？” 别急，听我慢慢道来，保证让你对 Object.hasOwn() 刮目相看。

为什么需要 Object.hasOwn()？

首先，咱们得搞清楚，hasOwnProperty 到底有什么问题，才需要一个新的 API 来替代它。

hasOwnProperty 方法是用来判断一个对象是否直接拥有某个属性（即，该属性不是从原型链上继承来的）。 听起来很完美，对吧？ 但问题就出在 JavaScript 的灵活性上。 这种灵活性有时候会让你搬起石头砸自己的脚。

问题一：hasOwnProperty 可能会被覆盖

在 JavaScript 里，一切皆对象，包括函数。 hasOwnProperty 本身也是一个函数，存在于 Object.prototype 上。 这就意味着，任何对象都有可能覆盖（override） hasOwnProperty 方法。

看个例子：

let myObject = {
  hasOwnProperty: function() {
    return false; // 故意返回 false
  },
  myProperty: 'Hello'
};

console.log(myObject.hasOwnProperty('myProperty')); // 输出 false， 结果不靠谱！

看到了吧？ myObject 覆盖了 hasOwnProperty 方法，导致我们无法正确判断 myProperty 是否是 myObject 自身的属性。 这在一些情况下可能会导致非常隐蔽的 bug。

问题二：null 和 undefined 的烦恼

更极端的情况是，如果你的对象是从 Object.create(null) 创建的，它根本就没有继承 Object.prototype 上的任何属性和方法，包括 hasOwnProperty。 这时候调用 hasOwnProperty 会直接报错。

let myObject = Object.create(null);
myObject.myProperty = 'Hello';

//console.log(myObject.hasOwnProperty('myProperty')); // 报错：myObject.hasOwnProperty is not a function

Object.hasOwn()：更安全的解决方案

Object.hasOwn() 就是为了解决这些问题而生的。 它是一个静态方法，直接定义在 Object 对象上，而不是 Object.prototype 上。 这就意味着你无法通过对象实例来调用它，也无法被覆盖。 这样就保证了它的可靠性。

语法

Object.hasOwn(object, propertyKey)

• object: 需要检查的对象。
• propertyKey: 要检查的属性名（字符串或 Symbol）。

示例

let myObject = {
  myProperty: 'Hello'
};

console.log(Object.hasOwn(myObject, 'myProperty')); // 输出 true

let myObject2 = Object.create(null);
myObject2.myProperty = 'Hello';
console.log(Object.hasOwn(myObject2, 'myProperty')); // 输出 true, 再也不怕报错了！

let myObject3 = {
  hasOwnProperty: function() {
    return false;
  },
  myProperty: 'Hello'
};

console.log(Object.hasOwn(myObject3, 'myProperty')); // 输出 true， 无视被覆盖的 hasOwnProperty

如你所见，无论对象是否覆盖了 hasOwnProperty，或者对象是否继承自 null，Object.hasOwn() 都能正确判断属性是否存在。

Object.hasOwn() vs hasOwnProperty： 性能对比

你可能还会关心性能问题。 毕竟，如果一个新的 API 性能很差，那也没啥意义。 实际上，Object.hasOwn() 的性能通常比 hasOwnProperty 更好，因为它避免了原型链查找。 当然，具体的性能差异取决于 JavaScript 引擎的实现和你的代码使用方式。 但一般来说，Object.hasOwn() 在性能上不会有明显的劣势。

如何使用 Object.hasOwn()

使用 Object.hasOwn() 非常简单，只需要将对象和属性名作为参数传递给它即可。

function checkProperty(obj, propName) {
  if (Object.hasOwn(obj, propName)) {
    console.log(`对象 ${obj} 拥有属性 ${propName}`);
  } else {
    console.log(`对象 ${obj} 没有属性 ${propName}`);
  }
}

let myObject = {
  name: 'Alice',
  age: 30
};

checkProperty(myObject, 'name'); // 输出：对象 [object Object] 拥有属性 name
checkProperty(myObject, 'city'); // 输出：对象 [object Object] 没有属性 city

兼容性问题

Object.hasOwn() 是 ES2022 的新特性，所以你需要确保你的运行环境支持它。 主流的浏览器（Chrome, Firefox, Safari, Edge）都已经支持 Object.hasOwn() 了。 如果你需要在旧版本的浏览器中使用它，可以使用 polyfill。

Polyfill

Polyfill 是一种向旧版本浏览器提供新特性支持的技术。 你可以使用以下代码来实现 Object.hasOwn() 的 polyfill：

if (!Object.hasOwn) {
  Object.hasOwn = function(obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
  }
}

这段代码首先检查 Object 对象是否已经定义了 hasOwn 方法。 如果没有，就使用 Object.prototype.hasOwnProperty.call 来实现相同的功能。 这种方式可以兼容旧版本的浏览器，让你在任何环境下都能安全地使用 Object.hasOwn()。

使用场景

Object.hasOwn() 在以下场景中特别有用：

• 处理用户输入： 当你处理用户输入的数据时，需要确保只处理对象自身拥有的属性，避免意外地处理到原型链上的属性。
• 处理外部 API 返回的数据： 外部 API 返回的数据结构可能不确定，使用 Object.hasOwn() 可以避免因属性不存在而导致的错误。
• 编写库或框架： 在编写库或框架时，需要保证代码的健壮性和可靠性，使用 Object.hasOwn() 可以避免因 hasOwnProperty 被覆盖而导致的 bug。
• 迭代对象属性： 在使用 for...in 循环迭代对象属性时，结合 Object.hasOwn() 可以只处理对象自身拥有的属性。

示例：迭代对象属性

let myObject = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

// 添加一个原型属性
Object.prototype.greeting = 'Hello';

for (let key in myObject) {
  if (Object.hasOwn(myObject, key)) {
    console.log(`属性 ${key} 的值为 ${myObject[key]}`);
  }
}

// 输出：
// 属性 name 的值为 Alice
// 属性 age 的值为 30
// 属性 city 的值为 New York

// 如果使用 hasOwnProperty，效果是一样的，但是不安全。
// for (let key in myObject) {
//   if (myObject.hasOwnProperty(key)) {
//     console.log(`属性 ${key} 的值为 ${myObject[key]}`);
//   }
// }

// 使用 forEach 迭代 Object.keys()
Object.keys(myObject).forEach(key => {
  console.log(`属性 ${key} 的值为 ${myObject[key]}`);
});

总结

特性	hasOwnProperty	Object.hasOwn()
定义位置	Object.prototype	Object
是否可覆盖	可以被对象覆盖	不可以被覆盖
兼容性	较好	ES2022，需要 polyfill
安全性	存在被覆盖的风险	更安全，避免被覆盖的风险
处理 null 对象	会报错	不会报错
使用方式	obj.hasOwnProperty('propertyName')	Object.hasOwn(obj, 'propertyName')
性能	略逊于Object.hasOwn()，但差异通常不明显。	通常优于hasOwnProperty，避免原型链查找。

总而言之，Object.hasOwn() 是一个更安全、更可靠的属性检查 API。 它可以避免 hasOwnProperty 被覆盖的风险，并且可以处理从 null 创建的对象。 在新的 JavaScript 项目中，建议优先使用 Object.hasOwn()。 当然，在旧的项目中，如果你已经大量使用了 hasOwnProperty，也不必急于替换，可以根据实际情况逐步迁移。

最后的提醒

记住，编程是一门艺术，选择合适的工具非常重要。 Object.hasOwn() 就是一个可以让你代码更健壮、更可靠的小工具。 下次在进行属性检查时，不妨试试它，相信你会爱上它的！

好了，今天的讲座就到这里。 感谢大家的聆听！ 希望大家有所收获，编程愉快！下次再见！