类的原型对象

什么是原型对象？

原型对象----构造函数每次在声明的时候,系统会自动的帮我们创建一个与之对应的对象
prototype---- 属于构造函数,指向原型对象
__proto__----属于构造函数的实例化对象,指向原型对象

为什么使用原型对象？

定义一个构造函数，也就是类

function Student(name, age, gender) {
            // 通过this给类添加属性
            this.name = name
            this.age = age
            this.gender = gender
            this.sayHi =function () {
                console.log(`大家好！我叫${this.name}，性别是${this.gender}，
今年${this.age}岁`);
            }
            this.study = function (time) {
                console.log(`我叫${this.name}，我每天学习${time}小时`);
            }
        }

创建学生类型的对象

let stu1 = new Student('张三', 20, '男')
let stu2 = new Student('李四', 22, '女')
let stu3 = new Student('王五', 24, '男')
console.log(stu1);
console.log(stu2);
console.log(stu3);

 

 打印创建的对象，我们发现三个方法的名字相同, 但是实际上在内存都占用位置, 属于不同的方法。此时如果创建多个对象, 则每个对象都会在内存中开辟一个空间用来保存sayHi方法和study方法, 造成空间浪费。

所以我们就需要通过原型对象prototype来保存这两个方法，起到共享的作用。需要使用该方法时调用。

如何在类的原型对象上面添加方法

我们将类里面的方法删除，在原型对象上重新添加方法

// 在类的原型对象上添加方法
Student.prototype.sayHi = function(){
      console.log(`大家好！我叫${this.name}，性别是${this.gender}，今年${this.age}岁`);
}
Student.prototype.study = function(time){
      console.log(`我叫${this.name}，我每天学习${time}小时`);
}

我们在打印学生类型的对象，发现创建的方法保存在了__proto__中了，原因是对象上面的原型对象指向类上面的原型对象。

我们打印prototype和__proto__确认下

console.log(Student.prototype);
console.log(stu1.__proto__);
console.log(stu2.__proto__);
console.log(stu3.__proto__);
console.log(Student.prototype===stu1.__proto__);

结果返回true

注意：对象上面没有这两个方法，但是对象的原型对象上面有这两个方法

我们如何调用在类的原型对象上创建的方法呢？

一个对象的原型对象上面的方法，对象可以直接使用

 stu1.sayHi()
 stu2.sayHi()
 stu3.sayHi()
 stu1.study(5)
 stu2.study(6)
 stu3.study(7)