JavaScript面向对象的幕后英雄，没有原型链你写不出真正的好代码

精选文章moguli202025-06-20 19:35:326A⁺A^-

各位朋友！你有没有在JavaScript中，看着两个看似独立的对象，却发现它们拥有同样的方法，或者在访问一个对象属性时，它“神奇”地从另一个地方冒了出来？你是不是会好奇：“这些对象之间到底有什么‘血缘关系’？为什么它们会共享能力？”别急！今天咱们就来一场JavaScript世界的“寻根之旅”，深入探险一个超级重要、却常常被忽视的“幕后英雄”——原型链。

你可能会觉得，面向对象编程（OOP）不就是“类”和“对象”那点事儿吗？不就是定义一个class，然后new出它的实例嘛？是的，表面上看起来是这样。但你知道吗，在JavaScript的底层，那些你熟悉的class语法，只不过是披着“现代外衣”的“语法糖”而已！它的骨子里，依然是那个古老而强大的原型链在支撑着一切。如果你不理解它，你可能会写出能跑的代码，但绝写不出真正优雅、高效、避免各种“坑”的“好代码”！今天，就让我们掀开这层神秘的面纱，看看原型链到底是如何让JavaScript的对象变得如此灵活和强大的！

什么是“原型”？——每个对象都有一个“爸爸”或“模版”

要理解原型链，我们首先得从“原型”（Prototype）说起。在JavaScript中，每个对象（除了少数特例，比如Object.prototype这个“老祖宗”）都有一个内部属性，通常被称为 [[Prototype]]。你可以把它想象成这个对象的“爸爸”或者“基因模版”。

当你想访问一个对象的某个属性或方法时，JavaScript引擎会首先在这个对象自身上查找。如果没找到，它会顺着 [[Prototype]] 指向的那个对象（也就是它的“爸爸”），继续查找。如果“爸爸”身上也没找到，就再找“爷爷”……直到找到原型链的尽头——那个“万物起源”的Object.prototype。如果到了Object.prototype也还没找到，那它就真的不存在了，你会得到undefined或者报错。

这个查找的过程，就像你找家里的遥控器：先看看自己手里有没有，没有就问问爸爸有没有，爸爸没有就问问爷爷有没有，如果爷爷也说没有，那估计就是找不到了。

连点成线，便是“原型链”——对象间的“家族谱系”

当多个对象通过它们的 [[Prototype]] 属性一层层地连接起来，形成一个链条时，我们就称之为原型链（Prototype Chain）。这就是JavaScript实现继承的底层机制！

比如，你定义一个构造函数（或者说一个类）：

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

Animal.prototype.sayName = function() {
    console.log(`我叫 ${this.name}`);
};

const dog = new Animal("旺财");
dog.sayName(); // 输出: 我叫 旺财

这里发生了什么呢？

当你用 new Animal() 创建 dog 对象时，dog 对象的 [[Prototype]] 会指向 Animal.prototype 这个对象。
Animal.prototype 呢？它也是一个对象，它的 [[Prototype]] 则默认指向“所有对象的老祖宗”——Object.prototype。
而 Object.prototype 的 [[Prototype]] 则是 null，这意味着它就是原型链的终点了。

所以，dog 对象背后的原型链是这样的：
dog --> Animal.prototype --> Object.prototype --> null

当你调用 dog.sayName() 时：

首先在 dog 自身上找 sayName，没找到。
接着顺着 dog 的原型，到 Animal.prototype 上找 sayName，找到了！
然后执行 Animal.prototype.sayName 方法。

你看，sayName 方法明明定义在 Animal.prototype 上，但 dog 对象却能直接调用它，这就是原型链的功劳！

原型链：写出“好代码”的幕后英雄！

理解原型链，不仅能让你明白JavaScript对象是如何“继承”能力的，更能帮助你写出真正“好”的代码。

1. 内存效率的“魔法”：避免重复造轮子

想象一下，如果你创建100个Dog对象，每个Dog对象都有一个sayName方法。如果这个方法直接挂在每个Dog实例上，那内存里就会有100份相同的sayName函数。但通过原型链，sayName方法只存在于Animal.prototype这一个地方，所有Animal的实例都共享它。这就像工厂生产汽车，发动机的设计图纸只需要一份，而不是每辆车都单独画一份。这极大地节省了内存空间，提高了性能！

2. 灵活扩展的“定海神针”：动态增强对象能力

原型链的另一个强大之处在于它的动态性。你可以在任何时候向原型对象添加新的属性或方法，这些改变会立刻体现在所有基于该原型创建的实例上。

// 假设你已经创建了dog对象
Animal.prototype.eat = function() {
    console.log("吃狗粮！");
};

dog.eat(); // 立即就可以调用了！ 输出: 吃狗粮！
const anotherDog = new Animal("小黑");
anotherDog.eat(); // 新创建的dog也能立即调用！

是不是很神奇？这就像你升级了工厂的模版，所有新生产出来的产品以及之前已经生产出来的产品，都自动拥有了新功能！这个特性在开发插件、库或者进行运行时功能扩展时非常有用。

3. 理解JavaScript的“类”：拨开语法糖的迷雾

JavaScript在ES6引入了class语法，让面向对象编程看起来和Java、C++等语言更像了。但请记住，这只是语法糖！class的底层实现，依然是基于原型和原型链。

class MyClass {
    constructor(value) {
        this.value = value;
    }
    logValue() {
        console.log(this.value);
    }
}

const instance = new MyClass("Hello");
instance.logValue();
// 实际上，MyClass.prototype上就挂着logValue方法
// instance.__proto__ === MyClass.prototype; // 为true

理解了这一点，你就不会被表面的语法所迷惑，能够更深入地理解JavaScript面向对象的本质，从而更好地驾驭它。

避免“踩坑”：hasOwnProperty的重要性

正因为原型链的存在，我们经常需要区分一个属性是对象自身的，还是从原型链上继承来的。这时，hasOwnProperty 方法就派上用场了！它定义在Object.prototype上，用来检查对象自身是否包含某个属性（而不是从原型链上继承的）。

const obj = {
    a: 1
};
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('toString')); // false (toString是从Object.prototype继承的)

在遍历对象属性或者做某些特定检查时，hasOwnProperty是防止你访问到非自身属性的“神器”。