【四】原型链

本篇章主要讲述原型链相关知识点,为后续的函数篇章先铺垫一定的前缀知识,也承接了引用类型篇章的知识。
面试回答
1.原型链:原型链主要有三部分构成:原型、构造函数、实例,实例可以通过new构造函数获取,构造函数可以通过实例的constructor或者原型的constructor获取,原型可以通过实例的
__proto__
或者构造函数的prototype获取。原型也可以通过__proto__
获取父级元素的原型,直到最终拿到null。
知识点
1.原型链

图片为我对于原型链的理解,一起让我们由易入难去理解,原型链中的三个主体:原型、构造函数、实例对象。
原型
可以简单理解为储存方法和属性的对象(JS万物皆可为对象)
构造函数
只要被new过的函数就可以被称为构造函数,每个函数都有一个prototype属性,它指向该函数的原型,构造函数也是如此。构造函数里有两个特殊的存在:Object、Function,前者在所有的JS对象的原型链上,后者则是所有的构造函数(包括它自己)的都是Function的实例对象,所以
实例对象
由于不同的创建方式有差异,因此从创建方式来理解,一个为字面量方式;一个为构造器方式;一个为Object.create方式。三者的差异在于不同的创建方式的原型不同。
字面量方式:let a={} ,原型为function Object的prototype,相当于new Object()
构造器方式:let p = new Person(),原型为Person函数的prototype
Object.create()方式:let a={} let b=Object.create(a) ,原型为a
按照上述理解,可以构建出如下思维导图:

然后再梳理一下实例对象、构造函数、原型之间的转换:
可得,如下思维导图:

由于__proto__
是任何对象都有的属性,而JS中万物皆可为对象,因此可以通过__proto__
不断连接其父级原型对象,到了父级原型对象这一步,同样也会有新的原型圈(就是下图的闭环),最后会到达顶层Object.prototype,它的 __proto__
指向null结束,这条链路就被称为原型链,同时JS引擎查找属性时也会按照原型链的方向逐层去查找直到找到为止。
按照上述理解,并添以简单代码加以理解,可得思维导图:

当然,其中还有不明确的点,那么就需要自己去搜索理解,搞明白每一个点所代表的意义和作用,给个原型链的经典图用以检验,从左至右的三列分别对应的是实例、构造函数、原型:

最后
走过路过,不要错过,点赞、收藏、评论三连~