编辑“︁JavaScript原型详解”︁

= JavaScript原型详解 =

== 引言 ==  
JavaScript是一门基于原型的语言，而非基于类的语言（如Java或C++）。理解原型（Prototype）是掌握JavaScript面向对象编程（OOP）的核心。原型机制允许对象继承其他对象的属性和方法，从而实现代码复用和动态扩展。本文将详细介绍原型的概念、原型链、构造函数与原型的关系，以及实际应用场景。

== 什么是原型？ ==  
在JavaScript中，每个对象都有一个内部属性<code>[[Prototype]]</code>（可通过<code>__proto__</code>访问），它指向另一个对象，称为其“原型”。当访问对象的属性或方法时，如果对象本身没有该属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链的末端（<code>null</code>）。

=== 原型链示例 ===  
以下代码展示了原型链的基本行为：

<syntaxhighlight lang="javascript">
// 创建一个对象并设置其原型
const animal = {
    sound: "Unknown",
    makeSound() {
        console.log(this.sound);
    }
};

const dog = {
    sound: "Woof!"
};

// 设置dog的原型为animal
Object.setPrototypeOf(dog, animal);

dog.makeSound(); // 输出: "Woof!"
</syntaxhighlight>

**解释**：  
1. <code>dog</code>对象本身没有<code>makeSound</code>方法，但通过原型链继承了<code>animal</code>的方法。  
2. 调用<code>dog.makeSound()</code>时，<code>this</code>指向<code>dog</code>，因此输出<code>dog.sound</code>的值。

== 构造函数与原型 ==  
JavaScript中，构造函数（Constructor）用于创建对象实例。每个构造函数都有一个<code>prototype</code>属性，指向一个对象，该对象将成为所有实例的原型。

=== 示例：构造函数与原型 ===  
<syntaxhighlight lang="javascript">
function Person(name) {
    this.name = name;
}

// 在Person的原型上添加方法
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}!`);
};

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

**关键点**：  
- <code>Person.prototype</code>是<code>alice</code>对象的原型。  
- <code>greet</code>方法定义在原型上，所有<code>Person</code>实例共享该方法，节省内存。

== 原型链的可视化 ==  
使用Mermaid绘制原型链关系：  

<mermaid>
graph LR
    A[alice] -->|__proto__| B[Person.prototype]
    B -->|__proto__| C[Object.prototype]
    C -->|__proto__| D[null]
</mermaid>

**说明**：  
1. <code>alice</code>的原型是<code>Person.prototype</code>。  
2. <code>Person.prototype</code>的原型是<code>Object.prototype</code>（默认原型）。  
3. <code>Object.prototype</code>的原型是<code>null</code>，表示链的终点。

== 修改原型的影响 ==  
修改构造函数的原型会动态影响所有实例，因为原型是共享的。

<syntaxhighlight lang="javascript">
Person.prototype.sayGoodbye = function() {
    console.log(`Goodbye from ${this.name}!`);
};

alice.sayGoodbye(); // 输出: "Goodbye from Alice!"
</syntaxhighlight>

== 实际应用场景 ==  
=== 1. 方法共享 ===  
将方法定义在原型上，避免每个实例重复创建方法，节省内存。  

=== 2. 继承实现 ===  
通过原型链实现继承：  

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

// 设置Employee的原型为Person的原型
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const bob = new Employee("Bob", "Developer");
bob.greet(); // 输出: "Hello, my name is Bob!"
</syntaxhighlight>

**注意**：必须修正<code>constructor</code>属性，否则它会指向<code>Person</code>。

== 原型与性能优化 ==  
过度嵌套的原型链会影响查找性能。建议：  
1. 尽量减少原型链长度。  
2. 使用<code>Object.hasOwnProperty</code>检查属性是否直接存在于对象上。  

<syntaxhighlight lang="javascript">
console.log(alice.hasOwnProperty("name")); // true
console.log(alice.hasOwnProperty("greet")); // false
</syntaxhighlight>

== 总结 ==  
- 原型是JavaScript实现继承和共享属性的核心机制。  
- 所有对象通过<code>[[Prototype]]</code>链接形成原型链。  
- 构造函数通过<code>prototype</code>属性为实例提供共享方法。  
- 修改原型会影响所有实例，需谨慎操作。  

掌握原型机制后，可以更灵活地设计JavaScript程序，并理解许多高级特性（如类语法糖的实现原理）。

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