`hasOwnProperty()` 方法在原型链查找中的重要性

各位老铁，今天咱们聊聊 hasOwnProperty() 这个小可爱：原型链寻宝记，它才是真正的“我的就是我的”！

大家好！欢迎来到“前端老司机茶馆”，我是你们的老朋友，人称“代码诗人”的程序猿老王。今天咱们不聊框架，不谈架构，就来唠唠JavaScript里一个看似不起眼，但关键时刻能救你于水火的小家伙——hasOwnProperty()。

想象一下，你坐在壁炉旁，手捧一杯热气腾腾的咖啡，窗外是鹅毛大雪，而你正要给你的代码王国梳理一番。这时，你突然意识到，有些“祖传家业”（原型链上的属性）可能会让你感到困惑，甚至引发一些意想不到的Bug。别慌！hasOwnProperty() 就像一把钥匙，能帮你打开通往真相的大门。

一、什么是原型链？（别打瞌睡，这是基础！）

在JavaScript的世界里，万物皆对象。每个对象都有一个隐藏的属性，指向它的原型对象。而原型对象本身也是一个对象，它也有自己的原型对象。就这样一层一层向上追溯，就形成了一条链，我们称之为原型链。

你可以把原型链想象成一棵家族树，你的对象是你，你的原型对象是你的父母，你父母的原型对象是你的祖父母，以此类推。你不仅继承了父母的财产（属性和方法），也可能继承了祖父母甚至更远祖先的财产。

问题来了： 当你访问一个对象的属性时，JavaScript会先在对象自身查找，如果找不到，就会沿着原型链向上查找，直到找到为止。如果找到顶端（Object.prototype），仍然找不到，就会返回undefined。

举个例子，假设我们有以下代码：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

let john = new Person("John");

john.sayHello(); // 输出：Hello, my name is John
console.log(john.toString()); // 输出：[object Object]

在上面的例子中，john 对象自身只有 name 属性。当我们调用 john.sayHello() 时，JavaScript 首先在 john 对象自身查找 sayHello 方法，没有找到，然后沿着原型链向上查找，在 Person.prototype 中找到了 sayHello 方法，于是执行该方法。

当我们调用 john.toString() 时，JavaScript 首先在 john 对象自身查找 toString 方法，没有找到，然后沿着原型链向上查找，在 Person.prototype 中没有找到，继续向上查找，最终在 Object.prototype 中找到了 toString 方法，于是执行该方法。

二、hasOwnProperty() 的闪亮登场：谁才是真正的“自己人”？

现在，我们已经了解了原型链的概念。但是，问题也随之而来：当我们想知道一个对象是否拥有某个属性时，我们不能简单地通过 obj.property 或 obj["property"] 来判断，因为这样会沿着原型链向上查找，最终可能返回原型链上的属性，而不是对象自身的属性。

这时，hasOwnProperty() 就派上用场了！它的作用是：判断一个属性是否是对象自身拥有的，而不是从原型链上继承的。

hasOwnProperty() 方法接受一个字符串参数，表示要检查的属性名。如果对象自身拥有该属性，则返回 true，否则返回 false。

让我们回到之前的例子，并使用 hasOwnProperty() 来检查 john 对象是否拥有 name 和 toString 属性：

console.log(john.hasOwnProperty("name")); // 输出：true
console.log(john.hasOwnProperty("toString")); // 输出：false
console.log(john.hasOwnProperty("sayHello")); // 输出：false

可以看到，john 对象自身拥有 name 属性，但是没有 toString 和 sayHello 属性，这两个属性都是从原型链上继承的。

三、hasOwnProperty() 的应用场景：守护你的代码王国

hasOwnProperty() 在实际开发中有很多应用场景，它可以帮助我们避免很多潜在的Bug，让我们的代码更加健壮。

1. 遍历对象属性时，只处理自身属性

当我们使用 for...in 循环遍历对象的属性时，会遍历到对象自身的所有可枚举属性以及原型链上的所有可枚举属性。如果我们只想处理对象自身的属性，可以使用 hasOwnProperty() 进行过滤。

let myObject = {
  a: 1,
  b: 2
};

myObject.__proto__.c = 3; // 不推荐直接修改 __proto__，这里只是为了演示

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(key + ": " + myObject[key]); // 只输出 a: 1 和 b: 2
  }
}

2. 判断对象是否包含某个属性，避免覆盖原型链上的属性

有时候，我们可能会不小心覆盖原型链上的属性，导致意想不到的Bug。使用 hasOwnProperty() 可以帮助我们避免这种情况。

function MyObject() {
  this.name = "My Object";
}

MyObject.prototype.toString = function() {
  return "This is MyObject";
};

let obj = new MyObject();

// 错误的做法：直接赋值，可能会覆盖原型链上的属性
obj.toString = "This is a string";
console.log(obj.toString); // 输出：This is a string

// 正确的做法：先判断对象自身是否已经拥有该属性，如果没有，再进行赋值
if (!obj.hasOwnProperty("toString")) {
  obj.toString = "This is another string";
} else {
  console.log("对象自身已经拥有 toString 属性，请谨慎覆盖！");
}

3. 在 JSON 数据处理中，过滤掉原型链上的属性

JSON 数据通常只包含对象自身的属性，不包含原型链上的属性。当我们处理 JSON 数据时，可以使用 hasOwnProperty() 来过滤掉原型链上的属性，确保数据的正确性。

let jsonData = {
  "name": "JSON Data",
  "version": "1.0"
};

jsonData.__proto__.author = "Unknown"; // 不推荐直接修改 __proto__，这里只是为了演示

for (let key in jsonData) {
  if (jsonData.hasOwnProperty(key)) {
    console.log(key + ": " + jsonData[key]); // 只输出 name 和 version
  }
}

四、hasOwnProperty() 的局限性：并非万能钥匙

虽然 hasOwnProperty() 很强大，但它并不是万能的。它只能判断一个属性是否是对象自身拥有的，而不能判断该属性是否可枚举。

例如，我们可以使用 Object.defineProperty() 方法来定义一个不可枚举的属性：

let obj = {};

Object.defineProperty(obj, "hiddenProperty", {
  value: "This is a hidden property",
  enumerable: false // 设置为不可枚举
});

console.log(obj.hasOwnProperty("hiddenProperty")); // 输出：true
console.log(obj.hiddenProperty); // 输出：This is a hidden property

for (let key in obj) {
  console.log(key); // 不会输出 hiddenProperty
}

可以看到，obj 对象自身拥有 hiddenProperty 属性，但是该属性是不可枚举的，所以 for...in 循环不会遍历到它。

五、in 操作符：原型链上的“普照之光”

与 hasOwnProperty() 相对的是 in 操作符。in 操作符会检查对象自身以及原型链上是否存在某个属性，只要找到该属性，就返回 true，否则返回 false。

let obj = {
  a: 1
};

obj.__proto__.b = 2; // 不推荐直接修改 __proto__，这里只是为了演示

console.log("a" in obj); // 输出：true
console.log("b" in obj); // 输出：true
console.log("c" in obj); // 输出：false

in 操作符可以用来判断对象是否拥有某个属性，无论该属性是自身拥有的还是从原型链上继承的。

六、Object.getOwnPropertyDescriptor()：属性的“X光片”

如果我们需要更详细地了解一个属性的信息，可以使用 Object.getOwnPropertyDescriptor() 方法。该方法接受一个对象和一个属性名作为参数，返回一个描述符对象，包含该属性的各种信息，例如：

• value: 属性的值
• writable: 属性是否可写
• enumerable: 属性是否可枚举
• configurable: 属性是否可配置

let obj = {
  a: 1
};

let descriptor = Object.getOwnPropertyDescriptor(obj, "a");

console.log(descriptor); // 输出：{value: 1, writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptor() 方法只能获取对象自身拥有的属性的描述符，不能获取原型链上的属性的描述符。

七、总结：hasOwnProperty() 的重要性

hasOwnProperty() 是JavaScript中一个非常重要的工具，它可以帮助我们：

• 判断一个属性是否是对象自身拥有的，而不是从原型链上继承的。
• 遍历对象属性时，只处理自身属性。
• 避免覆盖原型链上的属性。
• 在 JSON 数据处理中，过滤掉原型链上的属性。

虽然 hasOwnProperty() 并非万能的，但它在很多场景下都能发挥重要作用，帮助我们编写更加健壮、可维护的代码。

表格总结：

方法/操作符	作用	是否检查原型链
hasOwnProperty()	判断对象自身是否拥有某个属性	否
in	判断对象自身以及原型链上是否存在某个属性	是
Object.keys()	获取对象自身所有可枚举属性的数组	否
Object.getOwnPropertyNames()	获取对象自身所有属性（包括不可枚举属性）的数组	否
Object.getOwnPropertyDescriptor()	获取对象自身属性的描述符	否

温馨提示： 在实际开发中，要根据具体情况选择合适的方法来判断对象是否拥有某个属性。

八、最后的彩蛋：一个关于原型链的笑话

有一天，一个小对象问他的原型对象：“爸爸，我是谁？”

原型对象回答说：“孩子，你是我的孩子，你继承了我所有的属性和方法。”

小对象不甘心地说：“可是我只想知道我是谁，而不是你有什么！”

原型对象语重心长地说：“孩子，这就是原型链啊！你永远也无法摆脱我的影响！”

小对象听后，默默地使用了 hasOwnProperty() 方法，心想：“哼，我才不信！至少我知道哪些是真正属于我的！”

😂

希望今天的分享能够帮助大家更好地理解 hasOwnProperty() 方法，并在实际开发中灵活运用。记住，hasOwnProperty() 是你代码王国的忠实守护者，它会帮你区分“自己的”和“借来的”，让你的代码更加清晰、可靠。

感谢大家的收听，我们下期再见！

👍👍👍