深入理解 JavaScript：手写 `instanceof` 及其背后的原型链原理

在 JavaScript 的面向对象编程中，判断一个对象的“血缘关系”是开发中的常见需求。虽然我们经常使用内置的instanceof运算符，但理解其底层逻辑对于掌握 JavaScript 的原型链至关重要。

什么是instanceof？

instanceof是一个原型关系判断运算符。在典型的 OOP（面向对象编程）语言中，它用于判断一个实例是否属于某个类。但在 JavaScript 中，它的本质是：检查左边对象的原型链上是否存在右边构造函数的prototype属性。

例如，在以下继承关系中：

function Animal() {} function Person() {} Person.prototype = new Animal(); // 原型继承 Person.prototype.constructor = Person; const p = new Person(); console.log(p instanceof Person); // true console.log(p instanceof Animal); // true

原型链的基础知识

要实现instanceof，必须先理解两个核心概念：

1. __proto__：每个对象都有一个私有属性，指向它的原型对象。
2. prototype：每个函数都有一个原型对象，用于存储共享的属性和方法。

我们可以通过一个数组的例子来观察原型链的终点：

• arr.__proto__-> 指向Array.prototype
• arr.__proto__.__proto__-> 指向Object.prototype
• arr.__proto__.__proto__.__proto__-> 指向null（链条结束）

手写实现instanceof

根据上述原理，我们可以编写一个自定义函数isInstanceOf。其核心逻辑是：利用while循环沿着__proto__不断向上查找，直到找到匹配的prototype或到达原型链顶端（null）。

代码实现

/** * 判断 right 是否出现在 left 的原型链上 * @param {Object} left - 实例对象 * @param {Function} right - 构造函数 */ function isInstanceOf(left, right) { // 获取实例的隐式原型 let proto = left.__proto__; // 遍历原型链 while (proto) { // 如果原型相等，说明匹配成功 if (proto === right.prototype) { return true; } // 否则继续向上查找 proto = proto.__proto__; } // 查找到 null 还没找到，返回 false return false; }

测试用例

function Animal() {} function Cat() {} Cat.prototype = new Animal(); function Dog() {} Dog.prototype = new Animal(); const dog = new Dog(); console.log(isInstanceOf(dog, Dog)); // true console.log(isInstanceOf(dog, Animal)); // true console.log(isInstanceOf(dog, Object)); // true console.log(isInstanceOf(dog, Cat)); // false (dog 不是猫)

为什么需要instanceof？

在大型项目的多人协作中，代码复杂度极高。开发者往往无法一眼看清某个对象究竟拥有哪些属性和方法。通过instanceof进行类型检查，可以确保：

1. 代码安全性：在调用特定方法前确认对象类型，防止报错。
2. 明确继承关系：理解当前对象是通过何种方式（如prototype模式或构造函数绑定）继承而来的。

补充：继承的两种常见方式

• 构造函数绑定：使用call或apply在子类中调用父类构造函数。

• Prototype 模式：

  • 将父类的实例作为子类的原型。
  • 注意：通常需要将子类原型的constructor属性手动指回子类。

总结

instanceof的手写实现不仅是一个常见的面试题，更是深入理解 JavaScript “万物皆对象”和“原型继承”思想的钥匙。它告诉我们，JavaScript 的继承并不是类与类的拷贝，而是一条顺着__proto__不断向上的引用链条。