深入理解 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__ 不断向上的引用链条。