前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JS】你一定要搞懂的原型链

【JS】你一定要搞懂的原型链

作者头像
坚毅的小解同志的前端社区
发布2023-10-17 16:35:44
2700
发布2023-10-17 16:35:44
举报
文章被收录于专栏:前端领域前端领域
什么是原型

在JavaScript中,每个对象都有一个原型(prototype),它是一个对象,包含可共享的属性和方法。当你访问一个对象的属性或方法时,如果该对象自身没有该属性或方法,JavaScript就会查找该对象的原型,以查看是否存在该属性或方法。如果存在,它就会使用该属性或方法。如果原型的原型也不存在该属性或方法,JavaScript将继续查找原型链,直到找到该属性或方法或者到达原型链的末尾。

原型的作用

原型在 JavaScript 中有着非常重要的作用,主要包括以下几个方面:

  1. 实现继承。原型链机制使得一个对象可以继承另一个对象的属性和方法,从而实现了面向对象编程中的继承特性。
  2. 实现属性和方法的共享。由于原型对象中的属性和方法会被所有实例共享,因此不同实例之间可以共享相同的属性和方法,从而实现了代码的复用。
  3. 实现函数的扩展。在 JavaScript 中,函数也是对象,因此也可以有原型对象。通过在函数的原型对象上添加新的方法和属性,可以实现函数的扩展和重载。

prototype和__proto__

想要理解原型链首先要把这两个原型属性搞懂,简单理解prototype是函数特有的原型,而__proto__(后续简称proto)是对象固有的隐式原型,上面说的引用实际上就是proto引用的prototype。

代码语言:javascript
复制
   function a(){
            this.a=1
        }
       a.prototype.luckliy='0'
        let b = new a();
        console.dir(b.__proto__==a.prototype);  //true

实例化new出来的对象b,会有一个proto属性,这个属性就是函数a的prototype引用过来的,所以相等。

原型链

原型链就是一系列对象,每个对象都有一个指向其原型的引用,这样才能在查找属性或方法时沿着原型链向上查找。对象和原型之间形成链式结构,这种结构被称为原型链。

在这里插入图片描述
在这里插入图片描述

只要理解上面的关系,我们就能画出完整的原型链了,这里说一个简单的概念,便于我们画出完整的原型链,这个概念就是 在js中,基本上所有的对象都是函数new出来的,然而函数又是对象,于是我们就可以这样画出一条原型链。

在这里插入图片描述
在这里插入图片描述

里面有多条三角关系,我尽量用颜色进行了区分,其中有两个特殊的地方就是Object函数的原型的proto是null 他就是最底层的原型,一开始就写好的对象。另一个就是Function函数他的隐式原型proto指向的就是它自己的原型prototype。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原型的作用
  • prototype和__proto__
  • 原型链
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档