JavaScript 原型机制详解：从概念到实战（附个人学习方法）
原型是 JavaScript 实现继承与代码复用的核心机制，也是面试高频考点。本文结合个人学习经验、核心概念解析与实战案例，帮你彻底搞懂原型、prototype、__proto__ 及相关知识点，同时分享高效的学习方法。
一、个人学习方法：高效掌握复杂知识点
复杂概念（如原型）的学习，关键在“边输入边记录”和“先模仿后创新”，我的核心方法如下：
1. 边看教程边做“双笔记”
- 截图笔记：遇到关键代码（如
prototype挂载方法）、原型链图示时，立刻截图并标注核心逻辑（比如在截图上写“__proto__指向构造函数的prototype”）； - 文字笔记：用自己的话总结知识点（比如“
new关键字的作用，就是创建一个对象并让它的__proto__指向构造函数的prototype”），避免照搬教程话术。 - 好处：复盘时既能看代码细节，又能快速回忆自己的理解，比单纯看视频效率高 2 倍以上。
2. 利用碎片化时间，拒绝“无效等待”
很多事情（如视频加载、代码运行）存在空隙时间，此时可以：
- 快速默写核心公式（如“
对象.__proto__ === 构造函数.prototype”）； - 梳理知识点逻辑（如“先区分普通对象和函数对象，再理解
prototype的作用”）； - 注意：如果事情需要全程专注（如调试复杂代码），则不强行拆分时间，避免打断思路。
3. 先仿造再创新：入门的“黄金法则”
学习原型这类抽象概念时，先“照抄”老师的代码（如给 Date 原型加方法），理解每一行的作用后，再做创新修改（如给 Array 原型加“去重方法”）。
- 示例：先仿造“给
Date加showNowTime方法”，再创新“给Date加showTime方法，支持返回yyyy-MM-dd HH:mm格式”。 - 好处：降低入门难度，避免因“想不出创新点”而放弃，同时在仿造中积累手感。
二、原型核心概念：先理清“3 个基础问题”
在学原型前，必须先解决 3 个核心问题：区分普通对象与函数对象、理解 prototype、理解 __proto__。
1. 问题 1：如何区分普通对象与函数对象？
JS 中所有值要么是“普通对象”，要么是“函数对象”，两者的核心区别是：是否有 prototype 属性（函数对象有，普通对象没有），常用 typeof 检测：
| 类型 | 定义方式 | typeof 结果 | 是否有 prototype | 示例 |
|---|---|---|---|---|
| 普通对象 | 对象字面量、new Object() | object | 无 | var o = {name: 'a'} |
| 函数对象 | 函数声明、new Function() | function | 有 | function fn(){}, Date |
实战检测代码
// 普通对象：typeof 为 object，无 prototype
var o1 = { name: '诗书画唱' };
var o2 = new Object();
var arr = [1, 2, 3]; // 数组是特殊的普通对象
console.log(typeof o1); // object（普通对象）
console.log(typeof arr); // object（普通对象）
console.log(o1.prototype); // undefined（普通对象无 prototype）// 函数对象：typeof 为 function，有 prototype
function fn() {}
var Dog = function() {};
console.log(typeof fn); // function（函数对象）
console.log(typeof Date); // function（Date 是内置函数对象）
console.log(fn.prototype); // object（函数对象有 prototype，默认是普通对象）// 特殊例外：Function.prototype 是函数对象（唯一例外）
console.log(typeof Function.prototype); // function（其他函数对象的 prototype 都是 object）
2. 问题 2：prototype 是什么？有什么用？
prototype 是函数对象特有的属性，本质是一个“普通对象”（除了 Function.prototype），核心作用是实现代码复用——给 prototype 加的属性/方法，所有由该函数构造的对象都能访问到。
核心特点
- 只有函数对象有
prototype（普通对象没有）； - 函数对象的
prototype中，默认有constructor属性，指向该函数本身（如fn.prototype.constructor === fn）； - 示例：给
Stu函数的prototype加sex属性，所有new Stu()创建的对象都能访问sex。
实战代码：prototype 实现代码复用
// 1. 定义函数对象（构造函数）
function Stu(name) {this.name = name; // 每个对象独有的属性（姓名不同）
}// 2. 给 prototype 加“共享属性/方法”（所有学生都有相同的性别和“学习方法”）
Stu.prototype.sex