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

推荐答案

使用 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. 示例:

   // www.javascriptcn.com code example
   function Person(name) {
     this.name = name;
   }
   
   Person.prototype.sayHello = function() {
     console.log("Hello, " + this.name);
   };
   
   const person = new Person("Alice");
   
   console.log(person.hasOwnProperty("name"));     // 输出：true，因为 name 是 person 自身的属性
   console.log(person.hasOwnProperty("sayHello")); // 输出：false，因为 sayHello 是原型链上的属性
   console.log("name" in person) // 输出：true，name属性在对象或者原型链上存在
   console.log("sayHello" in person) // 输出：true，sayHello属性在对象或者原型链上存在

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
  }
}