JavaScript原型和闭包之---构造函数、原型与对象三者之间的关系（扩充constructor）（五）

    通过前面的博客：构造函数、原型、prototype与__proto__我们已经了解:

• 构造函数有个prototype属性可以访问原型对象，
• 构造函数可以实例化对象，
• 实例化的对象有个非标准的__proto__属性，对象可以通过__proto__访问原型。
• 在默认情况下，所有的原型对象都会自动获得一个constructor（构造函数）属性，指向对应的构造函数也就是Person.prototype.constructor指向Person。[点击这里：原型]中我有提到过(http://blog.youkuaiyun.com/diligentkong/article/details/76099287)
      那么接下来，我用图文的形式来记录一下 构造函数、原型与构造函数实例化的对象（以下会简称对象）三者之间的相爱相杀关系。
      还是用例子说明：

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

构造函数对原型的爱恋

    在创建构造函数的时候，系统会默认帮构造函数创建一个prototype属性，而这个属性指向函数的原型对象。原型对象包括属性和方法。
画图理解：

                                    图1 创建构造函数的时候自动关联prototype原型对象

           构造函数访问原型的方法：构造函数.prototype

Person.prototype
console.log(Person.prototype); // 输出Object

原型对象对构造函数的爱恋

          在默认情况下，所有的原型对象都会自动获得一个constructor（构造函数）属性，指向对应的构造函数。

          如何通过原型访问构造函数呢?构造函数.prototype.constructor

Person.prototype.constructor 指向Person 这个构造函数
console.log(Person.prototype.constructor);

输出结果：

完善图1：

                                  图2 原型对象自动获得constructor属性，该属性指向对应的构造函数

constructor知识点扩充

通过前面讲的几篇文章，我们已经知道 原型对象也是一个对象。还是拿Person()构造函数为例子。

• 通过对象访问构造函数

var o = Person.prototype;
console.log(o); //Object
o是原型对象，其有constructor属性可以访问构造函数
o.constructor 指的就是Person
console.log(o.constructor);

输出结果：

那么既然o是原型对象，也就是说对象中也有constructor属性可以访问原型，信不信试试就知道了

    var p1 = new Person("kongkong",20);
    console.log(p1.constructor);  果然指的是Person  

结果证实：

通过以上可以说明，对象可以通过constructor属性访问构造函数
p1.constructo –>Person()

var p2 = new p1.constructor("diligentkong",20); //相当于直接使用 new Person()
console.log(p2.name); //diligentkong

• 在使用新的对象替换掉默认的原型对象之后，原型对象中的constructor属性会变成 Object。为了保证整个 构造函数—原型—-对象 之间的关系的合理性，应做如下操作：
  在替换原型对象的时候，在新的原型对象中手动添加 constructor 属性

console.log(Person.prototype.constructor);
使用新对象替换原型
Person.prototype={

}
console.log(Person.prototype.constructor);

最后输出结果：

          要想保证原型替换之后，让constructor属性仍然指向Person构造函数，那么就要在新的原型对象中手动添加constructor属性

Person.prototype={
        constructor : Person
    }

打印输出再看：

构造函数与实例的爱，实例与原型的爱恋

• 构造函数可以实例化对象，
• 实例化的对象通过__proto__访问原型
  构造函数要实例化对象，必须使用new关键字。具体原理 参考这里 js中的构造函数
  当调用构造函数创建一个新实例后，该实例内部有一个__proto__属性(__proto__属性最早是火狐浏览器引入的，用以通过实例对象来访问原型，这个属性在早期是非标准的属性)
  构造函数的实例对象可以通过__proto__访问原型 : p.__proto__

var p = new Person("kong",18);
console.log(p.__proto__);//Object 

不过要明确的重要一点是：__proto__连接存在于实例和构造函数的原型对象之间，而不是存在于实例和构造函数之间。
完善图2：

                                  图3 构造函数实例化对象，对象通过__proto__访问原型

总结

构造函数、原型、对象的三角关系

• 构造函数通过.prototype访问原型对象 例子：Preson.prototype
• 原型对象中constructor属性指向对应的构造函数 Person.prototype.constructor
• 构造函数实例化的对象通过.__proto_访问原型 p.__proto__
  缩略图总结：