JavaScript原型链：从玩具积木到家族传承的奇妙之旅 🧩
你以为原型链是JavaScript的黑暗魔法？其实它更像乐高积木的拼接游戏！让我们用轻松的方式揭开这个看似复杂概念的神秘面纱。
一、初识原型：每个对象都有"爸爸" 👨👦
1.1 基础概念
在JavaScript的世界里，每个对象都有一个隐藏的'爸爸'（原型对象）。就像孩子会继承父母的基因，对象也会继承原型的属性和方法。
// 创建一个普通对象
const myObject = { name: '小明' };
// 查看它的爸爸是谁
console.log(myObject.__proto__); // 输出: Object.prototype
1.2 原型继承示意图
graph TD
A[实例对象] --> B[构造函数的prototype]
B --> C[Object.prototype]
C --> D[null]
二、原型链的积木拼接 🧱
2.1 基础原型链
想象你在玩积木：
- 红色积木：实例对象
- 蓝色积木：构造函数原型
- 绿色积木：Object原型
function Toy(name) {
this.name = name;
}
// 添加原型方法
Toy.prototype.play = function() {
console.log(`${this.name}真好玩！`);
};
const lego = new Toy('乐高积木');
lego.play(); // 输出: 乐高积木真好玩！
2.2 继承实现
sequenceDiagram
实例对象->>原型对象: 查找属性/方法
原型对象->>Object原型: 继续查找
Object原型->>null: 查找结束
三、进阶玩法：多层继承 🎢
3.1 构造函数继承
function AdvancedToy(name, type) {
Toy.call(this, name); // 调用父类构造函数
this.type = type;
}
// 设置原型链
AdvancedToy.prototype = Object.create(Toy.prototype);
AdvancedToy.prototype.constructor = AdvancedToy;
// 添加新方法
AdvancedToy.prototype.showType = function() {
console.log(`这是${this.type}类型玩具`);
};
const robot = new AdvancedToy('变形金刚', '机甲');
robot.play(); // 继承自Toy
robot.showType();// 新增方法
3.2 原型链图示
graph TD
A[robot实例] --> B[AdvancedToy.prototype]
B --> C[Toy.prototype]
C --> D[Object.prototype]
D --> E[null]
四、常见问题诊所 🏥
4.1 属性遮蔽
function Person() {}
Person.prototype.name = '人类';
const p = new Person();
p.name = '小明'; // 遮蔽原型属性
console.log(p.name); // '小明'（实例属性）
console.log(p.__proto__.name); // '人类'（原型属性）
4.2 修改原型陷阱
Array.prototype.sum = function() {
return this.reduce((a,b) => a + b, 0);
};
const arr = [1,2,3];
console.log(arr.sum()); // 6
// 但不要随意修改内置原型！
五、现代继承方式 🆕
5.1 class语法糖
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
speak() {
console.log(`${this.name} barks.`);
}
}
const d = new Dog('旺财');
d.speak(); // 旺财 barks.
5.2 原型链对比
graph TD
D[Dog实例] --> C[Dog.prototype]
C --> B[Animal.prototype]
B --> A[Object.prototype]
A --> null
六、调试技巧 🛠️
6.1 查看原型链
const arr = [];
// 方法1：
console.log(arr.__proto__.__proto__);
// 方法2：
console.log(Object.getPrototypeOf(arr));
6.2 检测原型关系
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true
console.log(Array.prototype.isPrototypeOf(arr)); // true
七、总结归纳 📚
| 概念 | 类比 | 代码示例 |
|---|---|---|
| 原型对象 | 基因库 | Constructor.prototype |
| 原型链 | 家族族谱 | obj.__proto__.__proto__... |
| 属性查找 | 逐级上报 | obj.hasOwnProperty('key') |
| 构造函数 | 生产流水线 | new Constructor() |
| instanceof | 家谱认证 | obj instanceof Constructor |
记住：原型链就像玩具积木的拼接，既要保证结构稳固（正确的继承关系），又要避免过度堆砌（原型污染）。
八、趣味练习 🎯
- 创建一个
Vehicle类，有run方法 - 创建
Car继承Vehicle，添加brand属性 - 给
Car.prototype添加honk方法 - 实现三层原型链：实例 → Car → Vehicle → Object
// 参考答案
class Vehicle {
run() {
console.log('Running...');
}
}
class Car extends Vehicle {
constructor(brand) {
super();
this.brand = brand;
}
honk() {
console.log('Beep beep!');
}
}
const myCar = new Car('Tesla');
myCar.run(); // Running...
myCar.honk(); // Beep beep!
彩蛋：为什么程序员喜欢用原型链？
因为这样他们就可以理直气壮地说："这个bug是我爸爸留下的！" 😂
免责声明：本文部分内容由AI生成，技术细节仅供参考。实际开发请以各运行时环境为准。
