理解 `instanceof` 操作符与原型链的检查

好的，各位观众老爷们，欢迎来到今天的“JavaScript 奇妙夜”！🌙 今天我们要聊聊一个让无数前端新手，甚至一些老鸟都挠头的问题：instanceof 操作符以及它背后的原型链检查机制。别害怕，这玩意儿没有你想的那么可怕，只要跟着我的节奏，保证你听完之后，腰不酸了，腿不疼了，代码也更香了！😎

开场白：instanceof 是个啥？

想象一下，你走进一家动物园，看到一只毛茸茸、汪汪叫的生物，你可能会问：“这货是不是一只狗？” instanceof 在 JavaScript 里的作用，就跟你在动物园里辨认动物一样，它是用来判断一个对象是否是某个构造函数的实例。简单来说，就是问：“这玩意儿是不是用这个‘模具’造出来的？”

但事情并没有这么简单，动物园里可能还有狼啊，狐狸啊，它们都长得像狗，那怎么区分呢？这就是原型链要登场的时候了！

第一幕：原型链的秘密花园

要理解 instanceof，就必须先了解原型链。原型链是 JavaScript 中实现继承的核心机制，它就像一棵树，每个对象都可能有一个指向其原型对象的链接，而原型对象本身也可能指向另一个原型对象，以此类推，直到到达 null。

你可以把原型链想象成一棵家族树，你自己是树上的一个节点，你的父辈、祖辈、曾祖辈…都是你的原型。当你需要某个东西，但自己没有的时候，你就会沿着家族树往上找，看看你的父辈有没有，父辈没有就找祖辈，以此类推。

• 每个对象都有 __proto__ 属性（非标准，但大部分浏览器支持）： 这个属性指向创建该对象的构造函数的原型对象。
• 每个函数都有 prototype 属性： 这个属性指向一个对象，这个对象就是通过 new 操作符创建的该函数的实例的原型对象。
• Object.prototype 是原型链的顶端： 所有的对象最终都继承自 Object.prototype，它的 __proto__ 属性指向 null，标志着原型链的终结。

用代码来演示一下：

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

Animal.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};

function Dog(name, breed) {
  Animal.call(this, name); // 继承 Animal 的属性
  this.breed = breed;
}

// 继承 Animal 的原型方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正 constructor 指向

Dog.prototype.bark = function() {
  console.log("Woof!");
};

const myDog = new Dog("Buddy", "Golden Retriever");

console.log(myDog.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

myDog.sayHello(); // Hello, I'm Buddy (继承自 Animal)
myDog.bark(); // Woof! (Dog 自身的方法)

在这个例子中，myDog 对象沿着原型链向上查找：

1. 首先，它查找自身是否有 sayHello 方法，没有。
2. 然后，它查找 Dog.prototype 是否有 sayHello 方法，没有。
3. 接着，它查找 Animal.prototype 是否有 sayHello 方法，找到了！于是执行 Animal.prototype.sayHello 方法。

第二幕：instanceof 的工作原理

现在，我们终于可以揭开 instanceof 的神秘面纱了。instanceof 操作符的工作原理是：

1. 检查右侧构造函数的 prototype 属性所指向的原型对象，是否在左侧对象的原型链上。
2. 如果是，则返回 true；否则，返回 false。

简单来说，就是问：“你祖宗十八代里，有没有一个是这个‘模具’的原型？”

继续用上面的例子：

console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Object); // true
console.log(myDog instanceof String); // false

• myDog instanceof Dog 返回 true，因为 Dog.prototype 在 myDog 的原型链上。
• myDog instanceof Animal 返回 true，因为 Animal.prototype 也在 myDog 的原型链上（Dog.prototype 继承自 Animal.prototype）。
• myDog instanceof Object 返回 true，因为 Object.prototype 是所有对象的原型链的顶端。
• myDog instanceof String 返回 false，因为 String.prototype 不在 myDog 的原型链上。

表格：instanceof 的真值表

表达式	结果	解释
myDog instanceof Dog	true	Dog.prototype 在 myDog 的原型链上
myDog instanceof Animal	true	Animal.prototype 在 myDog 的原型链上 (因为 Dog.prototype 继承自 Animal.prototype)
myDog instanceof Object	true	Object.prototype 在 myDog 的原型链上 (所有对象都继承自 Object.prototype)
myDog instanceof String	false	String.prototype 不在 myDog 的原型链上
[] instanceof Array	true	Array.prototype 在 [] 的原型链上
[] instanceof Object	true	Object.prototype 在 [] 的原型链上
function() {} instanceof Function	true	Function.prototype 在 function() {} 的原型链上
function() {} instanceof Object	true	Object.prototype 在 function() {} 的原型链上
123 instanceof Number	false	123 是一个原始类型 (number)，而不是一个 Number 对象的实例。要返回 true，需要使用 new Number(123) instanceof Number
"hello" instanceof String	false	"hello" 是一个原始类型 (string)，而不是一个 String 对象的实例。要返回 true，需要使用 new String("hello") instanceof String
null instanceof Object	false	null 不是任何对象的实例。instanceof 要求左侧是一个对象，而 null 是一个原始类型，并且它不继承自任何原型。
undefined instanceof Object	false	undefined 不是任何对象的实例。instanceof 要求左侧是一个对象，而 undefined 是一个原始类型，并且它不继承自任何原型。
new Date() instanceof Date	true	Date.prototype 在 new Date() 的原型链上
new Error() instanceof Error	true	Error.prototype 在 new Error() 的原型链上

第三幕：instanceof 的应用场景

instanceof 在实际开发中有很多用处，主要用于：

1. 类型检查： 判断一个对象是否属于某个类型，例如判断一个变量是否是数组、日期或者自定义类的实例。
2. 多态： 在函数中根据对象的类型执行不同的操作。
3. 库的兼容性： 判断一个对象是否是某个库提供的类的实例，以确保代码的兼容性。

举个例子，假设你正在开发一个处理用户数据的系统，你需要确保用户输入的年龄是一个数字：

function processAge(age) {
  if (age instanceof Number) {
    // age 是一个 Number 对象
    console.log("Age is a Number object:", age.valueOf());
  } else if (typeof age === 'number') {
    // age 是一个原始类型的 number
    console.log("Age is a primitive number:", age);
  } else {
    console.error("Invalid age:", age);
  }
}

processAge(25); // Age is a primitive number: 25
processAge(new Number(30)); // Age is a Number object: 30
processAge("abc"); // Invalid age: abc

第四幕：instanceof 的局限性与替代方案

instanceof 虽然好用，但也有一些局限性：

1. 跨 Frame 或 Window 的问题： 如果对象是从不同的 Frame 或 Window 中创建的，instanceof 可能会失效，因为每个 Frame 或 Window 都有自己的执行环境和构造函数。
2. 原始类型的问题： 对于原始类型（例如 string、number、boolean），instanceof 通常返回 false，除非使用 new String()、new Number()、new Boolean() 创建对象。

为了解决这些问题，我们可以使用以下替代方案：

1. typeof 操作符： 用于判断原始类型，例如 typeof "hello" === "string"。
2. Object.prototype.toString.call() 方法： 可以准确地判断对象的类型，例如 Object.prototype.toString.call([]) === "[object Array]"。这个方法不受 Frame 或 Window 的影响。
3. 鸭子类型 (Duck Typing)： 关注对象的行为而不是类型，如果一个对象看起来像鸭子，叫起来像鸭子，那么它就是鸭子。

function isArray(obj) {
  return Object.prototype.toString.call(obj) === "[object Array]";
}

console.log(isArray([])); // true
console.log(isArray("hello")); // false

function isNumberObject(obj) {
  return Object.prototype.toString.call(obj) === "[object Number]";
}

console.log(isNumberObject(new Number(123))); // true
console.log(isNumberObject(123)); // false

第五幕：手动实现 instanceof

为了更深入地理解 instanceof 的工作原理，我们可以手动实现一个类似的功能：

function myInstanceOf(obj, constructor) {
  if (typeof obj !== 'object' || obj === null) {
    return false; // 原始类型或 null 直接返回 false
  }

  let proto = Object.getPrototypeOf(obj); // 获取对象的原型

  while (proto) {
    if (proto === constructor.prototype) {
      return true; // 找到了
    }
    proto = Object.getPrototypeOf(proto); // 继续沿着原型链向上查找
  }

  return false; // 没找到
}

console.log(myInstanceOf(myDog, Dog)); // true
console.log(myInstanceOf(myDog, Animal)); // true
console.log(myInstanceOf(myDog, Object)); // true
console.log(myInstanceOf(myDog, String)); // false

这个 myInstanceOf 函数的逻辑和 instanceof 操作符非常相似：

1. 首先，判断 obj 是否是对象，如果不是，直接返回 false。
2. 然后，获取 obj 的原型对象。
3. 接着，沿着原型链向上查找，如果找到 constructor.prototype，则返回 true。
4. 如果到达原型链的顶端仍然没有找到，则返回 false。

总结：原型链与 instanceof 的完美结合

instanceof 操作符是 JavaScript 中一个重要的工具，它可以帮助我们判断对象的类型，实现多态，以及提高代码的兼容性。但是，instanceof 也有一些局限性，我们需要根据实际情况选择合适的替代方案。

理解原型链是理解 instanceof 的关键，原型链是 JavaScript 中实现继承的核心机制，它决定了对象如何访问属性和方法。

希望今天的“JavaScript 奇妙夜”能让你对 instanceof 操作符和原型链有更深入的了解。记住，学习编程就像探索一个神秘的花园，充满了惊喜和挑战，只要你坚持不懈，终将成为一名优秀的程序员！🎉

最后的彩蛋：一些有趣的思考

• 为什么原始类型使用 instanceof 通常返回 false？
• Object.create(null) 创建的对象有什么特点？它会影响 instanceof 的结果吗？
• 如何利用原型链实现更复杂的继承模式？

希望这些问题能激发你进一步学习 JavaScript 的兴趣！感谢大家的观看，我们下期再见！👋