如何理解 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__ 中查找