7.1 原型链与 __proto__

7.1 原型链与 __proto__

在 JavaScript 中，对象之间通过原型链（Prototype Chain）实现继承。每个对象都有一个内部属性 [[Prototype]]，通常通过 __proto__ 访问。理解原型链和 __proto__ 是掌握 JavaScript 面向对象编程的关键。本节将详细介绍原型链的概念及其工作原理。

7.1.1 原型链的基本概念

1. 原型（Prototype）
每个 JavaScript 对象都有一个原型对象（prototype），用于继承属性和方法。

2. 原型链（Prototype Chain）
当访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法或到达原型链的顶端（null）。

7.1.2 __proto__ 属性

__proto__ 是对象的一个内部属性，指向其原型对象。虽然它不是标准属性，但大多数浏览器都支持它。

1. 访问原型对象

const obj = {};
console.log(obj.__proto__); // 输出 Object.prototype

2. 修改原型对象

const parent = { name: "Parent" };
const child = {};
child.__proto__ = parent;

console.log(child.name); // 输出 "Parent"

7.1.3 原型链的工作原理

1. 示例

const parent = {
  name: "Parent",
  greet() {
    console.log(`Hello, ${this.name}!`);
  },
};

const child = Object.create(parent);
child.name = "Child";

child.greet(); // 输出 "Hello, Child!"

2. 原型链查找过程

• 查找 child 对象是否有 greet 方法。
• 如果没有，沿着 child.__proto__ 查找 parent 对象。
• 在 parent 对象中找到 greet 方法并执行。

7.1.4 原型链的顶端

原型链的顶端是 Object.prototype，其 __proto__ 为 null。

1. 示例

const obj = {};
console.log(obj.__proto__ === Object.prototype); // 输出 true
console.log(Object.prototype.__proto__); // 输出 null

7.1.5 示例代码

示例 1：原型链继承

const animal = {
  speak() {
    console.log(`${this.name} makes a sound.`);
  },
};

const dog = Object.create(animal);
dog.name = "Dog";

dog.speak(); // 输出 "Dog makes a sound."

示例 2：修改原型链

const car = {
  drive() {
    console.log("Driving...");
  },
};

const tesla = Object.create(car);
tesla.drive(); // 输出 "Driving..."

tesla.__proto__ = {
  autopilot() {
    console.log("Autopilot engaged!");
  },
};

tesla.autopilot(); // 输出 "Autopilot engaged!"
tesla.drive(); // 报错：tesla.drive is not a function

7.1.6 总结

• 原型链：通过 __proto__ 实现对象之间的继承。
• 原型链查找：当对象没有某个属性或方法时，沿着原型链向上查找。
• 原型链顶端：Object.prototype 是原型链的顶端，其 __proto__ 为 null。

通过理解原型链和 __proto__，你可以更好地掌握 JavaScript 的继承机制。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 原型链的主要作用是什么？
2. 如何通过 __proto__ 修改对象的原型链？
3. 原型链的顶端是什么？为什么？