从对象实例化引出constructor和prototype

---

1、构造函数中 return 一个对象

1.1、演示代码

<script type="text/javascript">
    function Book1() {
        this.name = "三国演义";
        this.buy = function(){
            console.log("buy");
        };

        return {
            "desc": "这不是我想要的书啊"
        };
    }

    Book1.prototype.number = 50;
    Book1.prototype.buy2 = function(){
        console.log("buy2");
    }

    var book1 = new Book1();
    console.log(book1);
</script>

1.2、分析

当构造函数return的是一个对象，那么将不会使用Book1构造函数，而是使用Object构造函数来实例化book1对象。
对象实例化，其实就是将构造函数的方法和属性拷贝一份，并生成 __proto__ 隐式原型属性，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

运行结果

1.3、运行结果

运行结果

2、构造函数中 return 一个变量或常量

2.1、演示代码

<script type="text/javascript">
    function Book2() {
        this.name = "三国演义";
        this.buy = function(){
            console.log("buy");
        };
        return '我是一个常量或者变量';
    }

    Book2.prototype.number = 50;
    Book1.prototype.buy2 = function(){
        console.log("buy2");
    }

    var book2 = new Book2();
    console.log(book2);
</script>

2.2、分析

当构造函数return的是一个变量或者常量，那么使用Book2构造函数来实例化对象，并使用__proto__来访问Book2和Object的原型对象方法和属性。

图解分析

2.3、运行结果

运行结果

3、构造函数中没有return

3.1、演示代码

<script type="text/javascript">
    function Book3() {
        this.name = "三国演义";
        this.buy = function(){
            console.log("buy");
        };
    }

    Book3.prototype.number = 50;
    Book3.prototype.buy2 = function(){
        console.log("buy2");
    }

    var book3 = new Book3();
    console.log(book3);
</script>

3.2、分析

当构造函数中，那么使用Book3构造函数来实例化对象，并使用__proto__来访问Book3和Object的原型对象方法和属性。

图解分析

3.3、运行结果

运行结果

constructor和prototype总结

JavaScript中我们在定义构造函数的时候就会默认有一个prototype的属性。每个对象实例化后其实就是拷贝构造函数中除开prototype属性之外的所有方法和属性，其中会生成一个__proto__属性。
__proto__属性：
1、__proto__属性指向实例化对象的构造函数的prototype属性对应的所有方法和属性
2、__proto__属性的construtor属性指向实例化对象的构造函数

constructor和prototype注意点

1、只有构造函数才有prototype属性，而构造函数的实例是没有该属性的，也就是说console.log(a1.prototype)输出的是undefined。在javascript中，每个函数都自动有一个prototype属性，而不是每一个对象拥有prototype属性

2、 原型属性与实例对象的创建与否没有关系，它在对象创建之前就已经存在

3、新定义Prototype对象的话，该Prototype对象原有的constructor属性会丢失

    function Book4() {
        this.name = "三国演义";
        this.buy = function(){
            console.log("buy");
        };
    }

    Book4.prototype = {
        number: 50,
        buy2: function(){
            console.log("buy2");
        }
    }

    var book4 = new Book4();
    console.log(book4);

运行结果

4、同一个构造函数实例的对象，共用一个Prototype对象

    function Book5() {
        this.name = "三国演义";
        this.buy = function() {
            console.log("buy");
        };
    }

    Book5.prototype.number = 50;
    Book5.prototype.buy2 = function(){
        console.log("buy2");
    }

    var book5 = new Book5();
    var book6 = new Book5();

    Book5.prototype.number = 60;

    console.log(book5);
    console.log(book6);

运行结果

原型链图解

---

原型链图解

理解prototype、proto和constructor的三角关系

---

屏幕快照 2018-06-05 18.09.39.png

实例讲解

function Foo(){};
var f1 = new Foo;

• 【构造函数】
  用来初始化新创建的对象的函数是构造函数。在例子中，Foo()函数是构造函数

• 【实例对象】
  通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数，构造多个实例对象f1、f2

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

• 【原型对象及prototype】
  构造函数有一个prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承

function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;

console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1

• 【constructor】
  原型对象有一个constructor属性，指向该原型对象对应的构造函数

function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true

由于实例对象可以继承原型对象的属性，所以实例对象也拥有constructor属性，同样指向原型对象对应的构造函数

function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true

• 【proto】
  实例对象有一个proto属性，指向该实例对象对应的原型对象

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true

参考资料

---

一张图理解prototype、proto和constructor的三角关系