编辑“︁原型与原型链”︁（章节）

= 原型与原型链 =

'''原型（Prototype）'''与'''原型链（Prototype Chain）'''是 JavaScript 中实现继承的核心机制，理解它们对于掌握 JavaScript 的面向对象编程至关重要。本文将详细介绍原型、原型链的概念、工作原理及其实际应用。

== 介绍 ==
在 JavaScript 中，每个对象（除了 <code>null</code>）都有一个与之关联的原型对象（Prototype）。原型对象本身也是一个对象，它包含可以被其他对象继承的属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（<code>null</code>）。

== 原型（Prototype） ==
=== 构造函数的 prototype 属性 ===
在 JavaScript 中，每个函数都有一个 <code>prototype</code> 属性（仅函数有），它指向一个对象，该对象是实例对象的原型。

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

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

const person1 = new Person("Alice");
person1.sayHello(); // 输出：Hello, my name is Alice
</syntaxhighlight>

* <code>Person.prototype</code> 是 <code>person1</code> 的原型对象。
* <code>person1.__proto__</code>（非标准属性，但浏览器支持）也指向 <code>Person.prototype</code>。

=== 对象的 __proto__ 属性 ===
每个对象都有一个 <code>__proto__</code> 属性（非标准，但广泛支持），指向其构造函数的 <code>prototype</code> 对象。

<syntaxhighlight lang="javascript">
console.log(person1.__proto__ === Person.prototype); // 输出：true
</syntaxhighlight>

== 原型链（Prototype Chain） ==
原型链是由对象的 <code>__proto__</code> 属性串联起来的链式结构。当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找。

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

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating.`);
};

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

// 设置 Dog.prototype 的原型为 Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor 指向

Dog.prototype.bark = function() {
    console.log(`${this.name} is barking!`);
};

const dog1 = new Dog("Buddy", "Golden Retriever");
dog1.eat(); // 输出：Buddy is eating.
dog1.bark(); // 输出：Buddy is barking!
</syntaxhighlight>

=== 原型链图示 ===
<mermaid>
graph LR
    dog1 -->|__proto__| Dog.prototype
    Dog.prototype -->|__proto__| Animal.prototype
    Animal.prototype -->|__proto__| Object.prototype
    Object.prototype -->|__proto__| null
</mermaid>

* <code>dog1.__proto__</code> 指向 <code>Dog.prototype</code>。
* <code>Dog.prototype.__proto__</code> 指向 <code>Animal.prototype</code>。
* <code>Animal.prototype.__proto__</code> 指向 <code>Object.prototype</code>。
* <code>Object.prototype.__proto__</code> 为 <code>null</code>，表示原型链的终点。

== 实际应用 ==
=== 继承的实现 ===
原型链是 JavaScript 实现继承的基础。通过修改原型链，可以实现类似传统面向对象语言中的继承。

<syntaxhighlight lang="javascript">
// 使用 ES6 的 class 语法（底层仍基于原型）
class Animal {
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(`${this.name} is eating.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    bark() {
        console.log(`${this.name} is barking!`);
    }
}

const dog2 = new Dog("Max", "Labrador");
dog2.eat(); // 输出：Max is eating.
dog2.bark(); // 输出：Max is barking!
</syntaxhighlight>

=== 内置对象的原型 ===
JavaScript 的内置对象（如 <code>Array</code>、<code>String</code>）也通过原型链扩展方法。

<syntaxhighlight lang="javascript">
const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // 输出：true
console.log(Array.prototype.__proto__ === Object.prototype); // 输出：true
</syntaxhighlight>

== 常见问题 ==
=== 如何判断属性是自身的还是继承的？ ===
使用 <code>hasOwnProperty</code> 方法：

<syntaxhighlight lang="javascript">
console.log(dog1.hasOwnProperty("name")); // 输出：true
console.log(dog1.hasOwnProperty("eat")); // 输出：false
</syntaxhighlight>

=== 如何获取对象的原型？ ===
* 非标准方式：<code>obj.__proto__</code>
* 标准方式：<code>Object.getPrototypeOf(obj)</code>

<syntaxhighlight lang="javascript">
console.log(Object.getPrototypeOf(dog1) === Dog.prototype); // 输出：true
</syntaxhighlight>

== 总结 ==
* 每个对象都有一个原型（<code>__proto__</code>），构造函数的 <code>prototype</code> 是实例的原型。
* 原型链是对象通过 <code>__proto__</code> 连接起来的链式结构，用于实现属性和方法的继承。
* 原型链的顶端是 <code>Object.prototype</code>，其 <code>__proto__</code> 为 <code>null</code>。
* 实际开发中，可以使用 <code>class</code> 和 <code>extends</code> 语法简化继承的实现。

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端基础]]