对JS中的class类及原型和原型链的理解

关于class类

概念：

class是es6的新特性之一，通过class关键字来定义一个类，可以理解class为一个模板，它的本质就是一个函数，可以通过constructor构造方法来构造一些属性，定义方法时，不需要加function，方法之间也不需要逗号隔开，然后可以通过new关键字来实例化这个类

例如：现在定义一个学生的类，定义了两个属性和一个方法，其中this指向将要实例化的对象：（class类名首字母需要大写）

class Student {
    constructor(name,age){
        this.name=name
        this.age=age
    }
    say(){
        console.log(`你好，我叫${this.name},今年${this.age}岁了`)
    }
}

现在可以通过new关键字实例化一个对象：

const xiaoMing = new Student('小明', 20)
console.log(xiaoMing.name)
console.log(xiaoMing.age)
xiaoMing.say()

打印结果：

class的继承

作用：子类可以继承父类构造函数的属性和方法
怎么做：子类可以通过extends和super关键字来继承父类

例如：现在可以定义一个People的父类

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    say() {
        `我叫${this.name},我的年龄是${this.age}`
    }
}

然后定义一个子类Student，让他继承父类的属性和方法，需要使用extends并在constructor中使用super将子类属性传给父类

class Student extends People {
            constructor(name, age, number) {
                super(name, age)
                this.number = number
            }
            sayHi() {
                console.log(`我叫${this.name},我的学号是${this. number}`)
            }
        }

最后通过new实例化一个Student 类

const xiaoMing = new Student('小明', 20, 222666)
console.log(xiaoMing.name)
console.log(xiaoMing.number)
xiaoMing.say()
xiaoMing.sayHi()

打印结果：

可以看到通过Student实例化出的小明，继承了People 类的name和age属性以及say方法

原型

概念：
js为每个函数提供的一个公共空间
通过typeof 可以发现Student和People都是函数，是js构造函数的语法糖

隐式原型和显式原型

隐式原型：每个实例都有隐式原型，就是__proto__
显式原型：每个class都有显式原型，就是prototype
关系：实例的隐式原型指向对应class的显式原型

console.log(xiaoMing.__proto__)
console.log(Student.prototype)
console.log(Student.prototype===xiaoMing.__proto__)

打印结果：

构造函数Student中显式原型为prototype，指向sayHi函数，实例Xiaoming隐式原型__proto__也指向了Student中prototype的sayHi函数，两者是全等的

基于原型的执行规则：

获取属性或方法时先在自身的属性和方法中查找，找不到就去隐式原型__proto__中查找

原型链

console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(Student.prototype.__proto__===People.prototype)

打印结果：

People是Student的父类，所以Student的显式原型的隐式原型指向了People的显示原型

当Xiaoming需要带调用say方法是，先在自身找，找不到去Student找，找不到在去People找，一直找到Object的原型上去（Object上的隐式原型指向null），这样就形成了原型链

类型判断instanceof

作用：通过instanceof可以判断一个实例是否属于某种类型，在继承关系中可以判断一个实例是否是该class构建出来的，或者是这class的父类

console.log(xiaoMing instanceof Student) 
//true，xiaoMing 是通过Student构建出来的
console.log(xiaoMing instanceof People) 
//true，People是xiaoMing的父类
console.log(xiaoMing instanceof Object) 
//true，Object是所有class的父类
console.log(xiaoMing instanceof Array)
//false

本质：instanceof就是顺着原型链向上查找__proto__，如果能够对应到class的prototype就返回true，找不到就返回false