JavaScript 对象遍历为什么要使用 hasOwnProperty 检查属性

前言

在 JavaScript 中，我们经常需要遍历对象的属性。本文将探讨两种遍历对象属性的方法，分析它们之间的区别，并通过一个实际示例来说明这些差异。

方法 1：使用for...in循环遍历对象属性，并使用hasOwnProperty检查属性：

for (const key in object) {  if (Object.hasOwnProperty.call(object, key)) {    const element = object[key];  }}

方法 2：直接使用for...in循环遍历对象属性：

for (const key in object) {  const element = object[key];}

区别

这两种方法的主要区别在于hasOwnProperty的使用。在第一种方法中，我们使用Object.hasOwnProperty.call(object, key)来检查当前属性是否是对象自身的属性，而不是从原型链中继承的属性。这样做可以确保我们仅处理对象自身的属性。

而在第二种方法中，我们没有进行这种检查，所以在遍历过程中，我们会处理对象自身的属性以及从原型链中继承的属性。

示例

为了更好地理解这两种方法之间的区别，让我们通过一个实际的例子来进行说明。

function Person() {}Person.prototype.sayHello = function() {  console.log("Hello!");};
const person1 = new Person();person1.name = "Alice";person1.age = 30;
// 方法1：使用 for...in 循环和 hasOwnProperty 检查console.log("Method 1:");for (const key in person1) {  if (Object.hasOwnProperty.call(person1, key)) {    console.log(key, person1[key]);  }}
// 方法2：直接使用 for...in 循环console.log("Method 2:");for (const key in person1) {  console.log(key, person1[key]);}

在这个示例中，我们创建了一个Person构造函数，并向其原型上添加了一个sayHello方法。然后，我们创建了一个Person实例person1，并为其添加了name和age属性。

当我们使用方法 1 遍历person1的属性时，输出如下：

Method 1:name Aliceage 30

我们只处理了person1自身的属性，而没有处理从原型链中继承的属性。

而当我们使用方法 2 遍历person1的属性时，输出如下：

Method 2:name Aliceage 30sayHello [Function: sayHello]

我们处理了person1自身的属性以及从原型链中继承的属性。在这种情况下，我们不仅处理了name和age属性，还处理了从Person.prototype继承的sayHello方法。

结论

通过上述示例，我们可以看出这两种方法的区别：在遍历对象属性时，使用hasOwnProperty检查属性的方法仅处理对象自身的属性，而直接使用for...in循环的方法会同时处理对象自身的属性和从原型链中继承的属性。

在实际应用中，如果你只关心对象自身的属性，而不希望处理原型链上的属性，那么使用方法 1（for...in循环配合hasOwnProperty检查）是一个更好的选择。但是，如果你需要同时处理对象自身和原型链上的属性，那么你可以直接使用方法 2（只使用for...in循环）。