JavaScript 的原型与继承——对象之间是怎么扯上关系的
引言如果说作用域和闭包是 JS 的空间问题那原型和继承就是 JS 的血缘问题。JS 没有传统面向对象语言里的类继承体系它用的是另一套逻辑原型链。这套逻辑让很多人初学时一头雾水但一旦想通你会发现它其实比类继承更灵活、更简洁。这篇文章不带代码把原型和继承讲清楚。一、从对象说起JS 里几乎所有东西都是对象。对象就是一堆键值对的集合你可以往里加属性、加方法。但问题来了如果你创建了一百个对象它们都需要一个相同的方法难道要重复写一百遍吗显然不合理。解决方案是让这些对象共享同一个方法。怎么共享这就引出了原型。二、原型是什么每个对象在创建时都会和一个幕后对象关联起来。这个幕后对象就是它的原型。当你访问一个对象的某个属性时如果它自己身上没有系统就会去它的原型上找。原型上还没有就继续去原型的原型上找一层层往上直到找到或者到达尽头。这条由原型串起来的链条就叫原型链。可以把原型想象成家谱。你想找一个亲戚先看自己家没有就问父母父母没有就问祖父母一代代往上追溯。原型链就是这个追溯过程。三、原型链的终点原型链不会无限延伸它有终点。最顶层的那个原型对象它的原型是空表示到此为止。这个顶层原型身上定义了所有对象都能用的通用方法比如判断属性是否存在、转成字符串等等。你平时能直接调用这些方法就是因为它们在原型链的顶端等着你。理解这一点很重要你写的对象虽然简单但它背后连着一条完整的链继承了一大堆通用能力。四、构造函数与原型的关系在 JS 里创建一个对象常见的方式是用构造函数。构造函数本质上就是一个普通函数只是约定用大写字母开头并且配合一个特殊关键字来调用。每个构造函数身上都有一个属性指向一个对象这个对象就是用它创建出来的实例的原型。反过来每个实例身上也有一个隐藏属性指向它的原型。于是形成这样一种关系构造函数造出实例实例通过隐藏链接找到原型原型又关联回构造函数。三者环环相扣。当你给构造函数的原型添加方法时所有由它创建的实例都能立刻用上这个方法。这就是共享的实现方式。五、继承是怎么实现的传统语言里继承靠类。JS 早期没有类继承靠原型链。思路是让子类型的原型指向父类型的一个实例。这样子类型的实例在查找属性时找不到就去子类型原型找再找不到就顺着链条去父类型实例找进而找到父类型的原型。一层层串下去就实现了继承的效果。子类型可以使用父类型的所有方法还可以添加自己特有的方法甚至可以覆盖父类型的方法。这种方式非常灵活但也容易写错。链条搭得不对就会出现方法找不到、或者意外覆盖的问题。六、class 语法糖后来JS 引入了 class 关键字。看起来和传统语言的类很像写起来也更清晰。但要注意class 只是语法糖底层仍然是原型链。它没有引入新的继承机制只是把原来繁琐的原型操作包装了一层更好看的皮。理解这一点非常关键。如果你只学 class 语法遇到原型相关的问题就会懵如果你懂了原型链再看 class就会发现它每一步在做什么都一目了然。七、原型带来的好处与陷阱好处很明显方法共享节省内存动态扩展随时可以给原型加方法所有实例立即生效继承灵活可以构建复杂的对象体系。陷阱也不少。原型上的属性是共享的如果某个实例修改了原型上的引用类型属性其他实例也会受影响这是经典误区。另外原型链过长会影响查找性能。还有判断属性到底是自己的还是继承来的需要用专门的方法不能想当然。八、总结原型和继承是 JS 对象体系的骨架。对象通过原型共享能力通过原型链实现继承class 只是这层机制的外衣。理解它你才能真正看懂 JS 的对象行为也才能在用框架、读源码时不被各种为什么这个方法能用的问题卡住。这是 JS 进阶的另一块基石。

相关新闻

枚举类型全解析:从代码可读性到状态机与设备枚举的编程之道

枚举类型全解析:从代码可读性到状态机与设备枚举的编程之道

枚举(enum)类型算是编程里最被低估的关键字了。很多人一提到 enum 就只想到“给数字起名字”,觉得它无非是让type 1变成type TYPE_A,值没变,只是顺眼了一点。我早先也这么觉得,直到后来在业务代码、算法题…

2026/10/11 1:52:42 阅读更多 →
WPF贝塞尔曲线绘制平滑折线图实战指南

WPF贝塞尔曲线绘制平滑折线图实战指南

简介:本资源是一个基于WPF与C#实现的贝塞尔曲线动态折线图可视化项目,面向.NET桌面开发初学者及图形学实践者,解决传统折线图缺乏平滑过渡与动态量程适配的问题。项目完整封装为RAR压缩包(65KB),共36个文件…

2026/10/11 1:51:41 阅读更多 →
视黄酸、FIV与脑膜屏障——猫原代脑膜细胞如何解码神经发育与神经免疫的交叉调控密码

视黄酸、FIV与脑膜屏障——猫原代脑膜细胞如何解码神经发育与神经免疫的交叉调控密码

在神经科学研究领域,脑膜长期以来被视为静态包裹大脑的“惰性保护层”。然而,近十年的研究正在从根本上改写这一认知——脑膜不仅是中枢神经系统的物理屏障,更是一个高度分区化、功能特化的动态微环境调控系统。脑膜成纤维细胞主动表达与血脑…

2026/10/11 1:51:41 阅读更多 →

最新新闻

自建Docker镜像仓库完整指南:从选型到落地的踩坑总结

自建Docker镜像仓库完整指南:从选型到落地的踩坑总结

在容器化落地走到一定规模之后,几乎每个团队都会遇到一个绕不开的基础设施问题:镜像仓库。项目标题就四个字“docker镜像仓库”,但真正动手自建过的人都知道,这四个字背后藏着选型、存储、安全、性能、运维一长串的决策链。这篇就…

2026/10/11 2:44:13 阅读更多 →
RoboMaster机器人硬件设计从电源到CAN总线再到电机驱动的排查指南

RoboMaster机器人硬件设计从电源到CAN总线再到电机驱动的排查指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 2:44:13 阅读更多 →
错误面板可优化清单记录

错误面板可优化清单记录

代码阅读总结 这是中望CAD插件里质检结果展示的 UserControl(QCResultUserControl),基于WinForm,核心功能: 两个构造:无参构造用于插件启动预创建控件;带dwg路径构造直接加载图纸质检数据UI&…

2026/10/11 2:44:13 阅读更多 →
C语言算法分析

C语言算法分析

本文通过讲解洛谷中珠心算测验的解题思路带编程小白了解C语言算法&#xff0c;同时会介绍一些函数知识和字符的使用方法&#xff0c;希望大家能够通过这篇文章学到更多编程知识&#xff0c;从而可以更好地运行代码。 一、函数名称及作用 <string.h> 常用函数 函数 …

2026/10/11 2:44:13 阅读更多 →
华为鸿蒙免费戒烟工具—小羊戒烟

华为鸿蒙免费戒烟工具—小羊戒烟

午饭刚放下筷子&#xff0c;手又往烟盒那边伸——饭后一支烟像按了开关。有时硬生生忍住了&#xff0c;过一会儿却忘自己撑过几回&#xff1b;周末回想&#xff0c;只剩“好像少抽了”&#xff0c;本周到底比上周少几支、省了多少&#xff0c;说不清。我想把抽了几支、忍住几次…

2026/10/11 2:44:13 阅读更多 →
ArcGIS属性表字段添加与编辑实战:类型选择、计算器及维护指南

ArcGIS属性表字段添加与编辑实战:类型选择、计算器及维护指南

1. 字段类型没选对&#xff0c;后面全是坑&#xff1a;先把数据需求想明白前天帮同事处理一份小区地块数据入库&#xff0c;忙活半小时后发现面积字段精度对不上&#xff0c;明明算好是123.45平方米&#xff0c;属性表里却挂着123.450000001。我问他当时添加字段选了什么类型&a…

2026/10/11 2:43:12 阅读更多 →

日新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介&#xff1a;基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码&#xff0c;面向计算机相关专业课程设计与期末大作业学生&#xff0c;以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程&#xff0c;…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程&#xff1a;键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化&#xff0c;十个新手有八个栽在"往输入框里填东西"这件事上&#xff1a;要么填不进去&#xff0c;要么填了一半&#xff0c;要么直接把原来内容追加在后面。这背后的根因&…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程&#xff1a;阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀&#xff1a;什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面&#xff0c;跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/11 0:00:27 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介&#xff1a;基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码&#xff0c;面向计算机相关专业课程设计与期末大作业学生&#xff0c;以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程&#xff0c;…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程&#xff1a;键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化&#xff0c;十个新手有八个栽在"往输入框里填东西"这件事上&#xff1a;要么填不进去&#xff0c;要么填了一半&#xff0c;要么直接把原来内容追加在后面。这背后的根因&…

2026/10/11 0:00:27 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程&#xff1a;阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀&#xff1a;什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面&#xff0c;跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/11 0:00:27 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/10 5:23:50 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/9 21:32:20 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/10 10:38:42 阅读更多 →