彻底搞懂JS原型链

2023-02-19 0 382

先期重新认识

我坚信做为后端相关人员;在复试组织工作中大体上10次复试就有8次被问及蓝本链的难题;所以蓝本链究竟是甚么呢?她们先来单纯重新认识重新认识

Object.prototype.arrName = 李四 // 建立形成函数 function Prom() {} console.log(Prom.arrName); // 结论:李四

我们看见以内的标识符;有许多好友可能会深感惊讶;这是咋啊?她们好似没得亲密关系的嘛!只不过这是蓝本链,上面我将一步棋一步棋的说:她们一同自学

形成表达式

Object.prototype.arrName = 李四 // 建立形成表达式function Prom() {} console.dir(Prom)

列印结论:

彻底搞懂JS原型链

她们在列印缺省的这时候会辨认出:缺省两个prototype(也是蓝本);而蓝本两个 constructor 对准的是Prom那个缺省;

缺省透过prototype对准蓝本链;蓝本链透过constructor能出访及缺省

彻底搞懂JS原型链

示例

// 建立形成表达式 function Prom() {} Prom.prototype.arrAge = 18 let prom = new Prom() console.dir(prom)

列印结论:

彻底搞懂JS原型链

她们在缺省上的蓝本链增加了两个arrAge属性;而她们透过列印示例辨认出,蓝本链上的arrAge在示例的proto中;

示例能透过proto出访蓝本链

彻底搞懂JS原型链

arrName属性出访

现在她们回到最开始的那个难题;为甚么在缺省中能出访及Object.prototype的属性;

Object.prototype.arrName = 李四 // 建立形成表达式 function Prom() {} console.dir(Prom)

列印结论:

彻底搞懂JS原型链
彻底搞懂JS原型链

从以内两种图(它们是同两个数据,只是没张开);

第一张图:

从第一张图中能看出来,缺省透过prototype去蓝本链上查找,如果没有查找到的话就向其中的proto中去查找也是object(我们注意看proto后面是跟了两个Object);在蓝本链中如果查到Object以后还没有查找到数据的话;就不会再去查找,因为Object是最高层了,没有就直接返回null

第二张图:

她们从第二张图中能很明显的看出;她们已经出访及arrName那个属性了;缺省透过prototype出访缺省的蓝本,然后缺省的蓝本在透过proto出访及object的蓝本,示例是同理的,感兴趣的好友能去试试;

彻底搞懂JS原型链

总结

1:缺省透过prototype能出访及蓝本

2:缺省透过new示例能建立示例对象

3:示例透过proto能出访及蓝本

4:蓝本能透过construction出访及缺省

5:缺省的蓝本,能透过proto出访及object.prototype

如果她们在蓝本上没有找到需要的属性的话;蓝本会透过proto向上一级对象的蓝本进行查找;直到查找到null为止

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务