Object.hasOwn(): 安全的检查自身属性 (ES2022+)
引言
嘿，大家好！今天我们要聊的是 JavaScript 中一个非常有用的新方法——Object.hasOwn()。这个方法在 ES2022（即 ECMAScript 2022）中引入，旨在提供一种更安全、更可靠的方式来检查对象是否拥有某个特定的自有属性。
在此之前，我们通常使用 hasOwnProperty() 方法来检查对象的属性，但随着 JavaScript 的发展，hasOwnProperty() 存在一些潜在的问题。那么，Object.hasOwn() 到底解决了什么问题？它又该如何使用呢？让我们一起来探讨一下吧！
为什么需要 Object.hasOwn()？
1. hasOwnProperty() 的局限性
在 ES2022 之前，我们通常使用 hasOwnProperty() 来检查对象是否拥有某个属性。例如：
const obj = { name: 'Alice' };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('age')); // false看起来一切都很正常，对吧？但是，hasOwnProperty() 有一个潜在的问题：如果对象本身有一个名为 hasOwnProperty 的属性，那么调用 hasOwnProperty() 时就会出问题。比如：
const obj = {
name: 'Alice',
hasOwnProperty: function() { return false; } // 恶意重写
};
console.log(obj.hasOwnProperty('name')); // false! 这不是我们想要的结果在这个例子中，obj 对象重写了 hasOwnProperty 方法，导致我们无法正确检查属性的存在。这显然是一个安全隐患，尤其是在处理用户输入或不可信的数据时。
2. in 操作符的局限性
另一种常见的检查属性的方式是使用 in 操作符。in 操作符会检查对象及其原型链上的所有属性，而不仅仅是对象自身的属性。例如：
const obj = { name: 'Alice' };
const proto = { age: 30 };
Object.setPrototypeOf(obj, proto);
console.log('name' in obj); // true
console.log('age' in obj); // true，因为 'age' 在原型链上虽然 in 操作符可以检查原型链上的属性，但在某些情况下，我们只关心对象自身的属性，而不希望受到原型链的影响。因此，in 操作符也不是最佳选择。
Object.hasOwn() 的诞生
为了解决这些问题，ES2022 引入了 Object.hasOwn() 方法。它的作用与 hasOwnProperty() 类似，但不会被对象自身的属性干扰，也不会受到原型链的影响。更重要的是，Object.hasOwn() 是一个静态方法，因此它不会被对象重写或覆盖。
语法
Object.hasOwn(object, property)object：要检查的对象。property：要检查的属性名（可以是字符串或符号）。
示例
让我们来看一些具体的例子，感受一下 Object.hasOwn() 的强大之处。
示例 1：基本用法
const obj = { name: 'Alice' };
console.log(Object.hasOwn(obj, 'name')); // true
console.log(Object.hasOwn(obj, 'age')); // false示例 2：防止属性重写
即使对象重写了 hasOwnProperty，Object.hasOwn() 依然能正常工作：
const obj = {
name: 'Alice',
hasOwnProperty: function() { return false; } // 恶意重写
};
console.log(Object.hasOwn(obj, 'name')); // true
console.log(Object.hasOwn(obj, 'age')); // false示例 3：检查符号属性
Object.hasOwn() 不仅可以检查字符串属性，还可以检查符号属性：
const sym = Symbol('id');
const obj = { [sym]: 42 };
console.log(Object.hasOwn(obj, sym)); // true示例 4：忽略原型链
Object.hasOwn() 只检查对象自身的属性，不会受到原型链的影响：
const proto = { age: 30 };
const obj = { name: 'Alice' };
Object.setPrototypeOf(obj, proto);
console.log(Object.hasOwn(obj, 'name')); // true
console.log(Object.hasOwn(obj, 'age')); // false性能对比
为了让大家更直观地理解 Object.hasOwn() 和其他方法的区别，我们可以做一个简单的性能对比。以下表格展示了不同方法在不同场景下的表现：
| 方法 | 是否受原型链影响 | 是否可被重写 | 性能 |
|---|---|---|---|
hasOwnProperty() |
否 | 是 | 较快 |
in 操作符 |
是 | 否 | 较慢 |
Object.hasOwn() |
否 | 否 | 较快 |
从表格中可以看出，Object.hasOwn() 既不会受到原型链的影响，也不会被对象重写，而且性能与 hasOwnProperty() 相当。因此，它是检查对象自身属性的最佳选择。
兼容性
Object.hasOwn() 是 ES2022 的新特性，因此在较旧的浏览器或环境中可能不支持。如果你需要在这些环境中使用 Object.hasOwn()，可以考虑使用 polyfill 或者降级到 hasOwnProperty()，但这意味着你需要小心处理潜在的安全问题。
好消息是，现代浏览器（如 Chrome、Firefox、Safari 和 Edge）已经广泛支持 Object.hasOwn()。如果你使用的是 Node.js，确保你的版本不低于 16.13.0，这样你就可以放心使用这个新方法了。
结语
好了，今天的讲座就到这里啦！通过今天的讨论，相信大家已经对 Object.hasOwn() 有了更深入的了解。它不仅解决了 hasOwnProperty() 的安全问题，还提供了更可靠的属性检查方式。无论你是初学者还是经验丰富的开发者，Object.hasOwn() 都是一个值得掌握的工具。
如果你有任何问题或想法，欢迎在评论区留言哦！下次见！ 😄
参考资料：
- MDN Web Docs:
Object.hasOwn - ECMAScript 2022 Specification:
Object.hasOwn
