文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript原型链的原理是什么

2024-04-02 19:55

关注

这篇文章主要讲解了“JavaScript原型链的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript原型链的原理是什么”吧!

解析原型链

原型链是JavaScript这门语言设计的十分有意思的地方之一。在解析原型链之前,我们需要了解以下几个重要的概念。

构造函数

构造函数是一种比较特殊的函数,它通常被人为地约定为函数名的首字母需要大写,且必须通过new操作符来进行调用(与普通函数的本质上的区别),它的作用是用来创建特定类型的对象。在JavaScript中也一些原生的构造函数,如Object、Array、Function等等。

实例

每当构造函数被new运算符调用时,都会创建出一个新对象,这个过程被称为实例化。而这个对象就被称为实例。也就是说任何对象都是一个实例,但关键在于创建这个实例的构造函数是谁?以及它的原型是谁?

原型

构造函数内部有个特殊的属性prototype,这个属性指向了一个对象,没错它就是原型也称为原型对象。原型对象是一个十分特殊存在,每当构造函数实例化一个对象时,这个实例的[[Prototype]]会默认指向构造函数的prototype。实例对象可以通过自身的[[Porototyoe]]属性找到原型对象,而原型对象可以通过自身的construcor属性找到是哪个构造函数创建了这个实例。(注意许多浏览器会把属性[[Prototype]]替代为属性__proto__。)

构造函数、实例和原型值之间的关系

为了进一步弄清楚构造函数、实例和原型之间的关系,我们可以从下面这张图片开始

JavaScript原型链的原理是什么

为实例dog通过constructor属性找到了构造函数Dog这个过程不用实线箭头呢?这里到底有什么细节呢?,让我们再来看一段简单的代码和一张图片

function Dog(name){     this.name = name;      } let dog = new Dog("cheems");

JavaScript原型链的原理是什么

从代码结合图片来看,我们不难发现实例dog上并没有constructor这个属性,而原型对象才拥有这个属性,那么实例是如何获取到这个属性呢?  ,这就涉及到了JavaScript中一种特殊的行为——委托,下面我们就来了解一下什么是委托。

委托

当我们尝试去获取对象的某个属性值,但该对象并没有这个属性时,那么JavaScript  会试着从原型对象中获取属性值。如果那个原型对象也没有该属性,那么再从它的原型中寻找,依次类推直到该过程最后到达终点Object.prototype,如果仍然没有找到就返回undefined。这个过程被称为委托。

现在你就明白了,实例dog正是通过委托这种方式找到了创建自己的构造函数。在明白这一点之后,原型链也就呼之欲出了。

原型链

如果在第一个对象上没有找到需要的属性或者方法引用,引擎就会继续在它的[[Prototype]]指向的对象上进行查找。同理如果后者中也没有找到需要的引用就会继续查找它的[[Prototype]],依次类推直到到达Object.prototype,这一系列对象的链接被称为原型链。

我们可以用一张图来表示下

JavaScript原型链的原理是什么

由于构造函数也是对象,所以它同样具有构造函数和原型。构造函数的prototype是实例的原型,并非自身的原型。自定义的构造函数同样需要借助[[Prototype]]找到原型,进而找到创建自己的构造函数——即原生构造函数Function,但请注意原生的构造函数Function的[[Prototype]]是指向了Function.prototype。

console.log(Function.__proto__ === Function.prototype); // true

所有的原型对象都可以沿着原型链一直寻找至到找到最后的原型对象Object.prototype,然后Object.prototype再往上寻找就是Null,用来表示此处没有对象。

感谢各位的阅读,以上就是“JavaScript原型链的原理是什么”的内容了,经过本文的学习后,相信大家对JavaScript原型链的原理是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯