不再死记硬背!帮你理解原型相关八股概念！

本片文章不从零开始讲原型这些概念，默认大家有一定的基础，比如了解instanceOf的原理本文从实例、构造函数、显式原型、隐式原型的概念帮大家理解八股

从一次手写发现细节

作者在复习一道八股：手写instanceOf的实现先是凭着理解写了一个版本出来

js 复制代码

function myInstanceOf(instance, constructor) {
    if(typeof instance !== 'object' || instance === null) return false
    if(typeof constructor !== 'function') throw new TypeError('constructor is not function')

    let proto = Object.getPrototypeOf(constructor)
    let instanceProto = Object.getPrototypeOf(proto)
    while(instanceProto !== null) {
        if( instanceProto === proto) return true
        instanceProto === Object.getPrototypeOf(instanceProto)
    }
    return false
}

uu们感觉这个写法有问题吗? 能看出来那可真是太细了！问题出在

js 复制代码

Object.getPrototypeOf(constructor)

正确写法应该是

js 复制代码

function myInstanceOf(instance, constructor) {
    if(typeof instance !== 'object' || instance === null) return false
    if(typeof constructor !== 'function') throw new TypeError('constructor is not function')

    let proto = consturctor.prototype
    let instanceProto = Object.getPrototypeOf(proto)
    while(instanceProto !== null) {
        if( instanceProto === proto) return true
        instanceProto === Object.getPrototypeOf(instanceProto)
    }
    return false
}

可能这时候又要理解Object.getPrototypeOf()方法的原理了，简单来说Object.getPrototypeOf()获得的是隐式原型，一般对于隐式原型通过__proto__可以获得，为什么说一般呢，因为__proto__并不是一开始就有的，一些早期浏览器版本不支持。从语义化上来说，这个方法应该是 Object.get__proto__Of()

这里给大家放一张图，想必很多人都看过

作者要引出的就是显示原型和隐式原型的区别

__proto__是作为实例的原型

prototype是作为构造函数的原型

可以同时既是实例又是构造函数

怎么理解作为实例和作为构造函数呢？

js 复制代码

function Animal() {

}
console.log(Animal.prototype)  //{}
console.log(Animal.__proto__)  //[Function (anonymous)] Object

比如创建一个函数，这个函数就有两个身份，一个是作为构造函数，一个是作为实例，作为构造函数就不用解释了，作为实例怎么理解呢，构造函数本身就是一种函数，那它当然可以理解为函数的实例，所以它有作为实例的隐式原型，指向它的构造函数的显示原型，也就是图中的最纯粹的函数的原型

这么一看从语义化的角度来理解instanceOf，可以理解为 判断一个构造函数的显示原型在不在某个实例的隐式原型链上

这么一看是不是一下就搞定了instanceOf的手写和原型的概念

小白第一次写文章，大佬勿喷