揭秘JavaScript原型与原型链：从“传家宝”到“寻宝图”的奇妙旅程本文以“传家宝”喻原型、“寻宝图”喻原型链，通俗

揭秘JavaScript原型与原型链：从“传家宝”到“寻宝图”的奇妙旅程

引言

各位前端的“魔法师”们，你们在JavaScript的奇妙世界里遨游时，有没有遇到过这样两个神秘的词汇：原型（Prototype）和原型链（Prototype Chain）？它们就像是JavaScript世界里的“传家宝”和“寻宝图”，掌握了它们，你就能更好地理解JavaScript的继承机制，写出更优雅、更高效的代码。

别担心，今天我们不讲那些枯燥的理论，我会用最通俗易懂、最风趣幽默的方式，结合生活中的小例子，带你一起揭开原型和原型链的神秘面纱，保证让你看完直呼“原来如此！”。准备好了吗？让我们一起踏上这段奇妙的旅程吧！

✨ 第一章：原型的“传家宝”——Prototype

想象一下，你是一个家族企业的创始人，你希望你的所有后代（也就是你创建的每一个“实例”）都能继承一些家族的共同财富和技能，比如祖传的秘方、家族的生意经等等。这些共同的财富和技能，就是我们JavaScript中的“原型”（Prototype）。

在JavaScript中，每个函数（Function）都有一个prototype属性，它指向一个对象，这个对象就是原型对象。原型对象的作用，就是为通过该构造函数创建的所有实例提供共享的属性和方法。就像家族的“传家宝”一样，所有家族成员都可以使用，但这个“传家宝”只有一份，放在家族的宝库里。

📜 代码示例：家族秘方共享

让我们用代码来模拟一下这个“家族秘方”的场景：

// 家族构造函数：Person，代表家族的创始人
function Person(name) {
  this.name = name;
}

// 家族秘方：lastName，放在原型对象上，所有家族成员共享
Person.prototype.lastName = 'Smith';

// 家族成员：person1
var person1 = new Person('John');

console.log(person1.lastName); // 输出：Smith

在这个例子中，Person.prototype.lastName就是我们的“家族秘方”。无论你创建多少个Person的实例，它们都能访问到这个lastName属性，而不需要在每个实例中都单独创建一个lastName。这样不仅节省了内存，也方便了管理。

💡 原型的好处：省钱又省心

为什么要把方法和属性写在原型上呢？这就像家族企业里，如果每个新来的员工都要重新学习一遍家族秘方，那得多麻烦啊！把秘方统一放在一个地方，大家都能学，而且只需要一份，是不是省钱又省心？

节省内存：如果把方法直接写在构造函数内部，那么每创建一个实例，就会创建一份新的方法。而写在原型上，所有实例共享同一个方法，大大节省了内存空间。
方便继承：原型是实现JavaScript继承的基础。通过原型链，实例可以访问到原型上的属性和方法，从而实现属性和方法的共享和继承。

所以，下次当你需要给构造函数创建的实例添加共享的属性或方法时，记得把它们放到prototype这个“传家宝”里哦！

🔍 第二章：原型的“寻宝图”——原型链

如果说原型是“传家宝”，那么原型链就是一张“寻宝图”。当你需要寻找一个属性或方法时，JavaScript引擎会沿着这张“寻宝图”一层一层地往上找，直到找到为止，或者找到“宝藏的尽头”（null）。

🕵️‍♂️ 寻宝之旅：属性查找机制

想象一下，你是一个侦探，接到一个任务：找到某个物品。你会怎么做？

先看自己有没有：首先，你会检查自己身上有没有这个物品。如果找到了，任务完成！
再问父母：如果自己没有，你会去问你的父母。父母是你的“原型”，他们可能拥有你没有的物品。
再问爷爷奶奶：如果父母也没有，他们会去问他们的父母，也就是你的爷爷奶奶。爷爷奶奶是父母的“原型”，以此类推。
直到祖宗十八代：这个过程会一直持续下去，直到找到拥有这个物品的祖先，或者找到家族的“开山鼻祖”（null），如果连他都没有，那就说明这个物品不存在。

在JavaScript中，这个“寻宝”的过程就是原型链的工作原理。当你访问一个对象的属性或方法时，JavaScript引擎会：

先在对象自身查找：如果对象自身有这个属性或方法，就直接使用。
沿着__proto__向上查找：如果对象自身没有，就会沿着它的__proto__属性（这是一个指向其原型对象的内部属性）向上查找。原型对象也是一个普通对象，它也有自己的__proto__。
直到原型链的尽头：这个查找过程会一直持续到原型链的顶端——Object.prototype，它的__proto__指向null。如果直到null都没有找到，那么就返回undefined。

🔗 代码示例：沿着原型链寻宝

让我们用代码来模拟一下这个“寻宝”的过程：

// 爷爷：Grandpa
function Grandpa() {
  this.money = 100;
}

// 爸爸：Father，继承了爷爷的财产
function Father() {
  this.car = 'BMW';
}
Father.prototype = new Grandpa(); // 爸爸的原型是爷爷的实例

// 儿子：Son，继承了爸爸的财产
function Son() {
  this.toy = 'robot';
}
Son.prototype = new Father(); // 儿子的原型是爸爸的实例

var littleMing = new Son();

console.log(littleMing.toy);   // 输出：robot (儿子自己有)
console.log(littleMing.car);   // 输出：BMW (儿子没有，去爸爸那里找)
console.log(littleMing.money); // 输出：100 (儿子没有，爸爸也没有，去爷爷那里找)
console.log(littleMing.house); // 输出：undefined (儿子、爸爸、爷爷都没有)

通过这个例子，我们可以清晰地看到，当littleMing访问toy时，直接在自身找到；访问car时，沿着原型链找到了Father.prototype；访问money时，沿着原型链找到了Grandpa.prototype。而house则因为原型链上都没有，最终返回了undefined。

🔄 构造函数、原型对象和实例的“三角恋”

在JavaScript的世界里，构造函数、原型对象和实例之间存在着一种微妙而又紧密的关系，就像一场“三角恋”：

构造函数：它有一个prototype属性，指向它的原型对象。
原型对象：它有一个constructor属性，指回它的构造函数。同时，它也有一个__proto__属性，指向它的上层原型对象。
实例：它有一个__proto__属性，指向它的构造函数的原型对象。

这种“三角恋”关系，正是构建原型链的基础，也是JavaScript实现继承的核心机制。

🔬 第三章：类型检测的“火眼金睛”——typeof 与 instanceof

在JavaScript的江湖中，我们经常需要判断一个变量到底是什么“类型”的。是数字？是字符串？还是一个复杂的对象？这时候，我们就需要用到JavaScript提供的“火眼金睛”——typeof和instanceof。

🧐 typeof：粗略的“身份识别”

typeof就像一个“粗心的门卫”，它能告诉你一个变量大概是什么类型的，但对于一些复杂类型，它就有点“脸盲”了。它能准确识别基本数据类型（如number、string、boolean、undefined、symbol、bigint），但对于对象和数组，它都只会告诉你它们是object。

生活小例子：typeof就像你问一个人是“男的”还是“女的”，它能告诉你性别，但你问它这个人是“中国人”还是“美国人”，它就答不上来了，只会说“是个人”。

console.log(typeof 10);          // 输出: "number"
console.log(typeof "hello");     // 输出: "string"
console.log(typeof true);        // 输出: "boolean"
console.log(typeof undefined);   // 输出: "undefined"
console.log(typeof Symbol("id")); // 输出: "symbol"
console.log(typeof 10n);         // 输出: "bigint"

console.log(typeof {});          // 输出: "object"
console.log(typeof []);          // 输出: "object" (看，它“脸盲”了)
console.log(typeof null);        // 输出: "object" (这是一个历史遗留的bug，记住就好)
console.log(typeof function(){}); // 输出: "function" (函数是个特例，它有自己的类型)

🕵️‍♀️ instanceof：精准的“血统鉴定”

instanceof则是一个“专业的血统鉴定师”，它能更精确地判断一个对象是否是某个构造函数的实例，也就是说，它能判断一个对象是否出现在某个构造函数的原型链上。

生活小例子：instanceof就像你问一个人是不是“李家的孩子”，它会去查这个人的族谱（原型链），看看他的祖先里有没有“李家”的血统。只要族谱上能找到，它就告诉你“是”。

function Person(name) {
  this.name = name;
}

var person1 = new Person("Alice");
var arr = [];

console.log(person1 instanceof Person); // 输出: true (person1是Person的实例)
console.log(arr instanceof Array);    // 输出: true (arr是Array的实例)
console.log(arr instanceof Object);   // 输出: true (arr也是Object的实例，因为Array的原型链上最终会指向Object.prototype)

console.log({} instanceof Array);    // 输出: false (普通对象不是Array的实例)

instanceof的原理就是沿着__proto__这条原型链向上查找，如果能在目标构造函数的prototype属性上找到，就返回true。所以，它能帮助我们更准确地判断对象的类型。

总结：typeof适合判断基本数据类型，而instanceof则更适合判断对象的具体类型，特别是当涉及到继承关系时，它能发挥更大的作用。

🔧 第四章：插件化开发初体验——用原型链打造你的“计算器”

学了这么多理论知识，是时候来点实战了！在前端开发中，我们经常会遇到需要扩展现有功能，或者编写可复用模块的场景。这时候，原型和原型链就能派上大用场了。让我们来尝试开发一个简单的“计算器”插件，它可以对两个数字进行加法运算。

🎯 需求分析：一个简单的加法计算器

我们的目标是：

创建一个构造函数，用于生成计算器实例。
在计算器实例上添加一个add方法，用于执行加法运算。
这个add方法应该是所有计算器实例共享的，以节省内存。

💡 为什么要把`add`方法写在原型上？

还记得我们前面说的“传家宝”吗？add方法就是我们计算器的“核心技能”，它应该被所有计算器实例共享。如果把add方法直接写在构造函数内部，每创建一个计算器实例，就会创建一个新的add方法，这会造成内存浪费。而写在原型上，所有实例共享同一个add方法，既高效又优雅。

🛠️ 动手实践：打造你的专属计算器

// 步骤一：声明一个构造函数 Sum，代表我们的计算器
function Sum() {
  // 构造函数内部可以放置实例特有的属性，这里我们暂时不需要
}

// 步骤二：将公共方法写在原型上
// 我们将 add 方法添加到 Sum 的原型对象上
Sum.prototype.add = function (num1, num2) {
  return num1 + num2;
};

// 步骤三：将构造函数挂载到 window 对象上（可选，方便全局访问）
// 这样我们就可以在浏览器控制台直接使用 Sum 了
window.Sum = Sum;

// 步骤四：编写一个立即执行函数（IIFE），用于初始化和测试
(function () {
  // 创建一个计算器实例
  var calculator = new Sum();

  // 使用 add 方法进行加法运算
  var result = calculator.add(5, 3);

  console.log("5 + 3 = ", result); // 预期输出: 5 + 3 = 8
})();

🚀 运行结果：

运行上述代码，你会在控制台看到输出：5 + 3 = 8。

通过这个简单的例子，我们可以看到原型和原型链在实际开发中的应用。通过将共享的方法放到原型上，我们不仅实现了代码的复用，还优化了内存使用。这正是JavaScript原型机制的魅力所在！

🎉 结语

恭喜你！通过这篇博客，你已经成功解锁了JavaScript原型和原型链的奥秘。它们不再是晦涩难懂的概念，而是你手中强大的“传家宝”和“寻宝图”。

掌握原型和原型链，不仅能让你更好地理解JavaScript的继承机制，还能帮助你写出更优雅、更高效、更易于维护的代码。在未来的前端开发之旅中，希望你能灵活运用这些知识，成为一名真正的JavaScript“魔法师”！

如果你有任何疑问或者想分享你的学习心得，欢迎在评论区留言，我们一起交流进步！

揭秘JavaScript原型与原型链：从“传家宝”到“寻宝图”的奇妙旅程