JavaScript Object.hasOwn() 方法

Object.hasOwn() 语法

Object.hasOwn() 是 JavaScript 的一个静态方法，它用于判断某个属性是否为对象自身的属性，而不是继承过来的属性。

Object.hasOwn() 比 Object.prototype.hasOwnProperty() 方法更安全、更简洁，因为 Object.hasOwn() 不会受到对象上可能被覆盖的 hasOwnProperty() 方法的影响。

语法：

Object.hasOwn(obj, prop)

说明：

Object.hasOwn() 方法接收以下 2 个参数。

• obj（必选）：你要判断的对象名。
• prop（必选）：你要判断的属性，注意这是一个字符串或 Symbol。

Object.hasOwn() 会返回一个布尔值。如果是自身的属性，则返回 true；如果是继承的属性，则返回 false。

对于 Object.hasOwn()，小伙伴们还要清楚以下几点。

• Object.hasOwn() 只检查自身属性，不检查原型链上的继承属性。
• Object.hasOwn() 可以正确处理字符串键和 Symbol 键的属性。
• Object.hasOwn() 可以安全地处理对象中 hasOwnProperty() 被覆盖的情况。

Object.hasOwn() 摘要

Object.hasOwn() 示例

接下来，我们通过一个简单的例子来讲解一下 Object.hasOwn() 方法是如何使用的。

示例 1：Object.hasOwn() 基本用法

function ParentBox() {
    this.color = "red";
}
function ChildBox() {
    this.width = 20;
    this.height = 40;
}
ChildBox.prototype = new ParentBox();
const box = new ChildBox();

// 判断继承属性
const result1 = Object.hasOwn(box, "color");
console.log(result1);

// 判断自身属性
const result2 = Object.hasOwn(box, "width");
console.log(result2);

运行结果如下。

false
true

分析：

color 是继承过来的属性，因此 Object.hasOwn(box, "color") 返回 false。而 width 是自身的属性，因此 Object.hasOwn(box, "width") 返回 true。

Object.hasOwn() 和 Object.prototype.hasOwnProperty()

Object.hasOwn() 和 Object.prototype.hasOwnProperty() 这两个的功能是一样的，都是用于判断某个属性是否为自身属性。其中，Object.prototype.hasOwnProperty() 是先推出的，而 Object.hasOwn() 是后推出的。

需要清楚的是，Object.hasOwn() 是一个静态方法，而 Object.prototype.hasOwnProperty() 是一个实例方法。

示例 2：Object.hasOwn() vs Object.prototype.hasOwnProperty()

function ParentBox() {
    this.color = "red";
}
function ChildBox() {
    this.width = 20;
    this.height = 40;
}
ChildBox.prototype = new ParentBox();
const box = new ChildBox();

// 使用Object.hasOwn()
const result1 = Object.hasOwn(box, "color");
console.log(result1);

// 使用Object.prototype.hasOwnProperty()
const result2 = box.hasOwnProperty("color");
console.log(result2);

运行结果如下。

false
false

分析：

这两个方法功能完全一样，为什么有了 Object.prototype.hasOwnProperty()，后面还要推出一个 Object.hasOwn() 呢？

在 Object.hasOwn() 推出之前，下面的代码在某些库或项目中是很常见的。

const hasOwnProperty = Object.prototype.hasOwnProperty;
if (hasOwnProperty.call(obj, "prop")) {
    ……
}

为了更方便实现这样的功能，官方后面就推出了 Object.hasOwn() 方法。此时使用 Object.hasOwn() 来实现，代码如下。

if (Object.hasOwn(obj, "prop")) {
    ……
}

在实际开发中，官方也推荐使用 Object.hasOwn() 来代替 Object.prototype.hasOwnProperty()。

示例 3：处理无原型的对象

const obj = Object.create(null);
obj.a = 1;

// 报错：obj.hasOwnProperty is not a function
// console.log(obj.hasOwnProperty("a")); 

// 正确：true
console.log(Object.hasOwn(obj, "a"));

运行结果如下。

true

分析：

对于 Object.create(null) 创建的对象，由于它没有原型，因此当我们调用 obj.hasOwnProperty() 时会直接报错。这其实也是 Object.hasOwn() 诞生的最主要原因之一。