JS - 构造函数、原型、实例对象三者的关系

首先要明确几点：

1. 万物皆对象，构造函数、原型、实例对象都是对象。

2. 每个对象都有一个特性[[Prototype]]，在一些浏览器中用属性名__proto__表示，它指向该对象的原型。

3. 每个函数都有一个名为prototype的属性，它的值是一个对象，这个对象就是通过调用构造函数创建的对象的原型。

4. constructor属性只存在于原型对象中，它用于返回创建该原型对象的函数，也就是构造函数。

5. 构造函数、原型、实例对象的关系：构造函数有一个prototype属性指向原型对象，同样原型对象又有一个constructor属性返回指向构造函数。此外，实例对象有一个特性[[Prototype]]指向原型对象。如下图所示：

---

 

下面我们来看几张图，以验证我们上面的总结：

首先，我们定义了一个构造函数Person，并创建了一个它的实例对象person1。然后打印了四个值，分别是： 

// 打印Person构造函数具有的属性和方法
console.dir(Person)

// 打印构造函数的属性prototype的值
console.log(Person.prototype)

// 打印实例对象person1身上具有的属性和方法
console.log(person1)

// 打印实例对象person1的特性[[Peototype]]的值
console.log(person1.__proto__)

我们得到的结果是：

分析上图：

1. Person构造函数中带有prototype属性和[[Prototype]]特性。

2. Person构造函数的prototype属性值是一个对象，这个对象中包含了constructor属性和[[Prototype]]特性。其中constructor属性指向构造函数Person(name, age)，

3. Person构造函数的实例对象person1中包含了[[Prototype]]特性。这个实例对象本身没有constructor属性。

4. Person构造函数的实例对象person1中的特性[[Prototype]]的值是一个对象，包含了constructor属性和[[Prototype]]特性。跟Person构造函数的prototype属性值一模一样。

总结：从绿色背景的字体中看出，所有都包含[[Prototype]]特性。构造函数有prototype属性，原型对象有constructor属性。

---

构造函数的prototype属性指向原型对象，实例对象的[[Prototype]]特性指向对象的原型，这两个指向的东西是同一个。因为：

 由此可以看出，尽管构造函数和实例对象之间没有直接连接，但是：

• 构造函数和原型对象之间有直接连接，即构造函数的prototype属性；
• 实例对象和原型对象之间也有直接连接，即实例对象的[[Prototype]]特性。

---

总结：原型对象和实例对象都来源于构造函数。只不过原型对象比实例对象更加抽象，它是这些实例对象可以共享的属性和方法的一个集合体，就好像我们把共有的属性方法抽象出来放在更高的一层上，想要调用这些属性和方法我们也可以通过底下具体的实例对象来调用。当我们调用时，会先查找实例对象中有没有这些属性和方法，没有就去更高的一层（原型对象）中查找。

比如，当我们调用person1.constructor时，尽管person1身上没有这个属性，我们仍然可以获得结果构造函数Person，这是因为当我们发现实例对象上没有这个属性时，我们会去它的原型对象上查找，而原型对象上就有一个constructor属性指向构造函数Person。如下图所示，我们打印出person1.constructor的值：

这样做的好处是用构造函数方法new出来两个实例对象，就算他们具有看似同一个属性和方法，其实在计算机内部是不同的。这是没有必要的，在实际开发中我们只要获得一份属性名和方法然后在这个基础上实现多态就行，这可以使用原型对象来实现，因为原型对象中的内容是共享的，只有一份。当然，这里的共享指的是属性名和方法名共享，具体里面的值可以由不同的实例对象调用来呈现不同结果，也有一个共享的例外是引用数据类型，因为这一数据类型里面的值也是共享的，所有的实例对象调用它都会改变里面的值，这也会导致原型链继承方式的一个弊端，即实例的属性变成了原型属性，这个将会在后续的原型链和继承中提到。