JavaScript 继承与 `instanceof`：从原理到实践

在大型 JavaScript 项目中，多人协作开发时，我们常常会面对这样的问题：

"这个对象到底是什么类型？它有哪些属性和方法？"

此时，instanceof 运算符就显得尤为重要。它能帮助我们判断一个对象是否是某个构造函数的实例，从而安全地调用其方法或访问其属性。

但要真正理解 instanceof，我们必须深入 JavaScript 的原型与原型链机制 ，并掌握继承的多种实现方式 ------因为 instanceof 的本质，就是检查原型链上是否存在某个构造函数的 prototype 对象。

一、`instanceof` 是什么？

instanceof 是一个二元关系运算符，语法为：

css 复制代码

A instanceof B

它的含义是：

B.prototype 是否出现在 A 的原型链（[[Prototype]]）上？

✅ 示例：

javascript 复制代码

[] instanceof Array;     // true
[] instanceof Object;    // true
new Date() instanceof Date; // true

🔍 底层原理（手写实现）：

javascript 复制代码

function myInstanceof(left, right) {
    if (typeof right !== 'function') return false;
    if (left == null) return false;

    let proto = Object.getPrototypeOf(left);
    while (proto) {
        if (proto === right.prototype) {
            return true;
        }
        proto = Object.getPrototypeOf(proto);
    }
    return false;
}

💡 注意：ES6+ 中 instanceof 还支持 Symbol.hasInstance 自定义行为，但核心仍是原型链查找。

二、为什么需要继承？

在 OOP 中，继承的本质是：子类能够复用父类的属性和方法 。

但在 JavaScript 中，由于没有"类"的概念（ES6 之前），我们必须通过原型机制来模拟继承。

🔗 原型机制与原型链

在 JavaScript 中，每个对象（除 null 外）都有一个内部属性 [[Prototype]]（可通过 __proto__ 或 Object.getPrototypeOf() 访问），它指向另一个对象------即该对象的原型。

当访问一个对象的属性时，如果自身没有，引擎会沿着 [[Prototype]] 链向上查找 ，直到找到该属性或到达链尾（null）。这条查找路径就是原型链。

🧪 原型链长什么样？让我们实地看看：

运行以下代码，观察一个空数组的完整原型链：

ini 复制代码

const arr = []; // 等价于 new Array()
console.log(
arr.__proto__ === Array.prototype,          // true
arr.__proto__.__proto__ === Object.prototype, // true
arr.__proto__.__proto__.__proto__ === null    // true
);

输出清晰地展示了这条链：

javascript 复制代码

 arr 
  → Array.prototype       // 第一层：数组方法（如 push, slice）
    → Object.prototype    // 第二层：通用对象方法（如 toString, hasOwnProperty）
      → null              // 第三层：原型链终点

🔍 这正是 `instanceof` 的判断依据！

执行 arr instanceof Array 时，引擎检查：
- Array.prototype 是否在 arr 的原型链上？✅（第一层命中）
执行 arr instanceof Object 时，引擎检查：
- Object.prototype 是否在链上？✅（第二层命中）

因此两者都返回 true。

💡 核心原理 ：
instanceof 的工作方式就是遍历 left 的 [[Prototype]] 链 ，逐个比对是否等于 right.prototype。

只要找到，就返回 true；若遍历到 null 仍未找到，则返回 false。

下面，我们从最简单的继承方式出发，逐步演进，揭示每种方法的缺陷，并引出更优解。

三、继承方式的演进

1. 构造函数绑定继承（借用构造函数）

✅ 实现：

ini 复制代码

function Animal(name) {
    this.name = name;
    this.species = '动物';
    this.hobbies = []; // 引用类型
}

function Dog(name, breed) {
    // 借用父类构造函数
    Animal.call(this, name);
    this.breed = breed;
}

✅ 优点：

每个实例拥有独立的属性，避免引用类型共享；
可向父类传参。

❌ 缺陷：

无法继承父类原型上的方法！

javascript 复制代码

Animal.prototype.eat = function() { console.log('吃'); };
new Dog().eat(); // ❌ TypeError

结论：只能继承实例属性，不能复用方法。

2. 原型链继承（Prototype 模式）

✅ 实现：

ini 复制代码

function Animal() {
    this.species = '动物';
    this.hobbies = [];
}

function Dog(breed) {
    this.breed = breed;
}

// 父类实例作为子类原型
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog; // 修复 constructor

✅ 优点：

子类实例可访问父类原型方法；
方法复用，节省内存。

❌ 缺陷：

所有子类实例共享父类实例属性：

scss 复制代码

const d1 = new Dog(), d2 = new Dog();
d1.hobbies.push('睡');
console.log(d2.hobbies); // ['睡'] ❌

无法向父类构造函数传参；
constructor 被破坏（需手动修复）。

结论：方法可复用，但实例属性不安全。

3. 组合继承（经典继承）

✅ 思路：结合前两种方式

用 call 继承实例属性；
用原型链继承原型方法。

ini 复制代码

function Dog(name, breed) {
    Animal.call(this, name); // 独立属性
    this.breed = breed;
}

Dog.prototype = new Animal(); // 继承方法
Dog.prototype.constructor = Dog;

✅ 优点：

属性独立 + 方法复用；
支持传参；
instanceof 判断正常。

❌ 缺陷：

父类构造函数被调用两次！
- 第一次：new Animal() 设置原型；
- 第二次：Animal.call(this) 初始化实例。
原型上多出无用属性（虽被覆盖，但存在）。

性能浪费，逻辑冗余。

4. 寄生组合继承（最优解）

✅ 核心思想：

不通过 new Parent() 创建原型，而是创建一个干净的中间对象 ，其原型指向 Parent.prototype。

✅ 实现：

ini 复制代码

function inheritPrototype(Child, Parent) {
    const prototype = Object.create(Parent.prototype); // 创建空中介
    prototype.constructor = Child;
    Child.prototype = prototype;
}

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

inheritPrototype(Dog, Animal);

✅ 优点：

父类构造函数只调用一次；
实例属性独立；
原型方法复用；
原型链干净，无冗余属性；
instanceof 和 constructor 均正确。

✅ 这是引用《JavaScript 高级程序设计》推荐的最佳继承模式。

四、现代方案：ES6 `class` 与 `extends`

ES6 的 class 语法糖，底层正是基于寄生组合继承：

scala 复制代码

class Animal {
    constructor(name) {
        this.name = name;
    }
    eat() { /*...*/ }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 相当于 Animal.call(this, name)
        this.breed = breed;
    }
}

自动处理原型链；
自动修复 constructor；
代码简洁，语义清晰。

📌 新项目请优先使用 class，但务必理解其背后的原型机制。

五、总结：继承方式对比

方式	实例属性独立	方法复用	支持传参	调用次数	安全性
构造函数绑定	✅	❌	✅	1	中
原型链继承	❌	✅	❌	1	低
组合继承	✅	✅	✅	2	高
寄生组合继承	✅	✅	✅	1	最高
ES6 `class`	✅	✅	✅	1	最高（推荐）

六、回到 `instanceof`

正是因为有了正确的继承（尤其是原型链的建立），instanceof 才能可靠工作：

javascript 复制代码

const dog = new Dog('旺财', '金毛');
console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Object); // true

在大型项目中，instanceof 是类型守卫（Type Guard） 的重要工具，能有效避免运行时错误。

结语

JavaScript 的继承看似简单，实则暗藏玄机。从最初的构造函数绑定，到原型链，再到组合与寄生组合，每一步演进都是对前一种方式缺陷的修正。

而 instanceof 作为原型链的"探测器"，其可靠性完全依赖于继承实现的正确性。

理解这些底层机制，不仅能写出更健壮的代码，也能在面试中游刃有余。

JavaScript 继承与 `instanceof`：从原理到实践