编辑“︁JavaScript原型继承”︁

{{DISPLAYTITLE:JavaScript原型继承}}

'''JavaScript原型继承'''是JavaScript中实现面向对象编程的核心机制之一。与基于类的继承（如Java或C++）不同，JavaScript使用'''原型链'''（Prototype Chain）来实现对象之间的继承关系。本文将详细讲解原型继承的原理、实现方式及实际应用。

== 概述 ==
在JavaScript中，每个对象都有一个'''原型对象'''（Prototype），对象可以从其原型继承属性和方法。当访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或到达原型链的末端（`null`）。

原型继承的核心特点包括：
* '''动态性'''：原型链可以在运行时修改。
* '''共享性'''：多个对象可以共享同一个原型的属性和方法。
* '''灵活性'''：可以通过构造函数或`Object.create()`实现继承。

== 原型链的工作原理 ==
JavaScript中的每个对象都有一个内部属性`[[Prototype]]`（可通过`__proto__`或`Object.getPrototypeOf()`访问）。当访问对象的属性时，引擎会按以下顺序查找：
1. 对象自身属性。
2. 对象的`[[Prototype]]`。
3. 原型的`[[Prototype]]`，直到`null`。

<mermaid>
graph LR
    A[对象] --> B[原型]
    B --> C[原型的原型]
    C --> D[...]
    D --> E[null]
</mermaid>

=== 示例：原型链查找 ===
<syntaxhighlight lang="javascript">
// 定义一个原型对象
const animal = {
    type: "Animal",
    describe() {
        return `This is a ${this.type}.`;
    }
};

// 创建一个继承自animal的对象
const dog = Object.create(animal);
dog.type = "Dog";

console.log(dog.describe()); // 输出: "This is a Dog."
</syntaxhighlight>

**解释**：
1. `dog`对象本身没有`describe`方法，但通过原型链从`animal`继承了该方法。
2. `this.type`指向`dog`自身的`type`属性（"Dog"），而非原型的`type`（"Animal"）。

== 构造函数与原型 ==
JavaScript的构造函数通过`prototype`属性实现继承。所有实例共享构造函数的`prototype`对象。

=== 示例：构造函数继承 ===
<syntaxhighlight lang="javascript">
function Animal(type) {
    this.type = type;
}

Animal.prototype.describe = function() {
    return `This is a ${this.type}.`;
};

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

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

const myDog = new Dog("Dog", "Buddy");
console.log(myDog.describe()); // 输出: "This is a Dog."
</syntaxhighlight>

**关键点**：
* `Animal.call(this, type)`：在子类中调用父类构造函数（类似`super()`）。
* `Object.create(Animal.prototype)`：避免直接赋值`Animal.prototype`，防止修改父类影响子类。
* 修正`constructor`：确保`Dog.prototype.constructor`指向`Dog`。

== 实际应用场景 ==
=== 场景1：共享方法 ===
原型继承适合共享方法以减少内存占用。例如，多个`User`对象共享同一个`login`方法：
<syntaxhighlight lang="javascript">
function User(name) {
    this.name = name;
}

User.prototype.login = function() {
    return `${this.name} logged in.`;
};

const user1 = new User("Alice");
const user2 = new User("Bob");

console.log(user1.login()); // "Alice logged in."
console.log(user2.login()); // "Bob logged in."
</syntaxhighlight>

=== 场景2：扩展内置对象 ===
通过修改原型，可以扩展内置对象的功能（需谨慎使用）：
<syntaxhighlight lang="javascript">
Array.prototype.last = function() {
    return this[this.length - 1];
};

const arr = [1, 2, 3];
console.log(arr.last()); // 3
</syntaxhighlight>

== 原型继承的局限性 ==
* **性能问题**：过长的原型链会影响属性查找速度。
* **共享引用类型**：原型上的引用类型属性会被所有实例共享。
  <syntaxhighlight lang="javascript">
  function Problem() {}
  Problem.prototype.items = [];

  const p1 = new Problem();
  p1.items.push(1);
  const p2 = new Problem();
  console.log(p2.items); // [1] （非预期结果）
  </syntaxhighlight>

== 现代替代方案 ==
ES6引入的`class`语法是原型继承的语法糖，更接近传统面向对象语言：
<syntaxhighlight lang="javascript">
class Animal {
    constructor(type) {
        this.type = type;
    }
    describe() {
        return `This is a ${this.type}.`;
    }
}

class Dog extends Animal {
    constructor(type, name) {
        super(type);
        this.name = name;
    }
}

const myDog = new Dog("Dog", "Buddy");
console.log(myDog.describe()); // "This is a Dog."
</syntaxhighlight>

== 总结 ==
* JavaScript通过'''原型链'''实现继承。
* 构造函数通过`prototype`属性共享方法。
* `Object.create()`和`class`语法是常见的实现方式。
* 注意原型继承的共享性和动态性带来的影响。

掌握原型继承是理解JavaScript面向对象编程的关键一步！

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