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

各位好，今天咱们来聊聊 JavaScript 里一个挺重要，但有时候又容易被忽略的小家伙——Object.hasOwn()。

在 JavaScript 的世界里，判断一个对象是否拥有某个属性，就像在茫茫人海中寻找你的真命天子/天女一样，有时候挺让人头疼。之前，我们常用的工具是 hasOwnProperty，但这家伙有时候也会耍点小脾气。自从 ES2022 引入了 Object.hasOwn()，咱们就有了更可靠的 "寻人神器"。

一、hasOwnProperty：曾经的宠儿，如今的烦恼

hasOwnProperty 方法是 Object.prototype 上的一个方法，用于检测一个对象是否直接拥有某个属性，而不是从原型链上继承来的。举个例子：

const myObject = {
  name: '张三',
  age: 30
};

console.log(myObject.hasOwnProperty('name')); // true
console.log(myObject.hasOwnProperty('toString')); // false (继承自 Object.prototype)

这段代码很直接，hasOwnProperty 帮我们区分了对象自身拥有的属性和继承来的属性。看起来很美好，对吧？但问题来了。

1.1 hasOwnProperty 的坑：null 和 undefined 的困扰

hasOwnProperty 本身是一个方法，需要通过对象来调用。如果你想检查一个 null 或者 undefined 值的属性，它会直接抛出错误，因为 null 和 undefined 没有 hasOwnProperty 方法。

const potentiallyNullObject = null;
// console.log(potentiallyNullObject.hasOwnProperty('name')); // 报错：Cannot read properties of null (reading 'hasOwnProperty')

const potentiallyUndefinedObject = undefined;
// console.log(potentiallyUndefinedObject.hasOwnProperty('name')); // 报错：Cannot read properties of undefined (reading 'hasOwnProperty')

为了避免这种错误，我们通常需要进行额外的判空处理。这就显得有点麻烦了，是不是？

1.2 hasOwnProperty 的坑：对象上可能存在同名属性

更糟糕的是，某些情况下，hasOwnProperty 可能会被对象自身的属性覆盖掉。想象一下，你创建了一个对象，并且不小心定义了一个名为 hasOwnProperty 的属性：

const trickyObject = {
  hasOwnProperty: '这是一个字符串',
  name: '李四'
};

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

这下好了， hasOwnProperty 不再是一个函数，而是一个字符串。调用的时候，JavaScript 引擎会尝试将字符串当作函数来执行，自然就会报错。这种情况虽然不常见，但一旦发生，排查起来也挺费劲的。

二、Object.hasOwn()：闪亮登场，解决痛点

ES2022 引入了 Object.hasOwn() 方法，它是一个静态方法，直接定义在 Object 对象上。它的作用和 hasOwnProperty 类似，都是用来检查对象是否直接拥有某个属性。但它解决了 hasOwnProperty 的两个痛点。

2.1 Object.hasOwn() 的优势：安全可靠，不怕 null 和 undefined

Object.hasOwn() 不需要通过对象来调用，而是直接使用 Object.hasOwn(object, propertyName) 这种形式。这意味着，即使 object 是 null 或 undefined，也不会报错。

const potentiallyNullObject = null;
console.log(Object.hasOwn(potentiallyNullObject, 'name')); // false (不会报错)

const potentiallyUndefinedObject = undefined;
console.log(Object.hasOwn(potentiallyUndefinedObject, 'name')); // false (不会报错)

Object.hasOwn() 会隐式地将 null 和 undefined 视为没有属性的对象，直接返回 false。这样，我们就不用再手动进行判空处理了，代码更简洁，更安全。

2.2 Object.hasOwn() 的优势：防篡改，不受对象属性影响

由于 Object.hasOwn() 是 Object 上的静态方法，它不会受到对象自身属性的影响。即使对象定义了名为 hasOwnProperty 的属性，也不会影响 Object.hasOwn() 的正常工作。

const trickyObject = {
  hasOwnProperty: '这是一个字符串',
  name: '李四'
};

console.log(Object.hasOwn(trickyObject, 'name')); // true (正常工作，不受 hasOwnProperty 属性的影响)

Object.hasOwn() 就像一位经验丰富的裁判，能够公正地判断对象是否拥有某个属性，不会被任何花招所迷惑。

三、Object.hasOwn() 的用法：简单直接，一目了然

Object.hasOwn() 的用法非常简单，只需要传入两个参数：

object: 要检查的对象。
propertyName: 要检查的属性名 (字符串或 Symbol)。

返回值是一个布尔值，表示对象是否直接拥有该属性。

const myObject = {
  name: '王五',
  age: 40
};

console.log(Object.hasOwn(myObject, 'name')); // true
console.log(Object.hasOwn(myObject, 'age')); // true
console.log(Object.hasOwn(myObject, 'address')); // false
console.log(Object.hasOwn(myObject, 'toString')); // false (继承自 Object.prototype)

const mySymbol = Symbol('mySymbol');
const anotherObject = {
  [mySymbol]: '这是一个 Symbol 属性'
};

console.log(Object.hasOwn(anotherObject, mySymbol)); // true

从上面的例子可以看出，Object.hasOwn() 可以处理字符串属性名，也可以处理 Symbol 属性名。

四、Object.hasOwn() 的兼容性：逐步普及，拥抱未来

Object.hasOwn() 是 ES2022 的新特性，目前主流的浏览器和 Node.js 环境都已经支持。

环境	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Node.js	支持

如果你需要兼容旧版本的浏览器，可以使用 polyfill 来提供 Object.hasOwn() 的支持。一个简单的 polyfill 如下：

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

这个 polyfill 的原理很简单，就是直接调用 Object.prototype.hasOwnProperty.call() 方法来实现 Object.hasOwn() 的功能。

五、Object.hasOwn() 的最佳实践：告别 hasOwnProperty，拥抱新标准

在新的 JavaScript 项目中，建议使用 Object.hasOwn() 来替代 hasOwnProperty。它可以避免 null 和 undefined 带来的错误，也可以防止对象属性覆盖带来的问题。

以下是一些使用 Object.hasOwn() 的最佳实践：

始终使用 Object.hasOwn() 来检查对象是否直接拥有某个属性。
避免直接使用 hasOwnProperty，除非你需要兼容非常旧的浏览器。
可以使用 polyfill 来提供 Object.hasOwn() 的兼容性支持。
在 TypeScript 项目中，可以使用 Object.hasOwn() 来进行类型检查。

六、Object.hasOwn() 的应用场景：无处不在，大显身手

Object.hasOwn() 在各种 JavaScript 项目中都有广泛的应用场景。以下是一些常见的例子：

数据验证： 在处理用户输入或者 API 返回的数据时，可以使用 Object.hasOwn() 来验证数据是否包含必要的属性。

function validateUser(user) {
  if (!Object.hasOwn(user, 'name')) {
    throw new Error('用户必须包含 name 属性');
  }
  if (!Object.hasOwn(user, 'email')) {
    throw new Error('用户必须包含 email 属性');
  }
  // ... 其他验证逻辑
}

对象遍历： 在遍历对象的属性时，可以使用 Object.hasOwn() 来过滤掉继承来的属性，只处理对象自身拥有的属性。

const myObject = {
  name: '赵六',
  age: 50,
  toString: '这是一个字符串' // 故意覆盖 toString
};

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

框架和库的开发： 在开发 JavaScript 框架和库时，可以使用 Object.hasOwn() 来确保代码的健壮性和可靠性。
```
// 例如，在 Vue.js 的源码中，就大量使用了 Object.hasOwn() 来进行属性检查
```

处理 JSON 数据： 当你从服务器获取 JSON 数据，并需要确认数据结构时，Object.hasOwn() 非常有用。

const jsonData = JSON.parse('{"id": 123, "name": "Product A"}');

if (Object.hasOwn(jsonData, "id")) {
  console.log("Product ID:", jsonData.id);
}

if (Object.hasOwn(jsonData, "description")) {
  console.log("Product Description:", jsonData.description);
} else {
  console.log("Description not available.");
}

七、性能考量：微乎其微，不必担心

有人可能会担心 Object.hasOwn() 的性能问题。实际上，Object.hasOwn() 的性能和 hasOwnProperty 几乎没有差别。在大多数情况下，性能差异可以忽略不计。

即使在性能敏感的场景下，你也可以放心地使用 Object.hasOwn()，因为它带来的安全性和可靠性远大于微小的性能损失。

八、总结：拥抱 Object.hasOwn()，提升代码质量

Object.hasOwn() 是 JavaScript 中一个非常有用的方法，它可以帮助我们更安全、更可靠地检查对象是否拥有某个属性。它可以避免 null 和 undefined 带来的错误，也可以防止对象属性覆盖带来的问题。

在新的 JavaScript 项目中，建议使用 Object.hasOwn() 来替代 hasOwnProperty。拥抱新标准，提升代码质量，让你的 JavaScript 代码更加健壮、更加可靠！

好了，今天的分享就到这里。希望大家能够掌握 Object.hasOwn() 的用法，并在实际项目中灵活运用。祝大家编程愉快！

发表回复 取消回复

发表回复取消回复