深入浅出JavaScript原型链：从`__proto__`到ES6 `Class`的继承奥秘302

各位前端探索者们，大家好！我是你们的知识博主。今天，我们要揭开JavaScript世界里一个既核心又容易让人迷惑的概念——“原型”（Prototype）。如果你曾被`__proto__`、`prototype`、原型链这些词搞得一头雾水，那么恭喜你，这篇文章就是为你量身定制的！我们将从最基础的概念出发，一步步深入，直到你彻底掌握JavaScript的继承之魂。

在开始之前，我想先纠正一个常见的误解：JavaScript并不是一门传统意义上的“基于类”的面向对象语言。它是一门“基于原型”的语言。这意味着什么呢？简单来说，JS中的对象并不是通过“复制”类的定义来创建的，而是通过“委托”的方式，从另一个对象（即它的原型）那里继承属性和方法。理解了这一点，我们就迈出了掌握原型机制的第一步。

什么是原型？每个对象都有它吗？

在JavaScript中，几乎所有对象都有一个与之关联的“原型对象”。这个原型对象可以看作是当前对象的“父辈”，它上面定义了当前对象可以访问和使用的属性和方法。当你想访问一个对象的某个属性或方法时，如果该对象本身没有，JavaScript就会去它的原型对象上找，如果原型对象也没有，就再去原型的原型上找，直到找到或者到达原型链的终点。

`prototype`属性与`__proto__`属性：分清这对“双胞胎”

这是原型机制中最容易混淆的两个概念，但它们的作用截然不同：

1. `prototype`属性（请注意，这是函数的属性！）：
* 只有“函数”才拥有`prototype`属性。
* 这个属性指向一个对象，我们称之为“原型对象”。
* 这个原型对象的作用是：当该函数被用作构造函数（通过`new`关键字调用）来创建新实例时，新实例的`__proto__`属性将指向这个原型对象。
* 简而言之，``是为`new Func()`创建的实例对象提供共享属性和方法的“蓝图”。
* 在这个原型对象上，默认会有一个`constructor`属性，指向它所关联的构造函数本身。

2. `__proto__`属性（请注意，这是对象的属性！）：
* 几乎所有“对象”都拥有`__proto__`属性（``除外，它的`__proto__`是`null`）。
* 这个属性指向当前对象的“原型”（即它的父对象）。
* 它构成了我们后面要讲的“原型链”。
* 在ES6标准中，`__proto__`已经被标准化为`[[Prototype]]`内部插槽，但不推荐直接使用`__proto__`进行修改操作，建议使用`()`、`()`、`()`等方法。

总结一下关键点：
* ``是为将来的实例“准备”原型。
* `obj.__proto__`是实例对象“实际拥有”的原型。

揭秘原型链：属性查找的“寻宝之旅”

当你在一个对象上访问一个属性或方法时，JavaScript引擎会执行一个“寻宝之旅”：

1. 第一步：首先在对象自身查找。
2. 第二步：如果对象自身没有找到，就通过该对象的`__proto__`属性，去它的原型对象上查找。
3. 第三步：如果原型对象上也没有找到，就继续沿着原型对象的`__proto__`向上查找，直到找到或到达原型链的终点。

这个由`__proto__`连接起来的链条，就是所谓的“原型链”（Prototype Chain）。原型链的终点是``，而``的`__proto__`是`null`。当查找到`null`还未找到时，就会返回`undefined`。

一个形象的比喻： 你家要找一个工具。你先看看自己的工具箱有没有（对象自身属性）。没有，你问问爸爸（父对象，也就是你的`__proto__`指向的原型）的工具箱有没有。爸爸没有，他问问爷爷（爷爷是爸爸的`__proto__`指向的原型）的工具箱有没有，直到找到这个工具或者发现没人有这个工具为止。

`new`关键字做了什么？深入构造函数的世界

`new`关键字是创建实例的关键，它在背后做了四件非常重要的事情：

1. 创建一个空对象：首先，JS引擎会创建一个全新的空对象。
2. 链接原型：将这个新创建的空对象的`__proto__`属性指向构造函数的`prototype`对象。这是建立原型链的关键一步！
3. 绑定`this`并执行构造函数：将这个新对象作为构造函数内部的`this`上下文来执行构造函数。这样，构造函数中对`this`的属性赋值就会添加到这个新对象上。
4. 返回新对象：如果构造函数没有显式地返回另一个对象，那么`new`表达式就会自动返回这个新创建的对象。

function Person(name, age) {
= name;
= age;
}
= function() {
(`Hello, my name is ${}.`);
};
const john = new Person('John', 30);
// john.__proto__ === // true
// () // Hello, my name is John.

`()`：更纯粹的原型式继承

除了`new`关键字，ES5引入的`()`方法提供了一种更直接、更纯粹的原型式继承方式。它会创建一个新对象，并使用现有的一个对象作为新对象的原型。

const personPrototype = {
sayHello: function() {
(`Hello, my name is ${}.`);
}
};
const alice = (personPrototype);
= 'Alice';
(); // Hello, my name is Alice.
// alice.__proto__ === personPrototype // true

`()`不涉及构造函数，只是简单地创建了一个指定原型的新对象。这对于实现基于原型的继承模式非常有用。

ES6 `Class`：只是语法糖，原型机制未变

ES6引入了`class`语法，让JavaScript的面向对象编程看起来更像传统的类语言，如Java或C++。但这仅仅是一种“语法糖”（Syntactic Sugar），其底层仍然是基于原型链实现的。

class Animal {
constructor(name) {
= name;
}
speak() {
(`${} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类的constructor
= breed;
}
speak() {
(`${} barks.`);
}
static info() {
('Dogs are great!');
}
}
const myDog = new Dog('Buddy', 'Golden Retriever');
(); // Buddy barks.
// myDog.__proto__ === // true
// .__proto__ === // true
// .__proto__ === // true

从上面的例子可以看出：
* `class`的`constructor`方法对应于之前的构造函数。
* `class`中定义的方法（如`speak`）会被添加到类的`prototype`属性上。
* `extends`关键字实现了继承，它通过巧妙地设置子类`prototype`的`__proto__`指向父类的`prototype`来构建原型链。
* `static`方法直接挂载在类本身，而不是其原型上。

所以，即便你现在主要使用ES6 `Class`来编写代码，对原型链的理解依然至关重要，它能帮助你更深刻地理解代码的运行机制，更好地调试和优化。

实际应用与最佳实践

1. 共享方法：将方法添加到构造函数的`prototype`上，可以避免每个实例都创建一份方法，节省内存。
2. 避免直接修改`__proto__`：尽管一些环境允许，但直接修改`__proto__`被认为是一种低效且不推荐的做法，因为它可能会导致性能问题，并违反引擎优化。请优先使用`()`、`()`等标准API。
3. 理解`hasOwnProperty()`：在遍历对象属性时，使用`()`可以判断一个属性是否是对象自身的（而不是从原型链上继承的），这对于避免意外行为非常重要。

结语

原型链是JavaScript面向对象编程的基石。它虽然初看起来有些抽象，但一旦你理解了`prototype`和`__proto__`各自扮演的角色，以及它们如何共同构建起原型链，那么你对JavaScript的理解将跃升一个大台阶。掌握了原型，你就能更深入地理解继承、作用域链、闭包等高级概念，从而写出更健壮、更高效的JavaScript代码。

希望这篇文章能帮助你彻底征服JavaScript原型这个“拦路虎”！如果你有任何疑问或想分享你的学习心得，欢迎在评论区留言，我们一起交流学习！下次再见！

2025-11-06

上一篇：告别混乱！JavaScript设置DOM文本的终极指南：textContent、innerText与innerHTML全面解析与最佳实践

下一篇：JavaScript如何从浏览器走向桌面，全面赋能你的数字生活