如何理解 JS 原型(隐式原型和显示原型)三座大山之一

通过一些例子来说明，首先定义

class People {
    constructor(name) {
        this.name = name
    }
    eat(){
        console.log(`${this.name} eat something`)
    }
}
//子类
class Student extends People{
    constructor(name,number){
        super(name)
        this.number = number
    }
    sayHi(){
        console.log(
            `姓名${this.name}，学号${this.number}`
        )
    }
}
//实例化
const xialuo = new Student('夏洛',100)
console.log(xialuo.name,xialuo.number) //夏洛 100
xialuo.sayHi() //姓名夏洛，学号100
xialuo.eat() //夏洛 eat something

类型判断 - instanceof

console.log(xialuo instanceof Student) //true
console.log(xialuo instanceof People) //true
console.log(xialuo instanceof Object) //true

console.log([] instanceof Array) //true
console.log([] instanceof Object) //true
console.log({} instanceof Object) //true

class 的原型本质是什么？实际上是函数，可见是语法糖

console.log(typeof People) //function
console.log(typeof Student) //function

原型

console.log(xialuo.__proto__) //隐式原型
console.log(Student.prototype) // 显示原型
console.log(xialuo.__proto__ === Student.prototype) // true

原型关系

• 每个 class 都有显示原型 prototype
• 每个实例都有隐式原型 __proto__
• 实例的 __proto__ 指向对应 class 的 prototype

基于原型的指向规则，获取属性或执行方法时

• 先在自身属性和方法寻找
• 如果找不到则自动去 __proto__ 中查找