Js基础知识-隐式原型和显示原型

类型判断 instanceof

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

拿回上章Class中的案例进行修改

    class Student {
      // 属性
      constructor(name, number) {
        this.name = name
        this.number = number
      }
      // 方法
      sayHi() {
        console.log(`姓名:${this.name},学号:${this.number}`)
      }
    }
    const xiaokonglong = new Student('小恐龙', 001)
    console.log(xiaokonglong instanceof Student)  // true
    console.log(xiaokonglong instanceof Object)  // ture

• xiaokonglong是由Student 构建而来的，所以使用instanceof检查是否时返回true
• 所有的引用类型instanceof Object返回的都是true
  举个栗子:

[] instanceof Array //true 
[] instanceof Object //true
{} instance Object //true

原型

• 上章中实例化Student后可以看到，xiaokonglong拥有了name，number和一个sayHi()的方法
• __proto__并非我们定义的属性，但是仍然可以打印,而且会发现打印之后里面也有sayhi的方法。

    console.log(typeof Student)  //function
    console.log(xiaokonglong.name) // 小恐龙
    console.log(xiaokonglong.number) //1
    xiaokonglong.sayHi()  // 姓名:小恐龙,学号:1
    console.log(xiaokonglong.__proto__)  
    /**{
    constructor: class Student
    sayHi: ƒ sayHi()
    }*//

那么我们打印一下Student

  console.log(Student.prototype)
    /**{
    constructor: class Student
    sayHi: ƒ sayHi()
    }*//
    console.log(Student.prototype === xiaokonglong.__proto__) // true

这时就会发现，他的结果和xiaokonglong.__proto__结果是一样的,都有一个sayhi的方法。而且他们是全等的。那么我们先把__proto__叫做隐式原型，prototype叫做显示原型。
那么我们就会得到，Student的显示原型就等于xiaokonglong的隐式原型。

结论

• 每个class都有显示原型prototype
• 每个实例都会有隐式原型__proto__
• 实例的隐式原型(__proto__)对应class的显示原型(prototype)

基于原型的执行方法

• 当获取实例的属性或者方法时，会先在自身的属性和方法进行寻找，如果找不到就会自动去隐式原型中寻找，一直找不到最终就会Object.__proto__就会抛出underfind，原因是就是因为Object.__proto__永远指向null。

延伸

对原型链感兴趣的，以下两个方法会更好的帮助理解原型链究竟是个什么东西，喜欢可以尝试一下。

hasOwnProperty 寻找自身属性值是否包含该属性
instanceof 寻找自身原型链中是否包含该属性

最后，不要忘记点赞哦~