如何判断对象自身属性？

在JavaScript中，判断一个对象的属性是否来源于原型链而非自身，是理解其继承机制的关键。本文深入探讨了多种实现方法，包括利用`hasOwnProperty()`和`in`操作符的巧妙结合，以及通过`Object.getPrototypeOf()`递归遍历原型链来精确定位属性来源。特别强调了使用`Object.hasOwn()`替代`hasOwnProperty()`以避免潜在风险，并讨论了Symbol类型属性的判断方法。此外，还分析了性能考量，在高频检测场景下推荐缓存`hasOwnProperty()`或使用`Object.hasOwn()`以提升安全性。掌握这些方法，能更有效地进行JavaScript对象属性的来源判断，并应用于各种原型链属性检测场景。

判断JavaScript对象的属性是否通过原型链访问的核心方法是：1. 使用 Object.hasOwn(obj, prop) 返回 false 且 prop in obj 返回 true，则属性来自原型链；2. 可通过 Object.getPrototypeOf 递归遍历原型链以定位属性所在原型层级；3. 对于 Symbol 属性，同样适用上述方法，但需确保使用正确的 Symbol 引用；4. 推荐使用 Object.hasOwn 替代 hasOwnProperty 以避免对象自身方法被覆盖导致的错误；5. 性能上两者差异可忽略，但高频检测时可缓存 hasOwnProperty 或使用 Object.hasOwn 提升安全性。该方案完整覆盖属性来源判断、Symbol处理、安全性与性能优化，适用于各类原型链属性检测场景。

判断JavaScript对象的属性是否可以通过原型链访问，核心在于检查该属性是否存在于对象自身，而不是其原型链上。简单来说，如果 obj.hasOwnProperty(prop) 返回 false，且 prop in obj 返回 true，那么该属性就是通过原型链访问的。

解决方案

要判断一个属性是否是通过原型链访问的，可以使用以下方法：

1. 使用 hasOwnProperty 和 in 操作符：

   hasOwnProperty 方法用于检查对象自身是否具有指定的属性（不包括继承的属性）。in 操作符则检查对象及其原型链上是否存在指定的属性。

   

   function isPropertyFromPrototype(obj, prop) {
     return !obj.hasOwnProperty(prop) && (prop in obj);
   }
   
   // 示例
   function MyObject() {}
   MyObject.prototype.protoProp = 'protoValue';
   
   let obj = new MyObject();
   obj.ownProp = 'ownValue';
   
   console.log(isPropertyFromPrototype(obj, 'protoProp')); // true
   console.log(isPropertyFromPrototype(obj, 'ownProp'));   // false
   console.log(isPropertyFromPrototype(obj, 'nonExistent')); // false

   这种方法直接明了，易于理解。但是，它依赖于 hasOwnProperty 和 in 操作符的行为，需要确保正确使用。

2. 使用 Object.getPrototypeOf 和 hasOwnProperty 递归检查原型链：

   这种方法稍微复杂一些，但更具灵活性，可以追踪属性来自原型链的哪个层级。

   function findPropertyInPrototypeChain(obj, prop) {
     let current = obj;
     while (current) {
       if (current.hasOwnProperty(prop)) {
         // 找到属性，但需要判断是否是 obj 自身
         if (current === obj) {
           return null; // 属性在对象自身上
         } else {
           return current; // 属性在原型链的某个位置
         }
       }
       current = Object.getPrototypeOf(current);
     }
     return null; // 属性不存在于原型链上
   }
   
   // 示例
   function MyObject() {}
   MyObject.prototype.protoProp = 'protoValue';
   function AnotherObject() {}
   AnotherObject.prototype = new MyObject();
   AnotherObject.prototype.anotherProtoProp = 'anotherProtoValue';
   
   let obj = new AnotherObject();
   obj.ownProp = 'ownValue';
   
   console.log(findPropertyInPrototypeChain(obj, 'protoProp')); // MyObject.prototype
   console.log(findPropertyInPrototypeChain(obj, 'anotherProtoProp')); // AnotherObject.prototype
   console.log(findPropertyInPrototypeChain(obj, 'ownProp'));   // null
   console.log(findPropertyInPrototypeChain(obj, 'nonExistent')); // null

   这种方法允许你不仅判断属性是否来自原型链，还可以确定它来自哪个原型对象。这在调试和理解复杂的原型链结构时非常有用。

为什么 Object.hasOwn 比 hasOwnProperty 更推荐？

Object.hasOwn(obj, prop) 是一个相对较新的方法，用于替代 obj.hasOwnProperty(prop)。主要区别在于，Object.hasOwn 可以避免一些潜在的问题，特别是当对象自身可能覆盖了 hasOwnProperty 方法时。

let obj = {
  hasOwnProperty: null // 故意覆盖 hasOwnProperty
};

// obj.hasOwnProperty('prop'); // TypeError: Cannot read properties of null (reading 'call')

Object.hasOwn(obj, 'prop'); // 安全地返回 false

使用 Object.hasOwn 可以更安全地检查属性，因为它不依赖于对象自身的 hasOwnProperty 方法的实现。

如果属性是 Symbol 类型，如何判断？

如果属性是 Symbol 类型，上述方法仍然适用。hasOwnProperty 和 in 操作符都可以处理 Symbol 类型的属性。

const mySymbol = Symbol('mySymbol');

function MyObject() {
  this[mySymbol] = 'symbolValue';
}

MyObject.prototype.protoSymbol = Symbol('protoSymbol');

let obj = new MyObject();

console.log(Object.hasOwn(obj, mySymbol)); // true
console.log(mySymbol in obj); // true
console.log(Object.hasOwn(obj, 'protoSymbol')); // false
console.log('protoSymbol' in obj); // false  (因为 'protoSymbol' 不是一个 Symbol)
console.log(MyObject.prototype.protoSymbol in obj); // false
console.log(obj.protoSymbol === undefined) // true

const isSymbolFromPrototype = !Object.hasOwn(obj, MyObject.prototype.protoSymbol) && (MyObject.prototype.protoSymbol in obj)
console.log(isSymbolFromPrototype) // false  (因为 obj 没有直接继承 MyObject.prototype)

function isSymbolFromPrototype(obj, symbol) {
    return !Object.hasOwn(obj, symbol) && (symbol in obj);
}
console.log(isSymbolFromPrototype(obj, MyObject.prototype.protoSymbol)) // false

关键在于确保在使用 in 操作符时，提供正确的 Symbol 对象，而不是 Symbol 的描述字符串。

性能考虑：hasOwnProperty vs in 操作符？

通常情况下，hasOwnProperty 和 in 操作符的性能差异可以忽略不计。现代JavaScript引擎对这些操作进行了优化。但是，在极端情况下，如果需要频繁地对同一个对象进行大量属性检查，可以考虑缓存 hasOwnProperty 方法，或者使用 Object.hasOwn。

const has = Object.prototype.hasOwnProperty; // 缓存 hasOwnProperty

function checkProperties(obj, props) {
  for (let i = 0; i < props.length; i++) {
    if (has.call(obj, props[i])) {
      // ...
    }
  }
}

虽然这种优化在大多数情况下不会带来显著的性能提升，但在特定场景下可能会有所帮助。

今天关于《如何判断对象自身属性？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JavaScript,原型链,hasOwnProperty,Object.hasOwn,属性判断的内容请关注golang学习网公众号！