这是一个非常常见的 JavaScript 问题。所有 JS 对象都有一个__proto__属性,指向它的原型对象。当试图访问一个对象的属性时,如果没有在该对象上找到,它还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。这种行为是在模拟经典的继承,

1. 每个对象都有一个内部属性 [[Prototype]]

  • 可以通过 __proto__ 访问(不推荐)
  • 或通过 Object.getPrototypeOf(obj) 获取
  • 或通过 Object.setPrototypeOf(obj, proto) 设置

2. 原型对象(prototype

  • 函数对象有一个 .prototype 属性,它用于构建新对象的 [[Prototype]]
  • constructor 创建的新对象,其 __proto__ 指向该构造函数的 prototype

当你访问一个对象的属性时,例如:

obj.name

JS 引擎的执行顺序如下:

  1. 当前对象 obj 中查找 name 属性

  2. 如果没有,就查找其原型对象 obj.__proto__ 中是否有 name

  3. 如果还没有,就继续沿着原型链向上查找,直到:

    • 找到为止(返回值)
    • 原型链终点 null(返回 undefined

📚 构造函数 + 原型链的组合方式(经典原型继承)

function Animal(name) {this.name = name;
}Animal.prototype.sayHi = function() {console.log("Hi, I'm " + this.name);
};const cat = new Animal("Kitty");cat.sayHi(); // Hi, I'm Kitty
  • cat.__proto__ === Animal.prototype
  • Animal.prototype.__proto__ === Object.prototype

这条链一直延伸到 null 终点。

为什么 JavaScript 要设计“原型链继承”机制? 我的另一种思考…

✨ 1. 动态语言需要灵活的继承模型

JavaScript 是一种动态语言,强调:

  • 对象可以随时添加/删除属性
  • 类和实例的界限模糊
  • 对象结构可随运行时变化

➡️ 传统的基于类(Class-based)继承 结构较为死板、静态,而 JS 初衷是用于浏览器脚本,需要灵活、轻量、动态。

原型继承天然支持:

const a = { greeting: 'hi' };
const b = Object.create(a); // b 继承自 a

无需类、构造函数,只要对象就能继承对象,非常轻便。


🧱 2. 万物皆对象,继承也要“对象化”

不像 Java/C++ 使用 class 来定义继承,JavaScript 一切都可以看作是对象(包括函数、数组等)。

  • JavaScript 设计者 Brendan Eich 的理念是: “对象应该能继承另一个对象”
  • 所以不需要 class 和 instance 的强制约束 —— 只需链式对象(对象 → 原型对象 → 更高层原型…)。
obj --> obj.__proto__ --> obj.__proto__.__proto__ --> null

这就形成了所谓的 原型链(Prototype Chain)。


🧬 3. 共享行为、节省内存

多个对象可以共享一个原型中的方法和属性,避免重复开销:

const personMethods = {greet() { console.log('Hello'); }
};const p1 = Object.create(personMethods);
const p2 = Object.create(personMethods);p1.greet(); // Hello
p2.greet(); // Hello
  • 如果没有原型机制,greet() 方法需要在每个对象上都拷贝一份(浪费内存)。
  • 通过原型链,“行为”可以被多个对象复用。

🧩 4. 实现灵活的“差异化对象”结构

原型机制允许对象“有差异地”继承:

const animal = { move() {} };
const dog = Object.create(animal);
dog.bark = () => console.log('woof');
  • dog 是个有 bark 行为的 animal
  • 你可以定制对象之间的差异而不破坏它们的继承结构

🚀 5. 支持动态补丁(Monkey Patching)和热修复

因为原型是对象,运行时可以随时改:

Array.prototype.sum = function() {return this.reduce((a, b) => a + b, 0);
};[1, 2, 3].sum(); // 6

JS 的生态系统(如 Polyfill、第三方补丁)大量利用了这种能力。这在 class 语言中是很难做到的。


🔄 6. 为未来引入 class 奠定基础

ECMAScript 2015 (ES6) 中加入了 class 语法,其实只是原型的语法糖

class Person {sayHi() { console.log('hi'); }
}const p = new Person();

实际上等价于:

function Person() {}
Person.prototype.sayHi = function() { console.log('hi'); }
const p = new Person();

➡️ class 语法只是“看起来像传统 OO”,底层仍然是原型链。


参考
  • https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
  • https://davidwalsh.name/javascript-objects

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/88967.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/88967.shtml
英文地址,请注明出处:http://en.pswp.cn/pingmian/88967.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV 视频处理与摄像头操作详解

1. 引言大家都来写OpenCV😊,学的好开心!2. 视频基础与OpenCV简介2.1 视频的定义视频(Video)是由一系列静态图像(帧)以一定速率连续播放形成的动态影像。其本质是利用人眼的视觉暂留效应&#xf…

Agentic AI 的威胁与缓解措施

原文:https://www.aigl.blog/content/files/2025/04/Agentic-AI—Threats-and-Mitigations.pdf AI Agent 的定义 1. 定义与基础 智能代理(Agent)的定义: 智能代理是一种能够感知环境、进行推理、做出决策并自主采取行动以实现特定…

ArrayList列表解析

ArrayList集合 ArrayList 的底层是数组队列,相当于动态数组。与 Java 中的数组相比,它的容量能动态增长。在添加大量元素前,应用程序可以使用ensureCapacity操作来增加 ArrayList 实例的容量。这可以减少递增式再分配的数量。 ArrayList 继承…

《恋与深空》中龙和蛇分别是谁的代表

在《恋与深空》宏大而神秘的世界观中,每一个符号都蕴含着深意。当玩家们热议“龙”和“蛇”这两种强大而古老的生物究竟代表着谁时,所有的线索都默契地指向了同一个名字——秦彻。 他不仅是力量与权威的象征“恶龙”,也是背负着宿命与纠葛的“…

gitignore添加后如何生效?

清除 Git 缓存: git rm -r --cached .添加文件到 Git:git add .使用 git commit 命令提交这些更改git commit -m "Update .gitignore"

多尺度频率辅助类 Mamba 线性注意力模块(MFM),融合频域和空域特征,提升多尺度、复杂场景下的目标检测能力

在伪装物体检测领域,现有方法大多依赖空间局部特征,难以有效捕捉全局信息,而 Transformer 类方法虽能建模长距离依赖关系,却存在计算成本高、网络结构复杂的问题。同时,频域特征虽具备全局建模能力,可频繁的…

Dify的默认端口怎么修改

1.定位配置文件 在 Dify 的安装目录中找到 .env 文件(通常位于 docker/ 子目录下)。此文件定义了 Docker 容器的环境变量,包括端口配置。 2.调整端口参数 修改以下两个关键配置项: # Docker 容器内部 Nginx 监听的端口&#xf…

Go内存分配

图解Go语言内存分配 - 知乎 go内置运行时,采用了自主管理,实现更好的内存使用模式,不需要每次内存分配都进行系统调用 采用TCMalloc算法:把内存分为多级管理,从而降低锁的粒度 将可用的堆内存采用二级分配的方式进行…

cursor使用mcp连接mysql数据库,url方式

背景。 用cursor生成后端代码。让cursor可以创建响应的表结构以及插入数据。使用的cursor版本是1.2.1 cursor 官网 mcp 说明smithery 中mysql mcp这个mcp具有建表的本领。 在cursor中是这样配置的。 以上这种配置方式是是通过在smithery 网站中配置好自己的mysql数据库连接后才…

Twisted study notes[1]

文章目录serverreferencesserver Twisted usually using subclass twisted.internet.protocol.Protocol to treat protocols .Protocol is a fundamental class in Twisted for implementing network protocols.protocol class instant don’t exists forever because of it w…

Python 数据建模与分析项目实战预备 Day 6 - 多模型对比与交叉验证验证策略

✅ 今日目标 引入多种常见分类模型(随机森林、支持向量机、K近邻等)比较不同模型的训练效果使用交叉验证提升评估稳定性🧾 一、对比模型列表模型类名(sklearn)适用说明逻辑回归LogisticRegression基础线、易于解释KNNK…

xss-labs 1-8关

level1打开检查&#xff0c;发现test直接放入h2标签中此时通过script绕过h2标签构造payload127.0.0.1/xss-labs/lvel1.php?name<script>alert(111)</script>直接使用script标签绕过h2,并执行alert,通过level2打开检查&#xff0c;输入的123被放在input标签里面的v…

Conda 核心命令快速查阅表

本表旨在提供一个简洁、高效的 Conda 命令参考&#xff0c;专注于最常用功能的快速查找。 1. 环境管理 (Environment Management)功能 (Function)命令 (Command)示例 (Example)创建新环境conda create -n <env_name> [packages...]conda create -n myenv python3.9 panda…

音视频学习(三十九):IDR帧和I帧

主要区分&#xff1a;I 帧 是帧内编码帧&#xff0c;IDR 帧 是一种特殊的 I 帧&#xff0c;它是“清除参考帧链的强制切断点”。H.264 视频结构 结构 H.264 视频由多个 NAL&#xff08;Network Abstraction Layer&#xff09;单元 构成&#xff0c;每一帧图像可由一个或多个 NA…

人工智能与机器学习暑期科研项目招募(可发表论文)

人工智能与机器学习暑期科研项目招募 华中科技大学博士论文指导我是计算机专业的研二学生&#xff1a;从大二开始接触科研&#xff0c;至今已发表1篇CCF-A类会议论文、1篇CCF-B类会议论文&#xff0c;以及2篇Top期刊论文。正是这段从本科开始的科研经历&#xff0c;让我在保研和…

C盘爆满?一键清理恢复极速体验!“小番茄C盘清理”彻底解放你的电脑

目录 前言 C盘变红&#xff1f;&#xff01;那么你的电脑将会出现下面糟糕的情况&#xff1a; 一、小番茄C盘清理介绍——拯救你的C盘爆红&#xff01; 二、安装登录小番茄C盘清理 2.1 安装小番茄C盘清理 2.2 登录—拥有专属自己电脑的小番茄C盘清理 三、手把手教你深度…

UI前端大数据可视化实战技巧:如何利用数据故事化提升用户参与度?

hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言&#xff1a;从 “图表堆砌” 到 “故事共鸣” 的可视化革命当企业管理者面对布满折线…

CSS基础1.1

HTML骨架<!DOCTYPE html> <!-- 中文网站 --> <html lang"zh-CN"> <head><!--charset"UTF-8" 规定网页的字符编码 --><meta charset"UTF-8"><!-- ie(兼容性差) / edge --><meta http-equiv"X…

前端基础JavaScript 笔记

本文是基于 B 站 pink 老师前端 JavaScript 课程整理的学习笔记 JS简介 JavaScript是一种运行在客户端&#xff08;浏览器&#xff09;的编程语言 作用&#xff1a;1.网页特效(监听用户的一些行为让网页作出对应的反馈) 2.表单验证(针对表单数据的合法性进行判断) 3.数据交互…

「小程序开发」项目结构和页面组成

微信小程序目录 微信小程序的目录,每种文件都有特定用途,组合起来才能构建完整应用。 小程序最基本的目录结构通常包含这些部分: my-miniprogram/ ├── pages/ // 存放所有页面 │ ├── index/ // 存放index页面的逻辑文件 │ └── logs/ …