如何判断一个属性是对象自身的属性还是原型链上的属性？

推荐答案

使用 hasOwnProperty() 方法来判断属性是否是对象自身的属性。如果 obj.hasOwnProperty(prop) 返回 true，则 prop 是 obj 自身的属性；如果返回 false，则 prop 可能是原型链上的属性或者根本不存在。

本题详细解读

要判断一个属性是对象自身的属性还是原型链上的属性，关键在于理解 JavaScript 的原型继承机制。

1. 原型链的概念:

   • 每个 JavaScript 对象都有一个原型 (prototype)，除了 null。
   • 当我们尝试访问一个对象的属性时，如果对象本身没有这个属性，JavaScript 引擎会沿着对象的原型链向上查找，直到找到该属性或到达原型链的顶端 (即 null)。

2. hasOwnProperty() 方法:

   • hasOwnProperty() 是 Object.prototype 的一个方法，因此所有对象都可以访问它。
   • 它用于检查对象自身是否具有指定的属性，不考虑原型链。
   • 它的语法是 obj.hasOwnProperty(prop), prop 是要检查的属性名（字符串）。
   • 如果对象 obj 自身直接拥有名为 prop 的属性，则返回 true；否则返回 false。

3. 示例:

   -- -------------------- ---- -------
   -------- ------------ -
     --------- - -----
   -
   
   ------------------------- - ---------- -
     ------------------- - - -----------
   --
   
   ----- ------ - --- ----------------
   
   -------------------------------------------     -- ---------- ---- - ------ -----
   ----------------------------------------------- -- ----------- -------- --------
   ------------------ -- ------- -- -------------------------
   ---------------------- -- ------- -- -----------------------------

4. in 操作符:

   • in 操作符可以检查对象是否具有某个属性，包括自身属性和原型链上的属性。
   • 上面的示例代码可以对比in操作符和hasOwnProperty的差别。

5. 使用场景:

   • 当你明确需要判断一个属性是否是对象自身拥有的，而不是继承来的，就应该使用hasOwnProperty。
   • 在遍历对象的属性时，如果你只关心对象自身的属性，通常会结合 for...in 循环和 hasOwnProperty() 来过滤掉原型链上的属性。

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]); // 只会输出 a: 1 和 b: 2
  }
}