从对象实例化引出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
