编辑“︁JavaScript原型链”︁

{{DISPLAYTITLE:JavaScript原型链}}

'''JavaScript原型链'''是JavaScript中实现继承的核心机制，它允许对象通过内部[[Prototype]]属性访问其他对象的属性和方法。理解原型链对于掌握JavaScript面向对象编程至关重要。

== 基本概念 ==

在JavaScript中，每个对象（除<code>null</code>外）都有一个'''原型对象'''（prototype），对象会从其原型继承属性和方法。当访问对象的属性时，如果对象本身没有该属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链末端（<code>null</code>）。

=== 原型对象 ===
每个函数都有一个<code>prototype</code>属性（构造函数的原型），而每个对象都有一个内部<code>[[Prototype]]</code>属性（可通过<code>Object.getPrototypeOf()</code>或<code>__proto__</code>访问）。

<syntaxhighlight lang="javascript">
function Person(name) {
  this.name = name;
}

// 为Person的原型添加方法
Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}`;
};

const alice = new Person('Alice');
console.log(alice.greet()); // 输出: "Hello, my name is Alice"
</syntaxhighlight>

=== 原型链图示 ===
<mermaid>
graph LR
    A[alice实例] -->|[[Prototype]]| B[Person.prototype]
    B -->|[[Prototype]]| C[Object.prototype]
    C -->|[[Prototype]]| D[null]
</mermaid>

== 原型链的工作原理 ==

当访问对象属性时，JavaScript引擎会执行以下步骤：
# 检查对象自身是否拥有该属性
# 如果没有，检查对象的<code>[[Prototype]]</code>
# 重复此过程直到找到属性或到达<code>null</code>

=== 属性查找示例 ===
<syntaxhighlight lang="javascript">
const parent = { a: 1 };
const child = { b: 2 };
Object.setPrototypeOf(child, parent); // 设置原型

console.log(child.a); // 输出: 1 (通过原型链找到)
console.log(child.b); // 输出: 2 (自身属性)
console.log(child.c); // 输出: undefined (未找到)
</syntaxhighlight>

== 原型继承 ==

JavaScript使用原型链实现继承。ES6的<code>class</code>语法是原型继承的语法糖。

=== 继承实现示例 ===
<syntaxhighlight lang="javascript">
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a noise`;
};

function Dog(name) {
  Animal.call(this, name); // 调用父类构造函数
}

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  return `${this.name} barks`;
};

const dog = new Dog('Rex');
console.log(dog.speak()); // 输出: "Rex barks"
</syntaxhighlight>

== 原型链相关方法 ==

=== Object.create() ===
创建一个新对象，使用现有对象作为新对象的原型。

<syntaxhighlight lang="javascript">
const proto = { x: 10 };
const obj = Object.create(proto);
console.log(obj.x); // 输出: 10
</syntaxhighlight>

=== Object.getPrototypeOf() ===
获取对象的原型。

<syntaxhighlight lang="javascript">
const arr = [];
console.log(Object.getPrototypeOf(arr) === Array.prototype); // 输出: true
</syntaxhighlight>

=== instanceof 操作符 ===
检查构造函数的<code>prototype</code>是否出现在对象的原型链中。

<syntaxhighlight lang="javascript">
console.log([] instanceof Array); // 输出: true
console.log([] instanceof Object); // 输出: true
</syntaxhighlight>

== 实际应用案例 ==

=== 方法共享 ===
原型链允许所有实例共享方法，节省内存。

<syntaxhighlight lang="javascript">
function Car(model) {
  this.model = model;
}

// 所有Car实例共享同一个drive方法
Car.prototype.drive = function() {
  return `${this.model} is driving`;
};

const car1 = new Car('Toyota');
const car2 = new Car('Honda');
</syntaxhighlight>

=== 扩展内置对象 ===
通过修改原型可以扩展内置对象功能（需谨慎）。

<syntaxhighlight lang="javascript">
Array.prototype.last = function() {
  return this[this.length - 1];
};

console.log([1, 2, 3].last()); // 输出: 3
</syntaxhighlight>

== 性能考虑 ==

* 原型链过长会影响查找性能
* 在对象上直接定义常用属性比通过原型链访问更快
* 现代JavaScript引擎优化了原型链查找

== 常见误区 ==

1. '''混淆<code>__proto__</code>和<code>prototype</code>'''：
   * <code>prototype</code>是函数属性
   * <code>__proto__</code>是实例属性（已废弃，建议使用<code>Object.getPrototypeOf()</code>）

2. '''直接修改内置对象原型'''：可能导致不可预期的行为

3. '''忘记设置constructor'''：在继承时需要正确设置<code>constructor</code>属性

== 数学表示 ==

原型链可以表示为属性查找函数：

<math>
\text{GetProperty}(obj, prop) = \begin{cases}
obj[prop] & \text{如果 } obj \text{ 有 } prop \text{ 属性} \\
\text{GetProperty}(\text{proto}, prop) & \text{其中 proto = Object.getPrototypeOf(obj)} \\
\text{undefined} & \text{如果 proto 为 null}
\end{cases}
</math>

== 总结 ==

JavaScript原型链是：
* 基于原型的继承系统
* 所有对象通过<code>[[Prototype]]</code>链接
* 属性查找沿链向上进行
* 构造函数通过<code>prototype</code>属性设置实例原型
* ES6类语法是原型继承的语法糖

理解原型链是掌握JavaScript面向对象编程的关键，它解释了JavaScript中对象如何共享和继承行为。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript对象]]