如何用class实现继承、本质是什么?

1、实现继承的方法如下：

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

// 子类
// [extends] (ES6)关键字用来创建一个普通类或者内建对象的子类
class Student extends People {
    //constructor 属性返回对创建此对象的数组函数的引用。
    constructor(name,number){
        //[super](ES6)关键字用于访问和调用一个对象的父对象上的函数。
        super(name)
        this.number = number
    }
    sayHi(){
        console.log(
            `姓名 ${this.name} ，学号 ${this.number}`
        )
    }
}

// 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(
            `${this.name} 教授 ${this.major}`
        )
    }
}
//通过类声明对象/实例
const xialuo =new Student('夏洛' ,100)
console.log(xialuo.name) //夏洛
console.log(xialuo.number) //100
xialuo.sayHi() //姓名 夏洛 ，学号 100
xialuo.eat() //夏洛 eat something...

// //通过类声明对象/实例
const wang = new Teacher('王老师', '语文')
console.log(wang.name) //王老师
console.log(wang.major) //语文
wang.teach() //王老师 教授 语文
wang.eat() //王老师 eat something...

[constructor] 属性返回对创建此对象的数组函数的引用。
[extends] ES6关键字用来创建一个普通类或者内建对象的子类
[super] ES6关键字用于访问和调用一个对象的父对象上的函数。

2、class的本质是什么

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

根据以上实例确定class的类型实际上是函数，可见class是语法糖

3、如何实现继承

通过判断实例的隐式原型和class的显示原型

console.log(xialuo.prototype) //xialuo的显式原型：undefined
// 实例xialuo没有显示原型
 
console.log(xialuo.__proto__) //xialuo的隐式原型：People {constructor: ƒ, sayHi: ƒ}
console.log(Student.prototype) //Student的显式原型 People {constructor: ƒ, sayHi: ƒ}
console.log(xialuo.__proto__ === Student.prototype) //true
实例xialuo的隐式原型 == 父类的显式原型

由此判断，子类实例就可以通过搜索原型的方法来访问父类中的所有属性和方法

原型关系图如下：

原型链.png

总结原型关系如下：

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

原型的执行规则：

获取属性xialuo.name或执行方法xialuo.sayhi时
现在自身属性和方法寻找
如果找不到自动去proto查找

4、延伸：instanceof 基于原型链判断类型

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

instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果查找失败，则会返回 false。