JS如何实现继承_JavaScript原型链继承与类继承方法全解

JavaScript继承核心是原型链与对象委托。1. 原型链继承通过子类prototype指向父类实例实现,但引用属性共享问题明显;2. 借用构造函数用call/apply调用父类构造函数,解决属性共享但无法复用方法;3. 组合继承结合两者优点,却重复调用父构造函数;4. 寄生组合继承通过Object.create优化,仅调用一次父构造函数,为最优方案;5. ES6 class语法更清晰,extends和super底层仍基于原型链,实际开发推荐使用class,理解原理可选寄生组合继承。

js如何实现继承_javascript原型链继承与类继承方法全解

JavaScript 实现继承的方式有多种,核心是基于原型链和 ES6 的类语法。虽然写法不同,但本质都围绕对象间的委托关系展开。下面从原型链继承到现代类继承逐一说明关键机制与使用方法。

原型链继承:通过 prototype 建立对象关联

JavaScript 中每个函数都有一个 prototype 属性,指向一个对象。这个对象包含可以被实例共享的属性和方法。当用构造函数创建实例时,实例的内部指针 [[Prototype]](通常可通过 __proto__ 访问)会指向构造函数的 prototype。

实现原型链继承的基本方式是让子构造函数的 prototype 指向父构造函数的一个实例:

function Parent() {
  this.name = ‘parent’;
  this.colors = [‘red’, ‘blue’];
}

Parent.prototype.getName = function() {
  return this.name;
};

function Child() {
  this.type = ‘child’;
}

Child.prototype = new Parent(); // 关键:子类原型指向父类实例
Child.prototype.constructor = Child; // 修正构造器指向

const c1 = new Child();
console.log(c1.getName()); // ‘parent’
console.log(c1.colors); // [‘red’, ‘blue’]

这种方式的问题在于:父构造函数中的引用类型属性(如 colors)会被所有子实例共享,修改一处会影响其他实例。

立即学习“Java免费学习笔记(深入)”;

借用构造函数:在子类中调用父类构造函数

为解决引用属性共享问题,可以在子构造函数中使用 callapply 调用父构造函数:

function Child(name) {
  Parent.call(this); // 继承属性
  this.type = ‘child’;
}

这样做能确保每个实例都有独立的属性副本,但缺点是无法复用父类原型上的方法,所有方法只能定义在构造函数内部,浪费内存。

组合继承:融合原型链与构造函数的优点

这是最常用的继承模式,结合了原型链和借用构造函数的优势:

function Child() {
  Parent.call(this); // 继承实例属性
}

Child.prototype = new Parent(); // 继承原型方法
Child.prototype.constructor = Child;

这样既保证了属性的独立性,又实现了方法的共享。唯一的不足是父构造函数被调用了两次。

寄生组合继承:最优方案

为避免父构造函数被重复调用,可以通过 Object.create 创建一个干净的中间对象:

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

function Child() {
  Parent.call(this);
}

这种写法只调用一次父构造函数,同时保持原型链完整,是目前最推荐的继承方式。

ES6 类继承:语法更清晰,底层仍基于原型

ES6 引入了 classextends 关键字,使继承写法更接近传统面向对象语言:

class Parent {
  constructor() {
    this.name = ‘parent’;
    this.colors = [‘red’, ‘blue’];
  }
  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor() {
    super(); // 相当于 Parent.call(this)
    this.type = ‘child’;
  }
}

尽管语法更简洁,但底层仍是基于原型链实现。extends 不仅继承实例属性,也继承静态方法和原型链。

基本上就这些。理解原型链是掌握 JS 继承的关键,而 class 只是语法糖。实际开发中推荐使用 ES6 class,清晰且不易出错。寄生组合继承则适合需要手动实现兼容或深入理解原理的场景。

以上就是JS如何实现继承_JavaScript原型链继承与类继承方法全解的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1536163.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Godot生成器中的“方法未找到”错误解析与解决方案
上一篇 2025年12月21日 03:02:51
JS注oc怎么标注数字类型_ JS数字类型参数的注解方法与技巧
下一篇 2025年12月21日 03:03:04

相关推荐

  • 为什么VSCode的语法高亮有时会失效?

    语法高亮失效通常由语言模式识别错误、扩展冲突或配置问题导致。1. 检查右下角语言模式并手动切换为正确类型,确保文件有正确扩展名;2. 禁用近期安装的扩展或以 code –disable-extensions 启动排查冲突;3. 切换至默认主题并检查 settings.json 是否覆盖颜…

    2026年9月21日
    500
  • 如何为VSCode配置一个高效的PHP开发环境?

    搭建高效PHP开发环境需配置VSCode扩展与工具链:①安装PHP Intelephense实现智能补全;②配置Xdebug实现断点调试;③集成PHP CS Fixer或Prettier实现保存时自动格式化;④利用GitLens和集成终端提升协作与操作效率,一次性配置可长期提升编码质量与开发速度。 …

    2026年9月21日
    000
  • 在Java中变量和常量有什么区别

    变量的值可修改,常量(用final修饰)一旦赋值不可变;变量用于动态数据,常量用于固定值,如PI或配置参数。 在Java中,变量和常量的主要区别在于它们的值能否被修改。变量的值可以在程序运行过程中改变,而常量一旦赋值就不能再更改。 变量(Variable) 变量是用于存储数据的基本单元,其值在程序执…

    2026年9月21日
    100
  • iPhone 16 Pro如何设置不同铃声给联系人

    在iPhone 16 Pro上为特定联系人设置专属铃声和振动模式,只需进入“通讯录”编辑该联系人,选择“电话铃声”和“振动”选项进行自定义,还可单独设置“短信铃声”,所有设置通过iCloud同步保留。 给iPhone 16 Pro上的特定联系人设置专属铃声很简单,不需要用到电脑或第三方工具。你直接在…

    2026年9月21日
    100
  • 苹果手机密码忘记如何解决

    一、通过Apple ID重设密码 Apple ID是苹果用户的核心账户,可用于找回或重置iPhone的锁屏密码。操作流程如下: 尝试输入密码:在iPhone锁屏界面多次输入错误密码后,系统会提示“iPhone已停用,请稍后再试”。 选择“需要帮助”:当出现锁定提示时,屏幕上通常会显示“忘记密码”或“…

    2026年9月21日
    300
  • Linux如何限制用户执行特定命令

    Linux如何限制用户执行特定命令Linux如何限制用户执行特定命令Linux如何限制用户执行特定命令Linux如何限制用户执行特定命令

    首选sudo进行命令限制,因其灵活且可审计;通过visudo配置精确的用户权限,结合白名单、命令别名和!语法实现允许或拒绝特定命令;同时防范绕过手段如全路径执行、间接调用、脚本执行等,需多层防御并辅以日志监控。 在Linux环境中,限制用户执行特定命令,最直接有效且灵活的方法通常是利用 sudo 权…

    2026年9月21日 用户投稿
    000
  • 在Java中如何使用方法重载

    方法重载允许类中多个同名方法共存,只要参数列表不同即可。例如Calculator类中add方法可接受不同数量、类型或顺序的参数,Java根据传入参数自动匹配对应方法,提升调用灵活性与代码可读性。 方法重载(Overloading)是Java中实现多态的一种方式,它允许在一个类中定义多个同名方法,只要…

    2026年9月21日
    200
  • VSCode的括号着色功能如何帮助你避免语法错误?

    VSCode括号着色功能通过彩色高亮匹配括号,帮助用户直观识别嵌套结构、提升代码可读性,并快速发现遗漏或多余括号,减少语法错误。 VSCode的括号着色功能通过视觉方式帮你快速识别代码中的匹配和嵌套结构,减少语法错误的发生。当你在编写代码时,成对出现的括号(如()、[]、{})会被高亮显示为相同或相…

    2026年9月21日
    000
  • 抖音商城是哪个公司在运营

    抖音商城的运营主体揭晓 抖音商城由北京微播视界科技有限公司负责运营。 作为抖音背后的母公司,字节跳动通过其全资子公司——微播视界,全面掌舵抖音平台及其电商板块的日常运作。依托雄厚的技术积累与多元化的业务布局,为用户打造流畅、智能且高效的购物环境。 抖音商城究竟是什么? 抖音商城是抖音App内嵌的一站…

    2026年9月21日
    100
  • iPhone 17如何快速清理存储空间

    首先通过系统推荐一键优化释放8-12GB空间,再重点清理微信缓存、合并重复照片并开启优化存储,最后深度清理Safari缓存、删除大型App及关闭自动下载,可高效腾出数十GB存储。 虽然目前还没有iPhone 17,但根据2025年最新的iOS系统清理方法,无论你使用的是哪款iPhone,都可以通过以…

    2026年9月21日
    100
  • Java中如何将嵌套列表对象转换为扁平化单元素列表

    本文探讨了在java中将包含嵌套列表的对象集合转换为新列表的多种策略,旨在使新列表中每个对象仅包含其嵌套列表中的一个元素。通过详细介绍java 7的传统迭代方法、java 8-15的stream api `flatmap`操作,以及java 16及更高版本的`mapmulti`方法,文章提供了清晰的…

    2026年9月21日
    100
  • Linux如何查看sudo执行的历史记录

    Linux如何查看sudo执行的历史记录Linux如何查看sudo执行的历史记录Linux如何查看sudo执行的历史记录Linux如何查看sudo执行的历史记录

    要追溯sudo执行的命令,需查看系统日志或配置sudo日志;在Ubuntu/Debian中查/var/log/auth.log,CentOS/RHEL中查/var/log/secure,或使用journalctl _COMM=sudo筛选;通过配置/etc/sudoers中的Defaults log…

    2026年9月21日 用户投稿
    300
  • 如何为VSCode安装新的字体?

    先在操作系统安装字体文件,再在VSCode设置中指定字体名称。1. Windows右键安装.ttf/.otf文件,macOS用字体册安装,Linux复制到~/.fonts并运行fc-cache -fv;2. VSCode中通过设置界面或编辑settings.json修改”editor.f…

    2026年9月21日
    000
  • 如何制作抖音点单小程序:全面指南与实用技巧

    引言: 随着移动互联网的飞速发展,抖音已不仅仅是短视频平台,更成为商家连接用户的重要入口。越来越多企业开始关注抖音点单小程序的搭建,以提升服务效率和用户体验。本文将为您系统讲解抖音点单小程序的制作流程,并分享实用技巧与真实案例,助您快速打造专属的小程序,实现流量变现与销售增长。 1. 明确核心需求与…

    2026年9月21日
    200
  • iPhone SE 2022常见发热原因及处理方法 科普指南

    iPhone SE 2022 发热主因包括高性能任务、边充边用、高温环境、厚手机壳、后台程序及电池老化;正常使用下发热属常见现象,通过停止高耗能操作、移至阴凉处、取下手机壳、开启低电量模式可快速降温;长期建议避免边充边玩、选用轻薄壳、定期清理系统、更新 iOS 及检查电池健康,若待机过热或有鼓包异味…

    2026年9月21日
    100
  • 小红书视频封面不显示怎么办 小红书封面加载与设置技巧

    小红书视频封面不显示通常由上传设置、网络或缓存问题导致。先检查网络稳定性,确保封面尺寸为1080×1440像素(3:4比例),格式为JPG或PNG且不超过5MB;上传时使用Wi-Fi避免中断,在编辑页面务必点击“设为封面”并确认保存;发布后若未显示可等待几分钟刷新或重启App查看。优先尝试重新编辑封…

    2026年9月21日
    100
  • 抖音奈雪点单小程序怎么弄的

    抖音奈雪点单小程序是专为抖音用户打造的一款便捷点单工具,依托抖音平台生态,让用户无需跳转即可轻松完成奈雪饮品的选购与下单。为提升用户体验,奈雪茶庄同步推出了详尽的操作说明和使用指引。 小程序使用步骤 1. 打开抖音APP,在搜索栏输入“奈雪点单”查找相关小程序,或通过抖音首页的“附近的小程序”入口快…

    2026年9月21日
    100
  • 从 API 响应中提取元素并在 Java 中使用

    本文介绍了如何在 Java 中解析 API 响应,并从中提取特定元素的值。以 JSON 格式的响应为例,演示了如何使用 Jackson 库将 JSON 字符串转换为 Java 对象,并提取所需的数据,例如账户 ID,以便在后续操作中使用。 在 Java 开发中,经常需要与 API 进行交互,并从 A…

    2026年9月21日
    100
  • 苹果痛失AI大将,Siri关键负责人转投Meta

    苹果痛失AI大将,Siri关键负责人转投Meta苹果痛失AI大将,Siri关键负责人转投Meta苹果痛失AI大将,Siri关键负责人转投Meta苹果痛失AI大将,Siri关键负责人转投Meta

    近日有消息显示,%ignore_a_1%公司负责siri改革的关键高管ke yang已确认离职,并将加入竞争对手meta。这一变动不仅为苹果雄心勃勃的ai计划蒙上了一层阴影,也再次凸显了其在留住顶尖人才方面面临的严峻挑战。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 Dee…

    2026年9月21日 用户投稿
    200
  • REDMI有史以来最强手机!K90 Pro Max这次真的强到爆

    REDMI有史以来最强手机!K90 Pro Max这次真的强到爆REDMI有史以来最强手机!K90 Pro Max这次真的强到爆REDMI有史以来最强手机!K90 Pro Max这次真的强到爆REDMI有史以来最强手机!K90 Pro Max这次真的强到爆

    如果说redmi过去是“性价比之王”,那么这一次,它彻底进化成了“性能怪兽”。10月23日即将登场的redmi k90 pro max,不仅是品牌年度旗舰的压轴大戏,更是其历史上首款冠以“pro max”之名的巅峰之作。 这可以看作是REDMI向高端市场发起冲击的正式宣言。卢伟冰亲自放话:“给4K价…

    2026年9月21日 用户投稿
    300

发表回复

登录后才能评论
关注微信