javascript高级(5)-构造函数和原型

1.1概述

在典型的opp的语言中，都存在类的概念，类是对象的模板，对象是类的实例，在ES6之前JS中并没有引入类的概念。
在ES6之前，对象不是基于类创建的，而是用一直称为构造函数的特殊函数来定义对象和它们的特征。

创建对象三种方式

• 对象字面量
• new Object()
• 自定义构造函数

1.2构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象的成员变量赋初始值，它总与new一起使用。可以把对象中一些共有属性和方法抽取出来，然后封装到这个函数中。

在JS中，使用构造函数要注意两点：

1. 构造函数用于创建某一类对象，首字母要大写
2. 构造函数和new一起使用才有意义

new在执行时会做四件事：

1. 在内存中创建一个新对象
2. 让this指向这个新对象
3. 执行构造函数里面的代码，给这个新对象添加属性和方法
4. 返回这个新对象（所以构造函数里面不需要return）

JavaScript的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加，通过这两种方式添加的成员，就分别称为静态成员和实例成员

• 静态成员：在构造函数本身添加成员称为静态成员，只能由构造函数本身来访问
• 实例成员：在构造函数内部通过this创建的对象成员称为实例成员，只能由实例化的对象来访问

function Star(name,age) {
	this.name = name;
	this.age = age;
	this.sing = function(){
		console.log('我唱歌了');
	}
}
var hh = new Star('haha',17);
//1.实例对象就是通过this添加的成员 name age sing是实例对象
console.log(hh.name);//haha
//不可以通过构造函数来访问实例对象
console.log(Star.name);//underfined
Star.sex = '女'；//sex就是静态成员
console.log(Star.sex);//女
console.log(hh.sex);//underfined

1.3构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题
所以的对象使用同一个函数，这样就比较节省内存

1.4构造函数原型 prototype

构造函数通过原型分配的函数时所以对象所共享的

JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。prototype就是一个对象，这个对象所有的属性和方法，都会被构造函数所拥有。

可以把那些不变的方法，直接定义在prototype对象中，这样所有对象的实例就可以共享这些方法。

1.5对象原型 __ proto__

对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以对象可以使用构造函数prototype原型对象的属性时方法，就是因为有__proto__存在。

• __proto __对象原型和原型对象prototype是等价的
• __proto __对象原型的意义在于为对象查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，所有在实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

function Star(name,age) {
 this.name = name;
 this.age = age;
 //this.sing = function(){
 // console.log('我唱歌了');
 //}
}
Star.prototype.sing = function(){
   console.log('我唱歌了');
};
var haha = new Star('hh',18);//对象身上系统自己添加一个__proto__指向我们构造函数的原型对象prototype
var hh = new Star('haha',19);
haha.sing();//我唱歌了
hh.sing();//我唱歌了
//一般情况下，我们的公共属性定义在构造函数里面，公共方法我们放在原型对象身上
//一般情况下，我们的公共属性定义在构造函数里面，公共方法我们放在原型对象身上
console.log(haha.__proto__ === Star.prototype);//true
//方法的查找规则：首先先看 haha对象身上有没有sing方法，如果有就执行这个对象上的sing
//如果没有sing这个方法，因为有__proto__的存在，就去构造函数原型对象prototype身上去查找sing这个方法

1.6 constructor 构造函数

对象原型（__proto __）和构造函数原型（prototype）原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，它指回构造函数本身。

constructor主要用于记录该对象引用了那个构造函数，它可以让原型对象重新指向原来的构造函数

function Star(name,age) {
 this.name = name;
 this.age = age;
 }
 //这样写对象原型和原型对象指向原来的构造函数
Star.prototype.sing = function(){
  console.log('我唱歌了');
};
Star.prototype.movie = function(){       
 console.log('我会演电影');    
 }
 
var haha = new Star('hh',18);
console.log(Star.prototype);
console.log(haha.__proto__);
console.log(Star.prototype.constructor);
console.log(haha.__proto__.constructor);

输出结果：

function Star(name,age) {
 this.name = name; 
 this.age = age; 
 }
 Star.prototype = {
 //constructor:Star;   重新指向原来的构造函数，使用结果如下下图    
 sing: function(){       
 console.log('我唱歌了');    
 },    
 movie:function(){       
 console.log('我会演电影');    
 }
 }
 var haha = new Star('hh',18);
console.log(Star.prototype);
console.log(haha.__proto__);
console.log(Star.prototype.constructor);
console.log(haha.__proto__.constructor);

输出结果：

1.7 构造函数，实例，原型对象三者之间的关系

1.8 原型链

1.9 JavaScript的成员查找机制（规则）

1. 当访问一个对象的属性（包括方法)时，首先查找这个对象自身有没有该属性
2. 如果没有就查找它的原型（也就是__proto__指向的prototype原型对象)
3. 如果还没有就查找原型对象的原型（Object的原型对象）
4. 依次类推一直找到Object位置（null）

1.10原型对象this指向

var that;
function Star(name,age) {
 this.name = name;
 this.age = age;
}
Star.prototype.sing = function(){
   console.log('我唱歌了');
   that = this;
};
var hh = new Star('haha',17);
//1.在构造函数中，里面的this指向的是对象实例hh
hh.sing();
console.log(that === hh);//true
//原型对象函数里面的this指向的是实例对象 hh

1.11 扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义方法。比如给数组增加自定义求偶数和的功能
注意：数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {},只能是Array.prototype.xxx = function(){}方式

Array.prototype.sum = function(){
	var sum = 0;
	for(var i = 0; i < this.length; i++){
		sum +=this[i];
	}
	return sum;
}
var arr = [3,4,5];
console.log(arr.sum());//12