【JS面试题】原型链

//父类
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}`)
    }
}


//原型链
console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(People.prototype === Student.prototype.__proto__)

在这里插入图片描述
图解析：

Student的原型还有一个隐式原型指向了People的原型，People原型里面有eat方法。
逻辑：xialuo通过Student给new出来，所以说xialuo的隐式原型__proto__指向了Student的显示原始prototype。这样的三角关系；也可以理解为Student的原型，也就说class原型它本身它也是一个prototype对象，它里面有一个方法叫sayHi()，这个对象你也可以理解为它是通过People给new出来的，当然这个过程不是说你new一个People…，这个过程是一个可以这么理解为的，或者说是JS引擎内部做的，这个不用我们关心，你可以这么理解为它通过People new出来的，所以它的隐式原型__proto__指向People的显示原型prototype，正好是这么一个关系。

有了图就可以理解下面代码：

//原型链
console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(People.prototype === Student.prototype.__proto__)

在这里插入图片描述
当访问xialuo.name,是直接获取本身属性；当访问xialuo.sayHi(),因为它本身没有sayHi()，则通过__proto__隐式原型指向Student.prototype找到了sayHi();当访问xialuo.eat(),Student.prototype里面没有eat()方法，它会自动再通过隐式原型往上找；就是说在每一级它都会先去访问当前的属性和方法，如果没有的话，它就会去找它的隐式原型，最后形成一个链！！

在这里插入图片描述
xialuo.name是它本身的一个属性，sayHi()不是它本身的属性，根据是这么画的，那怎么去验证这个事情呢？

在这里插入图片描述
xialuo.hasOwnProperty()去证明，类似图上那样。xialuo.sayHi()可以执行，但是不是它自身的属性，hasOwnProperty()检查的是当前对象实例的属性是不是自己的属性。

验证下eat，不是xialuo自身的属性
在这里插入图片描述
**问题又来了？hasOwnProperty()是哪里来的呢？**xialuo.hasOwnProperty(‘hasOwnProperty’)可以看出当前对象实例的属性并不包括hasOwnProperty。

在这里插入图片描述
再往下：

图中又多了一层，我们说过Student继承于People，People继承于Object，所以说People的属性里边，也有一个隐式原型指向Object的原型上，Object的原型当然是JS引擎自己用的。那么Object的原型里面有什么呢？有toString、hasOwnProperty……所以说xialuo.hasOwnProperty就可以从xialuo的隐式原型向上不断的找，直到
Object.prototype，就形成了一个原型链！那Object.prototype还能不能再往上找呢？答案是：不可以！因为Object.prototype的隐式原型，红框中，__proto__永远指向null。

掌握程度：

代码写的出来！
图要闭着眼睛都能画出来！
最低要求

图不变，再看instanceof：

拿例子xialuo instanceof Student,xialuo instanceof People,xialuo instanceof Object,那么instanceof是什么工作原理呢？instanceof就是说，比如xialuo instanceof Student，instanceof前面那个变量xialuo顺着隐式原型往上往上找，然后，能不能找到第二个操作数Student的显示原型、People的显示原型、Object的显示原型等等，比如说Student的显示原型在这里摆着，People的显示原型在这里摆着，Object的显示原型在这里摆着，xialuo顺着隐式原型一层一层往上爬，能不能对应到Class的显示原型，如果能够对应到，则成立，如果对应不到则不成立！返回false。比如说xialuo instanceof Array，返回false,因为xialuo 和 Array不是一个体系。

重要提示：

class是ES6语法规范，由ECMA委员会发布
ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现
以上实现方式都是基于V8引擎实现，也是目前主流的！

【JS面试题】原型链

猜你喜欢