类(class)的简单介绍:
在理解JS的原型之前先简单介绍一下类(class)
比如我们先简单的创建一个学生类Student,可以用来存放学生的姓名name和成绩score
class Student{
constructor(name,score){
this.name = name;
this.score = score;
}
}
然后 const一个student来实例化一下这个Student类,打印一下看看结果:
const student = new Student('Zack',59);
console.log("student",student);
控制台输出为:
可以看到我们成功的实例化了一个学生叫Zack,成绩为59。
用同样的方式再创建一个老师类:
class Teacher{
constructor(name,subject){
this.name = name;
this.subject = subject;
}
}
const teacher = new Teacher('Mr.Z',"前端开发");
console.log("teacher",teacher);
控制台输出为:
我们可以往Student类和Teacher类中写一个方法,让student和teacher可以进行调用:
class Student{
constructor(name,score){
this.name = name;
this.score = score;
}
introduce(){
console.log(`我叫${this.name},我上次考了${this.score}分。`);
}
}
class Teacher{
constructor(name,subject){
this.name = name;
this.subject= subject;
}
teach(){
console.log(`我是${this.name},我教${this.subject}。`);
}
}
const student = new Student('Zack',59);
console.log("student",student);
student.introduce();
const teacher = new Teacher('Mr.Z',"前端开发");
console.log("teacher",teacher);
teacher.teach();
控制台输出为:
我们可以发现,上面的Student类和Teacher类都存在同样的属性name,所以我们可以将name这个会重复调用的属性独立封装成一个Person类,并让Student类和Teacher类都继承这个Person类
class Person{
constructor(name){
this.name = name
}
drink(){
console.log("我可以喝水")
}
}
Student类继承Person类:
class Student extends Person{//extends关键字继承Person类
constructor(name,score){
super(name);//调用父类的name
this.score = score;
}
introduce(){
console.log(`我叫${this.name},我上次考了${this.score}分。`);
}
}
const student = new Student('Zack',59);
console.log("student",student);
student.introduce();
student.drink();//调用父类的drink方法
控制台输出:
成功调用了Student原本该有的功能,并且还能调用父类Person的功能。
因此,我们可以知道如果有重复的属性或者方法,可以独立封装成父类并在子类中继承这个父类,就可以减少我们写冗余的代码,还能提高效率。
这就是类的简单介绍。
原型:
让我们把代码回退到继承发生之前:
class Student {
constructor(name, score) {
this.name = name;
this.score = score;
}
introduce() {
console.log(`我叫${this.name},我上次考了${this.score}分。`);
}
}
const student = new Student('Zack', 59);
console.log("student", student);
student.introduce();
我们在控制台输出student发生结果是:
可以看到,我们student中并没有出现introduce的属性,为什么我们能够调用呢?
答案就是原型:
点开这个Prototype(隐式原型)我们就能发现,里面存在我们的introduce方法,当我们在原型的属性中找不到我们调用的方法时,就会自动到隐式原型中去寻找我们的方法,并将其执行。
我们通过student实例化对象,可以在控制台直接查看隐式原型(.__proto__):
或者直接通过Student类来看他的显式原型(.prototype):
从中可以发现,隐式原型和显式原型是一样的,他们都是一个对象,用全等号判断他们是否是同一个地址:
所以效果图应该是这样:
原型链:
搞明白了原型之后,原型链就很简单了,无非就是在原型里指向了另外的一个原型(继承)
当我们用Teacher类继承Person类的时候,我们再控制台输出实例化对象teacher可以发现,在teacher对象的隐式原型中指向了有Teacher类的原型
而且在Teacher类里面还存在着一个指向Person类的隐式原型:
而更里面的隐式原型就是指向JS的原型了,可以调用JS的原型方法,如toString()方法、hasOwnProperty方法等。