JavaScript 原型与原型链：一场有趣的家族传承故事

Tzarevich
40 阅读5分钟

JavaScript 原型与原型链：一场有趣的家族传承故事

引言：JavaScript 的"家族继承法"

想象一下，在 JavaScript 的世界（早期es5）里，每个对象都有自己的"家族传承"。不像其他编程语言中严格的"父母-子女"血缘关系，它没有传统意义上的“类”（class），而是通过构造函数、prototype 和 __proto__ 构建起一套独特的对象系统。它采用了一种更灵活的"师徒传承"机制——这就是原型。本文将系统讲解这三大核心概念，并结合图示帮助读者建立清晰的认知框架。

一、构造函数：创建对象的"模具"

1.1 什么是构造函数？

构造函数就像是制造对象的"模具"：

// 创建一个"人"的模具
function Person(name, age) {
    this.name = name;  // 每个人的名字都不同
    this.age = age;    // 每个人的年龄也不同
}

// 用模具造出具体的人
const 张三 = new Person('张三', 25);
const 李四 = new Person('李四', 30);

每个用 new 创建的对象都有自己独特的属性，就像每个人都有自己的名字和年龄。

1.2 问题来了：重复的技能

如果我们在模具里直接定义方法：

function Person(name) {
    this.name = name;
    this.sayHello = function() {  // 每个人都要重新学说话
        console.log('你好！');
    };
}

这就好比让每个人出生时都要重新发明"说话"这个技能，既浪费精力又占用空间。

二、原型：共享的"家族技能库"

prototype.png

图1：构造函数与它的技能库

2.1 引入"家族技能库"

JavaScript 提供了一个聪明的解决方案：原型（prototype）。

function Person(name) {
    this.name = name;  // 个人特有的属性
}

// 家族的公共技能库
Person.prototype = {
    species: '人类',           // 共享的属性
    sayHello: function() {     // 共享的方法
        console.log('你好，我是' + this.name);
    },
    eat: function() {          // 另一个共享方法
        console.log('我在吃饭');
    }
};

现在，所有 Person 创建的对象都共享这个技能库，不需要每个人单独学习。

2.2 技能查找规则

prototype2.png 图2：对象如何访问家族技能库

当对象需要使用某个技能时：

const 张三 = new Person('张三');

console.log(张三.name);      // 1. 先找自己有没有 → "张三"（找到了！）
console.log(张三.species);   // 2. 自己没有，去家族库找 → "人类"（找到了！）
console.log(张三.toString);  // 3. 家族库没有，去更古老的家族找 → 找到了！

这种"就近查找"的机制就是原型链。

三、完整的家族树：原型链

3.1 家族关系网

prototype3.png

图3：完整的家族关系

每个对象都有三个重要的"家庭成员"：

  • 自己：拥有独特的个性（实例属性）
  • 直属师傅：Person.prototype（共享技能库）
  • 祖师爷：Object.prototype（所有对象的公共祖先）
const 张三 = new Person('张三');

// 验证家族关系
console.log(张三.__proto__ === Person.prototype);  // true - 直属师傅
console.log(张三.constructor === Person);          // true - 创造者

3.2 追溯家族历史

prototype4.png

图4：完整的家族传承链

让我们追溯张三的"家族历史"：

// 张三的直属师傅
console.log(张三.__proto__); // Person的技能库

// 师傅的师傅
console.log(张三.__proto__.__proto__); // Object的技能库

// 祖师爷的祖师爷...
console.log(张三.__proto__.__proto__.__proto__); // null - 创世神！

3.3 万物起源

prototype5.png

图5：JavaScript 世界的起源

在 JavaScript 的世界里：

  • 所有对象最终都继承自 Object.prototype
  • Object.prototype 就像是创世神，它没有父亲（原型为 null）
  • 这就是原型链的终点
// 数组、函数、日期...都来自同一个祖先
const 数组 = [];
const 函数 = function() {};
const 日期 = new Date();

console.log(数组.__proto__.__proto__ === Object.prototype); // true
console.log(函数.__proto__.__proto__ === Object.prototype); // true
console.log(日期.__proto__.__proto__ === Object.prototype); // true

3.4 constructor 的作用与陷阱

默认情况下，Person.prototype 上有一个 constructor 属性，指向 Person 函数本身，constructor 是原型与构造函数间的"身份证"，确保双方正确关联：

function Person(name) {
    this.name = name;
}
console.log(Person.prototype.constructor === Person); // true

陷阱：重写原型会丢失constructor

// 错误：constructor指向断裂
Person.prototype = {
    sayHello: function() {}
};
console.log(Person.prototype.constructor); // Object（错误！）

// 正确：手动修复
Person.prototype = {
    constructor: Person,  // 修复指向
    sayHello: function() {}
};

最佳实践：避免完全重写原型，使用属性添加方式

// 推荐做法
Person.prototype.sayHello = function() {};
Person.prototype.eat = function() {};

四、现实世界的类比

武侠门派比喻

把原型链想象成武侠门派：

  • 你：一个刚入门的弟子（实例对象）
  • 师傅：传授你门派特有武功（Person.prototype）
  • 祖师爷：创造所有武功的基础原理（Object.prototype）
  • null：武学的起源，已不可考

当你需要解决问题时：

  1. 先用自己学过的招式（自身属性）
  2. 自己不会，请教师傅（原型方法）
  3. 师傅也不会，请教祖师爷（Object.prototype 的方法）
  4. 祖师爷说这是武学基本原理，他也不会（null）

五、实际应用：让代码更聪明

5.1 扩展内置功能

// 为所有数组添加一个"求和"技能
Array.prototype.sum = function() {
    return this.reduce((total, num) => total + num, 0);
};

const 数字列表 = [1, 2, 3, 4, 5];
console.log(数字列表.sum()); // 15 - 现在所有数组都会这个技能了！

5.2 实现技能传承（继承）

// 老师傅的技能库
function 老师傅() {}
老师傅.prototype.绝技 = function() {
    console.log('这是祖传绝技！');
};

// 新弟子继承老师傅的技能
function 新弟子() {}
新弟子.prototype = Object.create(老师傅.prototype);

const 弟子甲 = new 新弟子();
弟子甲.绝技(); // "这是祖传绝技！" - 成功继承！

六、现代写法：Class 语法糖

ES6 的 class 让这种"师徒传承"写起来更直观：

// 现代写法 - 本质还是原型继承
class Person {
    constructor(name) {
        this.name = name;  // 个人特性
    }
    
    // 这些自动进入技能库（原型）
    sayHello() {
        console.log(`你好，我是${this.name}`);
    }
}

// 技能传承（继承）
class Student extends Person {
    constructor(name, grade) {
        super(name);  // 继承老师傅的特性
        this.grade = grade;
    }
    
    study() {
        console.log('我在学习！');
    }
}

七、总结：三大核心概念的关系图谱

概念作用关键点
构造函数创建实例并初始化自有属性使用 new 调用，this 指向新对象
prototype存放共享属性和方法每个函数都有，值为对象
proto实例访问原型的通道每个对象都有，指向其原型
原型链属性查找路径终点为 Object.prototype → null

🔁 整个机制如同一条信息传递链：从实例出发，经由 __proto__ 逐级向上，直到找到目标或抵达终点。

记住这个简单的比喻：你自己会的就用，不会的问师傅，师傅不会的问祖师爷，直到问遍整个家族传承！

理解原型机制，不仅仅是掌握一门语法，更是领悟 JavaScript 设计哲学的关键一步。它告诉我们：对象不是孤立的个体，而是通过原型链彼此连接的生命体。

avatar
文章
阅读
粉丝