本文共 1974 字，大约阅读时间需要 6 分钟。

原型（Prototype）、proto 和 constructor 是 JavaScript 中非常重要的概念，了解它们对于理解对象创建和继承 mechanism 是必不可少的。今天我将带你深入探讨这些属性，并通过实例解释它们的作用。

1. 原型（Prototype）和 constructor 属性

原型（Prototype）是一个非常重要的概念，它既是原型属性也是原型对象。每个函数在定义时都带有 prototype 属性，而构造函数（如 User）的 prototype 属性包含常规方法和属性，这些方法和属性可以被所有该构造函数创建的实例共享和继承。

通过以下代码可以观察到这一点：

function User() {}console.log(User.prototype); // 输出: { constructor: (function User()), __proto__: Object }

这里可以看到， User 函数的 prototype 属性指向了一个对象，其中包含 constructor 属性。由于constructor 属性本身也是一个函数，它指向当前的 User 函数，这就形成了一个循环：

User.prototype.constructor = User; // 造成循环

constructors 的主要作用是什么？它为构造函数提供了一种方式，以便原型链上的方法能够正确地指向构造函数。虽然这一特性在现代 JavaScript 中不太常用，但了解它有助于理解原型机制的基础。

2. proto（隐式原型）

proto 是 JavaScript 中的隐式原型属性，它指向构造函数的显式原型（prototype）。简单来说，每个对象（甚至包括数据类型）都有一个 proto 属性，而这个属性会指向它的显式原型。如果没有显式指定，隐式原型会指向 Object 的原型。

例如：

function User() {}var user = new User();console.log(user.__proto__); // 输出: User.prototype

通过上述代码可以看出，用户对象的 proto 指向了 User 构造函数的显式原型。这种机制允许用户对象能够访问构造函数原型中定义的属性和方法。

3. 数据类型的隐式原型

除了对象，所有数据类型（包括 null 和 undefined 之外）都有自己的隐式原型。例如：

console.log(10.__proto__); // 输出: Number.prototypeconsole.log('10'.__proto__); // 输出: String.prototypeconsole.log(true.__proto__); // 输出: Boolean.prototypeconsole.log("{}).__proto__; // 输出: Object.prototype

这些隐式原型允许 JavaScript 实例能够访问与它们对应的数据类型相关的属性和方法。例如，数值对象可以通过 Number.prototype 方法获取到 to string 等方法。

4. 构造函数和实例对象

构造函数和实例对象之间的关系是通过原型链实现的。构造函数的显式原型（prototype）包含了一系列方法和属性，而实例对象的隐式原型（proto）则指向构造函数的显式原型。

例如：

function Date() {}var time = new Date();console.log(time.__proto__ === Date.prototype); // 输出: true

这一机制允许实例对象能继承构造函数原型中的方法和属性，从而实现代码复用和代码共享。

5. 特殊情况注意事项

• null 和 undefined：这些值的 proto 属性是 undefined。
• Object.prototype 没有构造函数：注意到，在 Object.prototype 中，构造函数是 Object（即 Object 构造函数）。
• 数组和对象的原型链：数组和对象实例的 proto 指向不同的显式原型。

6. 结论

原型、proto 和 constructor 属性共同构成了 JavaScript 中对象的 inheritance mechanism。理解这些属性的作用有助于更好地理解 JavaScript 的对象模型，从而提高代码的维护性和可读性。在实际开发中，合理利用原型链可以显著提升代码性能，减少 memory leak。希望你对这些概念有了更深入的理解，欢迎继续探索 JavaScript 的其他奥秘。如果你有任何问题，欢迎在评论区与我交流。

转载地址：http://bhnnz.baihongyu.com/