【JavaScript】对象原型中的 `__proto__` 属性详解

在 JavaScript 中，__proto__ 是一个非常重要但也容易被误解的属性。它为对象提供了一个机制来查找属性和方法，使得原型链成为可能。在深入理解 JavaScript 的继承机制时，理解 __proto__ 是至关重要的一步。本文将详细介绍 __proto__ 属性及其在 JavaScript 原型链中的作用，帮助开发者更好地掌握对象的原型机制。

一、__proto__ 概述

1. 什么是 __proto__

__proto__ 是 JavaScript 中每个对象的一个内部属性，它指向该对象的原型（即其构造函数的 prototype 属性）。通过这个链接，JavaScript 实现了对象之间的继承关系。

JavaScript 的对象系统基于原型，而非类（尽管 ES6 引入了类的语法糖）。原型链是通过对象的 __proto__ 属性来构建的，它让我们可以通过链式查找机制来获取属性和方法。

2. __proto__ 和 prototype 的区别

初学者容易混淆 __proto__ 和 prototype。虽然它们都涉及原型机制，但却有着不同的功能：

• __proto__：对象的内部属性，指向其构造函数的原型。
• prototype：函数的属性，用于定义由该构造函数创建的实例共享的属性和方法。

简单来说，__proto__ 是对象之间联系的纽带，而 prototype 是构造函数用来构建原型链的基础。

二、__proto__ 的基本用法

在 JavaScript 中，几乎所有对象都具有 __proto__ 属性。我们可以通过访问该属性来了解对象的继承关系。以下是一个简单的例子：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name);
};

const john = new Person('John');

console.log(john.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

在这个例子中：

• john.__proto__ 指向 Person.prototype，表明 john 对象继承了 Person 构造函数的原型。
• Person.prototype.__proto__ 指向 Object.prototype，表明所有函数的原型最终都继承自 Object。

三、__proto__ 属性详解

1. 原型链中的作用

__proto__ 是构建原型链的核心。它让 JavaScript 可以通过链式查找机制来查找属性和方法。例如，当访问一个对象的属性时，JavaScript 会首先在对象本身上查找该属性。如果找不到，就会顺着 __proto__ 链一直向上查找，直到找到为止，或者到达原型链的顶端（即 Object.prototype），此时如果仍然没有找到，JavaScript 会返回 undefined。

const obj = { a: 1 };

console.log(obj.a); // 1
console.log(obj.toString()); // 输出 toString 方法，来自 Object.prototype
console.log(obj.b); // undefined

在上面的例子中，obj 对象本身没有 toString 方法，但 JavaScript 会沿着 __proto__ 链查找，最终在 Object.prototype 中找到 toString。

2. 如何查看对象的原型

我们可以通过访问对象的 __proto__ 属性来查看其原型：

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

当然，更推荐的做法是使用 Object.getPrototypeOf() 来获取对象的原型：

console.log(Object.getPrototypeOf(obj)); // 输出 Object.prototype

3. 修改对象的原型

尽管 __proto__ 是一个标准属性，允许开发者手动修改对象的原型，但这并不是推荐的做法，因为直接操作原型链可能会导致不可预知的错误。以下是修改对象原型的例子：

const animal = {
  speak: function() {
    console.log('Animal speaks');
  }
};

const dog = {
  bark: function() {
    console.log('Dog barks');
  }
};

// 修改 dog 的原型为 animal
dog.__proto__ = animal;

dog.bark(); // Dog barks
dog.speak(); // Animal speaks

在这个例子中，我们通过设置 dog.__proto__ = animal，使 dog 对象继承了 animal 的方法。

四、原型链中的常见问题

1. 循环引用

如果在不经意间创建了循环的原型引用，可能会导致 JavaScript 引擎陷入无限递归。例如：

const objA = {};
const objB = {};

// 循环引用
objA.__proto__ = objB;
objB.__proto__ = objA;

这样的循环引用会导致查找属性时出现堆栈溢出错误。为了避免这种问题，通常应该确保原型链是单向且不会回环的。

2. 性能问题

由于每次访问对象的属性时，JavaScript 都可能需要顺着原型链向上查找，过长的原型链会导致性能问题。特别是在高频访问的场景中，长原型链的性能开销可能会非常显著。

因此，在设计对象时，尽量保持原型链的简洁与清晰。

五、__proto__ 的替代方案：Object.create() 和 Object.setPrototypeOf()

虽然 __proto__ 提供了操作对象原型的方式，但 JavaScript 还提供了更加规范和推荐的操作原型的方法。

1. Object.create()

Object.create() 是创建新对象并设置其原型的标准方法，它比直接使用 __proto__ 更加安全且可控：

const animal = {
  speak() {
    console.log('Animal speaks');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Dog barks');
};

dog.bark(); // Dog barks
dog.speak(); // Animal speaks

2. Object.setPrototypeOf()

我们可以使用 Object.setPrototypeOf() 来修改现有对象的原型，它提供了一个更为规范的方式来改变对象的原型：

const cat = {
  meow() {
    console.log('Cat meows');
  }
};

const animal = {
  speak() {
    console.log('Animal speaks');
  }
};

Object.setPrototypeOf(cat, animal);
cat.meow(); // Cat meows
cat.speak(); // Animal speaks

六、总结

__proto__ 是 JavaScript 中对象原型机制的核心，它使得对象可以继承其他对象的属性和方法，形成强大的原型链。尽管 __proto__ 是一个强大的工具，但它并不是最佳的操作原型的方式。更推荐使用 Object.create() 和 Object.setPrototypeOf() 这样的标准方法来管理对象的继承关系。

推荐：

• JavaScript
• react
• vue

---