干了这么多年前端，原型和原型链你真的弄懂了吗

在学习JS的过程中，原型和原型链可能是我们遇到的第一座大山，其实所有的山都可翻越，世上无难事，只要肯攀登。今天我们来好好梳理下原型和原型链。

class

在说原型之前，我们先来说一下在JS中class是如何实现继承的，先看一段代码：

// 父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat food`)
    }
}

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    study() {
        console.log(`study, ${this.name} ${this.number}`)
    }
}

let zs = new Student('zs', '001')
zs.eat()
zs.study()

1. class可以看做一段代码模板，里面定义了一些属性和方法，通过new关键字来构建实例对象，当 new Student执行时，Student中的constructor就会执行，传入的number绑定到实例对象上，super(name)的执行会触发父类People中的constructor的执行，将name绑定到实例对象上。
2. 因为Student继承People，所有Student构建的zs可以访问到name属性和eat方法。那么class的继承是如何实现的呢？这就用到了js中的原型。

原型

隐式原型和显式原型

1. 隐式原型：proto
2. 显式原型：prototype
3. 实例对象的隐式原型 === 构造函数的显式原型（zs.proto === Student.prototype） 如图所示： 从图上我们可以看出study()方法是挂在Student原型上的。

执行规则

先在自身属性和方法查找，如果找不到则自动去原型中查找

原型链

Student.prototype.proto === People.prototype 从上图中可以看出，Object.prototype.proto === null，说明已经到原型链的顶端了。

instanceof

instanceof用来判断一个对象是不是由某个构造函数（或是该构造函数的父类）构造的

zs instanceof Student // true
zs instanceof People // true
zs instanceof Object // true

原理：zs的隐式原型能不能找到class对应的显式原型（一层一层往上查找），能找到则为true