Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JavaScript原型链与继承进阶_创想鸟

JavaScript原型链与继承进阶

JavaScript继承基于原型链,对象通过[[Prototype]]链接向上查找属性;组合借用构造函数与原型链继承可实现高效复用,ES6 class本质是语法糖,寄生组合式继承避免冗余属性,提升性能。

javascript原型链与继承进阶

JavaScript的原型链与继承机制是理解语言核心的关键。很多人了解基础的原型概念,但对实际应用中的细节和高级用法掌握不够。真正掌握继承,需要深入理解对象如何通过原型查找属性、方法,以及不同继承模式的实现原理和优劣。

原型链的本质与属性查找机制

每个JavaScript对象都有一个内部属性[[Prototype]],指向其原型对象。这个链接构成了“原型链”。当你访问一个对象的属性时,引擎会先在对象自身查找,如果找不到,就沿着__proto__(或构造函数的prototype)向上查找,直到原型链顶端——Object.prototype为止。

例如:

function Person(name) {  this.name = name;}Person.prototype.sayHello = function() {  console.log("Hello, " + this.name);};const student = new Person("Alice");student.sayHello(); // 输出: Hello, Alice

这里student本身没有sayHello方法,但它能调用,是因为原型链找到了Person.prototype上的定义。

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

经典继承模式:组合借用与原型链

单一的构造函数继承或原型继承都有缺陷。真正的实用方案是结合构造函数借用原型链连接

常见实现方式如下:

function Parent(name) {  this.name = name;  this.colors = ['red', 'blue'];}Parent.prototype.getName = function() {  return this.name;};function Child(name, age) {  Parent.call(this, name); // 借用父类构造函数  this.age = age;}// 关键步骤:创建父类原型的副本作为子类原型Child.prototype = Object.create(Parent.prototype);// 修复constructor指向Child.prototype.constructor = Child;Child.prototype.getAge = function() {  return this.age;};

这样做的好处是:

实例属性通过call独立复制,避免引用共享 方法通过原型链共享,节省内存 保持instanceof正确性

ES6 class与底层原型的关系

class语法是语法糖,本质仍是基于原型。理解这一点有助于调试和兼容处理。

以下class写法:

class Animal {  constructor(type) {    this.type = type;  }  speak() {    console.log(this.type + " makes a sound");  }}class Dog extends Animal {  constructor(type, breed) {    super(type);    this.breed = breed;  }  bark() {    console.log("Woof!");  }}

等价于手动设置原型链和构造函数调用。extends背后使用了Object.setPrototypeOf()来连接两个构造函数的prototype。

寄生组合式继承为何更高效

上面提到的Object.create(Parent.prototype)方式,就是寄生组合式继承的核心。相比直接new Parent()赋值给Child.prototype,它避免了执行父构造函数时可能产生的多余属性。

手动模拟extends可以这样写:

function inherit(Child, Parent) {  Child.prototype = Object.create(Parent.prototype);  Object.defineProperty(Child.prototype, 'constructor', {    value: Child,    writable: true,    configurable: true  });}

这种模式被现代框架广泛采用,因为它精准控制原型关系,不引入冗余数据。

基本上就这些。掌握原型链不只是为了面试,而是写出可维护、高性能代码的基础。理解每种继承方式背后的原理,才能在复杂场景中做出合理选择。

以上就是JavaScript原型链与继承进阶的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JavaScript Koa洋葱模型原理
上一篇 2025年12月20日 21:42:27
JavaScript虚拟机架构深入剖析
下一篇 2025年12月20日 21:42:45

相关推荐

  • Java类中Jackson @JsonNaming策略的运行时内省

    本文介绍如何在运行时动态内省Java类上通过@JsonNaming注解配置的Jackson PropertyNamingStrategy。通过利用ObjectMapper的SerializationConfig和JacksonAnnotationIntrospector,开发者可以编程方式获取类的命…

    2026年9月22日
    200
  • 高效利用 PriorityQueue 合并并排序多个列表

    本教程详细阐述了如何使用 Java 的 PriorityQueue 高效地合并并排序多个整数列表。文章首先指出将列表作为元素放入 PriorityQueue 的常见误区,进而纠正为应将单个整数元素放入队列。接着,它演示了如何正确声明、填充 PriorityQueue,并强调了通过循环调用 poll(…

    2026年9月22日
    300
  • 如何配置Android开发环境 Android Studio安装与JDK配置方法

    答案:配置Android开发环境需先安装JDK并设置环境变量,再下载安装Android Studio,配置SDK及虚拟设备,最后创建项目测试。具体步骤包括:1. 安装JDK 17并配置JAVA_HOME和Path;2. 从官网下载Android Studio并安装,自动集成SDK;3. 通过SDK …

    2026年9月22日
    100
  • ClipStudioPaintPro如何导出AI漫画图片?保存图像的详细指南

    导出AI漫画图片需通过Clip Studio Paint Pro的“文件”菜单选择“导出”,根据用途选单页、多页或Webtoon导出,推荐PNG用于高质量或透明背景需求,JPG用于网络分享以平衡文件大小与画质,设置300dpi以上分辨率确保清晰度,色彩配置选用sRGB保障跨平台一致性,批量导出时利用…

    2026年9月22日
    100
  • 谷歌浏览器官网直接进入 Chrome浏览器官方登录入口

    谷歌浏览器官网直接进入方式为访问https://www.google.com/chrome/,该网站是Chrome官方登录入口,提供跨平台同步、V8引擎加速、地址栏集成搜索、自动填充表单等核心功能,支持极简界面、深色模式、自定义新标签页及侧边栏服务,具备安全浏览、隐私沙盒、密码检查和无痕模式等安全机…

    2026年9月22日
    100
  • Laravel 8 注册成功但登录失败的解决方案

    本文针对 Laravel 8 中使用 php artisan ui:auth 生成的认证系统,注册功能正常但登录功能失效的问题,提供了一种解决方案。通过重写 LoginController 中的 username() 方法,将认证字段从默认的 email 修改为 username,从而解决登录失败的…

    2026年9月22日
    000
  • rm -rf 误删文件?别急,或许有救!

    rm -rf 误删文件?别急,或许有救!rm -rf 误删文件?别急,或许有救!rm -rf 误删文件?别急,或许有救!rm -rf 误删文件?别急,或许有救!

    立即采取行动! 在生产环境中,我们应尽量避免进行风险操作。但如果不慎犯错,如何挽救呢?让我分享一个故事:上周我为了打包一个应用,需要整理Ubuntu 16.04上的线上数据,不小心删除了一个数据文件,幸而最终有惊无险,现记录如下。 extundelete 我的恢复计划主要依赖于一个工具——extun…

    2026年9月22日 用户投稿
    000
  • MySQL复杂查询语句写作技巧_Sublime环境中编写多表关联逻辑

    MySQL复杂查询语句写作技巧_Sublime环境中编写多表关联逻辑MySQL复杂查询语句写作技巧_Sublime环境中编写多表关联逻辑MySQL复杂查询语句写作技巧_Sublime环境中编写多表关联逻辑MySQL复杂查询语句写作技巧_Sublime环境中编写多表关联逻辑

    提升mysql多表查询性能与可读性的方法包括:1. 优化索引,确保join和where字段有合适索引,理解复合索引左前缀原则;2. 使用cte分解逻辑,使结构清晰易维护;3. 利用sublime text插件如sqltools、sublimelinter提升编写效率;4. 拆解复杂逻辑,逐步构建查询…

    2026年9月22日 用户投稿
    100
  • itextpdf freemarker渲染

    关于打印pdf操作的需求,经过研究,发现以下两种方法: 在现有的模板上进行编辑,这种方法操作难度较大。而通过FreeMarker生成静态页面,然后转换为HTML,操作更为顺畅。动态生成PDF的方法在网上参考较多,经过对比,我认为使用FreeMarker结合IText生成PDF最为简单。参考链接为ht…

    2026年9月22日
    300
  • Java多线程并发控制:告别线程优先级,拥抱锁机制

    本文深入探讨了在Java多线程环境中如何有效解决并发操作中断问题,特别是当多个线程尝试同时执行非原子性操作(如打印)时。文章指出,单纯依赖线程优先级并不可靠,并详细介绍了使用synchronized关键字配合共享锁对象实现互斥访问的关键技术,确保关键代码块的原子性执行,从而避免数据混乱和逻辑错误。 …

    2026年9月22日
    700
  • 使用空值合并运算符为数组元素设置默认值

    本文将介绍如何使用 PHP 的空值合并运算符 (??) 为数组元素设置默认值,尤其是在处理用户输入时。 通过该运算符,可以在变量值为 null 或不存在时,提供一个备选值,从而简化代码并提高可读性。我们将通过一个实际的 Laravel 邮件发送示例,演示如何在请求参数中缺失主题时,设置默认主题。 空…

    2026年9月22日
    600
  • Reinstalling Alpine Linux on a Lighthouse Instance

    Start by creating an instance with Debian or your preferred operating system. Log into the instance. Download the Arch Linux ISO for booting. Although…

    2026年9月22日
    000
  • 设计VSCode三维图形编程界面与WebGL实时预览模块

    VSCode通过集成WebGL预览插件实现三维图形编程的实时反馈,利用扩展架构提供GLSL语法支持、文件关联及命令注册,并通过Webview嵌入渲染窗口,结合消息通信与动态编译技术实现实时预览,配合保存自动刷新、错误定位与多视图布局优化交互体验,构建高效闭环开发环境。 在使用 VSCode 进行三维…

    2026年9月22日
    100
  • 小米双11正式开启!覆盖全品类 单品最高可省4000元

    10月13日,小米官方宣布“小米双11”大促活动全面启动。此次活动涵盖小米全品类产品,优惠力度空前,部分单品最高直降4000元。 在手机产品线中,小米最新旗舰大折叠屏MIX Fold 4迎来大幅让利,最高降价1000元,最终到手价为7999元。搭载顶级影像系统的旗舰机型小米15 Ultra也下调50…

    2026年9月22日
    400
  • Apache Pulsar 主题分区创建与管理指南

    本文深入探讨Apache Pulsar主题分区的创建与管理。Pulsar主题分区是实现高吞吐量和可伸缩性的关键,但必须在主题创建时进行配置。文章详细介绍了两种主要的分区主题创建方法:通过Broker配置实现自动分区,以及利用Pulsar Admin API进行显式创建,并强调了分区主题一旦创建后不可…

    2026年9月22日
    100
  • 使用 Spring Boot Test @Sql 注解通过掩码描述文件的方法

    在 Spring Boot 测试中,我们经常使用 @Sql 注解来执行 SQL 脚本,以便在测试前准备数据或在测试后清理数据。 通常的用法如下: @Sql(scripts = “/folder/my_favourite_script.sql”)@Testpublic void myTest() { …

    2026年9月22日
    100
  • 3000元以下最具性价比手机出炉:iQOO拿下三大榜首

    3000元以下最具性价比手机出炉:iQOO拿下三大榜首3000元以下最具性价比手机出炉:iQOO拿下三大榜首3000元以下最具性价比手机出炉:iQOO拿下三大榜首3000元以下最具性价比手机出炉:iQOO拿下三大榜首

    9月2日消息,今天,安兔兔公布了2025年8月份手机性价比排行榜。 在3000元以下价位段,iQOO表现尤为突出,包揽了三个价位区间的榜首,成为该价位段的最大赢家。 在0-999元价位,iQOO Z10x(8GB+128GB)以744.6的性价比得分位列第一。该价位机型主要面向入门用户,iQOO Z…

    2026年9月22日 用户投稿
    000
  • Spring Boot集成MongoDB Atlas:正确配置与故障排除

    本教程详细指导如何在Spring Boot应用中正确配置与连接MongoDB Atlas集群。我们将重点讲解如何获取并使用正确的Atlas连接URI,安全地处理用户认证信息,以及准确指定目标数据库。通过实例代码和常见错误排查,帮助开发者避免连接失败,确保应用与MongoDB Atlas的顺畅集成。 …

    2026年9月22日
    600
  • 如何利用 JavaScript 实现一个支持拖放排序的交互界面?

    答案是利用HTML5拖放API实现拖拽排序,通过设置draggable属性和监听dragstart、dragover、drop事件控制元素移动,结合CSS提升交互反馈。 要实现一个支持拖放排序的交互界面,核心是利用 HTML5 的拖放 API(Drag and Drop API)结合 JavaScr…

    2026年9月22日
    100
  • Apache POI生成带水印DOCX文件时的XML内容错误解析与应对

    本文深入探讨了使用Apache POI生成带有水印的DOCX文件时,可能遇到的“XML声明只能出现在输入开头”错误。该错误通常指向DOCX内部XML文件(如header4.xml)的格式问题,导致文件在Microsoft Word中无法打开。文章分析了错误原因,并提供了包括升级POI版本、手动检查D…

    2026年9月22日
    100

发表回复

登录后才能评论
关注微信