利用原型共享数据

什么样的数据需要写在原型中？需要共享的数据就可以写在原型中

原型的作用之一：数据共享

//属性需要共享，方法也需要共享
//不需要共享的数据写在构造函数中，需要共享的数据写在原型中
//构造函数
function Student(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
//所有学生的身高都是188,所有人的体重都是55
//所有学生都要每天写500行代码
//所有学生每天都要吃三顿饭
//原型对象
Student.prototype.height = "188cm";
Student.prototype.weight = "55kg";
Student.prototype.code = function(){
    console.log(this.name + "每天需要写500行js代码");
}
Student.prototype.eat = function(){
    console.log(this.name + "每天需要吃三餐");
}

//实例化对象，并初始化
var stu = new Student("小光",19,"男");
var stu2 = new Student("小霞",20,"女");
stu.code();//小光每天需要写500行js代码
stu2.eat();//小霞每天需要吃三餐

console.dir(stu);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5033fmaX-1604910830470)(C:\Users\yingl\AppData\Roaming\Typora\typora-user-images\image-20201104102914281.png)]

从控制台输出我们可以看到，实例对象 stu 上共享了原型对象上的属性height 和 weight，同时共享了原型对象上的方法 code() 和 eat()，而且原型对象的constructor对象指向了构造函数Student();一切都很完美。但是如果我们使用对象的方式在原型对象上定义属性和方法，则会改变constructor的指针指向问题，需要格外注意：

Student.prototype = {
    height : "188cm",
    weight : "55kg",
    code : function(){
    console.log(
    	this.name + "每天需要写600行js代码");
    },
    eat : function(){
    	console.log(this.name + "每天需要吃三餐");
    }   
};

此时控制台输出（导致constructor构造器属性消失）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7BA59KRD-1604910830473)(C:\Users\yingl\AppData\Roaming\Typora\typora-user-images\image-20201104104404072.png)]

对比以上两种实现数据共享的方法可以发现，第二种方式会导致constructor构造器属性消失。所以我们需要手动修改构造器指向：

Student.prototype = {
    //手动修改构造器属性constructor
    constructor : Student,
    height : "188cm",
    weight : "55kg",
    code : function(){
    console.log(
    	this.name + "每天需要写600行js代码");
    },
    eat : function(){
    	console.log(this.name + "每天需要吃三餐");
    }   
};

此时的构造器属性constructor指向就更正过来了，控制台输出如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H39hJ7m2-1604910830475)(C:\Users\yingl\AppData\Roaming\Typora\typora-user-images\image-20201104105314359.png)]

其实，在实际开发中我们也可以这样，定义构造函数，也能保证，构造器拥有正确的指向。

function Student(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.code = code;
    this.eat = eat;
}
//公共属性
Student.prototype.height = "188cm";
Student.prototype.weight = "55kg";
//公共方法定义在了外面
var code = function(){
    console.log(this.name + "每天需要写500行js代码");
}
var eat = function(){
    console.log(this.name + "每天需要吃三餐");
}
//实例化对象，并初始化
var stu = new Student("小光",19,"男");
var stu2 = new Student("小霞",20,"女");
stu.code();//小光每天需要写500行js代码
stu2.eat();//小霞每天需要吃三餐

console.dir(stu); 	

此时，我们来查看控制台，能够看到，constructor 指向：

);//小光每天需要写500行js代码
stu2.eat();//小霞每天需要吃三餐

console.dir(stu);

此时，我们来查看控制台，能够看到，constructor 指向：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gg4XiVtO-1604910830479)(C:\Users\yingl\AppData\Roaming\Typora\typora-user-images\image-20201104150107580.png)]