【JS面试题】如何理解JS原型(隐式原型和显示原型)

1.instanceof

从图中可以看出，通过instanceof可以判断这个变量属于哪个class或属于那个构造函数

1. instanceof 可以去判断引用类型，变量是不是后面的Class构建出来，或者说后面的Class是它构建出来的Class的父类。
2. Object可以认为是所有class的父类，这是JS引擎自己做的，例子中可以默认People extends Object继承于Object等等,以及Array extends Object……但Student不是extends Object,Student先extends People,People extends Object。如果是Student是单独的一个例子，没有People,那么Student就是继承于Object。上面例子中Student-People-Object是一连串的关系。

2.原型：

核心代码：

初始化：

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

//子类 继承父类 里面的方法可以直接调用，属性需要调用super去执行
class Student extends People {
    constructor(name,number) {
        //调用super,People会自动帮我们处理name
        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);
xialuo.sayHi();
xialuo.eat();

//实例
const wanglaoshi = new Teacher('王老师','语文')
console.log(wanglaoshi.name);
console.log(wanglaoshi.major);
wanglaoshi.teach();
wanglaoshi.eat();

//class实际上是函数，可见是语法糖
typeof People //'function'
typeof Student//'function'

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

原型图:

//隐式原型和显式原型
xialuo.__proto__
Student.prototype	
xialuo.__proto__ === Student.prototype

图中的意思：我们在定义class Student的时候，它会有一个prototype显示原型指向

这个对象，会把方法都放在Student.prototype;通过new Student()声明出xialuo以后xialuo的name和number直接放在xialuo这个对象本身，sayHi()是通过__proto__隐式原型指向的。

原型关系：

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

基于原型的执行规则：

1. 获取属性xialuo.name或执行方法xialuo.sayhi()时
2. 先在自身属性和方法寻找
3. 如果找不到则自动取隐式原型__proto__中查找
4. 隐式原型__proto__正好对应Class 的显示原型prototype，原型中就有sayhi()方法！