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

对象原型（__proto__）和构造函数（prototype）的区别是一个常见的JavaScript主题。虽然两者在某些方面有相似之处，但它们的作用和使用场景却有显著的不同。以下将从基础概念到具体应用细节，帮助你全面理解这两个概念。

1. 原型对象（__proto__）

原型对象（__proto__）是每个对象都有的一个隐式属性，它包含了对象的原型链。原型链是JavaScript中实现继承的机制，允许对象继承某个基对象的属性和方法。当一个对象没有自己的属性或方法时，它会沿着原型链向上查找，这通常涉及到构造函数的原型（prototype）。

2. 构造函数的原型（prototype）

构造函数的原型（prototype）是构造函数的一个特殊属性，它是一个对象，用于存储构造函数的原型属性。每个构造函数的原型对象都包含一个constructor属性，该属性指回构造函数本身。通过修改构造函数的原型，我们可以为所有基于该构造函数创建的对象添加额外的方法或属性。

3. 构造函数的原型与方法的关系

当我们使用构造函数创建对象时，新对象会继承构造函数的原型中的属性和方法。例如：

function Person(uname, age) {    this.uname = uname;    this.sing = function() {        console.log('我会唱歌');    };}var person1 = new Person('wang', 18);var person2 = new Person('wei', 18);person1.sing(); // 输出: 我会唱歌person2.sing(); // 输出: 我会唱歌

在上述代码中，Person.prototype.sing 是构造函数的原型中的方法，因此所有Person实例都可以访问并调用sing方法。

4. 直接修改构造函数的原型

有时候，我们可能需要直接修改构造函数的原型对象。这可以通过以下方式实现：

function Person(uname, age) {    this.uname = uname;    this.sing = function() {        console.log('我会唱歌');    };}// 修改构造函数的原型，手动设置constructor指回原构造函数Person.prototype = {    constructor: Person, // 指向原构造函数    sing: function() {        console.log('我会唱歌');    }};var person3 = new Person('zha', 20);person3.sing(); // 输出: 我会唱歌

在这种情况下，constructor属性被手动设置为指向原构造函数，这样即使我们修改了原型，实例仍然可以正确调用constructor。

5. 原型对象与构造函数的区别

虽然__proto__和prototype都包含constructor属性，但它们的作用有所不同。__proto__是对象的原型链的一部分，而prototype是构造函数的原型对象。理解这两者的区别对于掌握JavaScript对象模型至关重要。

6. 实际应用示例

考虑以下代码：

function Person(uname, age) {    this.uname = uname;    this.sing = function() {        console.log('我会唱歌');    };}// 直接给prototype赋值时需要手动设置constructorPerson.prototype = {    constructor: Person,    sing: function() {        console.log('我会唱歌');    }};var person4 = new Person('li', 19);person4.sing(); // 输出: 我会唱歌

在这个例子中，Person.prototype.sing 是构造函数的原型中的方法，constructor属性被手动设置为指向原构造函数，这样新实例才能正确调用constructor。

通过上述内容，你应该能够更好地理解__proto__和prototype的区别，以及它们在JavaScript中如何共同作用来定义和创建对象。掌握这些概念对于解决实际开发问题和优化代码结构至关重要。

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