首页 > 其他分享 >js原型链理解示例

js原型链理解示例

时间:2025-01-20 22:21:44浏览次数:1  
标签:构造函数 abc 示例 继承 js 原型 prototype 属性

a函数继承b函数,b函数继承c函数,那a函数的实例abc可以直接读取c函数的prototype属性吗?

在 JavaScript 中,函数可以通过原型链继承其他函数的属性和方法。上面提到“a函数继承b函数,b函数继承c函数”,通常是指构造函数之间的继承关系,这涉及到原型链的层级结构。在这种情况下,a 的实例可以访问到 c 函数的 prototype 属性中的方法和属性,前提是这些属性没有被覆盖。

原型链继承的基本原理

JavaScript 中的继承是通过原型链实现的。当一个对象尝试访问某个属性时,如果该对象本身没有这个属性,JavaScript 引擎会沿着原型链向上查找,直到找到该属性或到达原型链的末端(即 null)。

示例代码

假设我们有三个构造函数 CBA,其中 A 继承自 B,而 B 继承自 C。我们可以使用以下方式来设置这种继承关系:

// 定义 C 构造函数及其 prototype 属性
function C() {}
C.prototype.cMethod = function() {
    console.log("C method");
};

// 定义 B 构造函数及其 prototype 属性,并让 B 继承 C
function B() {}
B.prototype = Object.create(C.prototype);
B.prototype.constructor = B;
B.prototype.bMethod = function() {
    console.log("B method");
};

// 定义 A 构造函数及其 prototype 属性,并让 A 继承 B
function A() {}
A.prototype = Object.create(B.prototype);
A.prototype.constructor = A;
A.prototype.aMethod = function() {
    console.log("A method");
};

// 创建 A 的实例
const abc = new A();

// 测试是否可以访问 C 的 prototype 属性
abc.cMethod(); // 输出: "C method"
abc.bMethod(); // 输出: "B method"
abc.aMethod(); // 输出: "A method"

解释

  1. 定义构造函数:首先,我们定义了三个构造函数 CBA,并分别为它们的 prototype 添加了一些方法。

  2. 设置继承关系

    • 使用 Object.create() 方法将 B.prototype 设置为继承自 C.prototype
    • 同样地,将 A.prototype 设置为继承自 B.prototype
    • 为了确保构造函数正确指向自己,我们在每次设置原型之后都重置了 constructor 属性。
  3. 创建实例:创建 A 的实例 abc

  4. 访问原型链上的方法

    • abc.cMethod() 能够成功调用,因为 cMethod 是定义在 C.prototype 上的方法,通过原型链从 A 实例可以访问到它。
    • 同理,abc.bMethod()abc.aMethod() 分别调用了定义在 B.prototypeA.prototype 上的方法。

注意事项

  • 属性覆盖:如果在某一层级上定义了一个与上级相同的属性或方法,那么下层的定义会覆盖上层的定义。例如,如果你在 B.prototypeA.prototype 上定义了一个同名的 cMethod,那么 abc.cMethod() 将调用最近定义的那个版本,而不是 C.prototype 上的原始版本。

  • 性能考虑:虽然原型链提供了强大的继承机制,但过长的原型链可能会影响性能。因此,在设计复杂的继承结构时,应尽量保持原型链的简洁。

通过这种方式,你可以构建多层次的继承关系,并且实例能够沿着原型链访问到其祖先构造函数的 prototype 属性中的方法和属性。

标签:构造函数,abc,示例,继承,js,原型,prototype,属性
From: https://www.cnblogs.com/jocongmin/p/18682593

相关文章

  • xhs js逆向
    #XHS逆向/数据采集js逆向实现/可抓取搜索数据/评论数据/发送评论/发送sx/点赞收藏等##实现过程-通过js逆向破解前端"x-s":x_s,"x-t","x-s-common","x-b3-traceid","searchId"等参数-调用python进行api封装下面是其中搜索接口的参数,其searchid也需要获取,都封装在api里......
  • JSP某医学院实习管理系统7s3pv--程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库使用MySQL开题报告内容一、研究背景与意义随着医学教育的快......
  • JSP明星周边在线购物商城zzfnj(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库使用MySQL开题报告内容一、课题背景及意义随着互联网技术......
  • JSP民族服饰文化数字化展示系统cyi8g程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、课题名称民族服饰文化数字化展示系统二、研究目的与意义本课题旨在探索民族服饰文化的数字化展示方法,通过构建数字化展示系统,将传统民族服饰......
  • JSP民宿短租系统an01j(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库使用MySQL开题报告内容一、研究背景与意义随着互联网技术的......
  • JAVA开源毕业设计 在线课程管理系统 Vue.JS+SpringBoot+MySQL
    本文项目编号T137,文末自助获取源码\color{red}{T137,文末自助获取源码}......
  • 使用 Java 获取淘宝推荐商品列表 API 接口的示例代码解析
    在电商领域,推荐系统是提升用户体验和促进销售的重要工具。淘宝开放平台提供了taobao.item.recommend接口,允许开发者根据用户行为、搜索关键词或分类ID获取推荐商品列表。本文将详细介绍如何使用Java调用该接口,并解析返回的数据。一、淘宝推荐商品接口简介taobao.item.reco......
  • fastjson整理
    fastjson<=1.2.24其中的base64编码是由恶意类生成的,使用时自己调整即可.{"@type":"com.sun.org.apache.xalan.internal.xsltc.trax.TemplatesImpl","_bytecodes":["yv66vgAAADIANAoABwAlCgAmACcIACgKACYAKQcAKgoABQAlBwArAQAGPGluaXQ+AQADKClWAQAEQ29kZQEA......
  • Next.js博客项目-快速起步
    作者:KTO原文:Next.js博客项目-快速起步简介:从nextjs博客模板开始,快速配置搭建自己的博客项目。部署出来的网站样式可以参考原文的网站。Next.js博客项目-快速起步使用的模板我们使用的模板是:tailwind-nextjs-starter-blog该模板有1.0版本和2.0版本。......
  • Go语言【Gin框架】:JSON、AsciiJSON、PureJSON和SecureJSON的区别
    在Go语言中,JSON、AsciiJSON、PureJSON和SecureJSON是Gin框架用于发送JSON响应的方法。1.c.JSON功能:将提供的数据序列化为标准的JSON格式,并将其作为HTTP响应发送给客户端。特点:支持Unicode字符,无需将非ASCII字符转义。某些字符(如<、>和&)会被自动转义为相应的Unicode......