JS中的原型和原型链

类(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方法等。