当前位置： 首页 > news >正文

js原型和类---prototype，__proto__，new，class

news 2026/4/4 18:22:43

原型和原型链

在js中，所有的变量都有原型，原型也可以有原型，原型最终都指向Object

什么是原型

在js中，一个变量被创建出来，它就会被绑定一个原型；比如说，任何一个变量都可以使用console.log打印，这里是调用了它的toString方法，而变量被创建后可能并没有设置toString方法，但是它任然可以打印，这就从原型中获取的toString方法

 所以可以得到第一点：原型可以提供方法给实例的变量，

原型也是一个对象，或者说对象可以作为原型并赋值给其他变量，这样对象成为了变量的原型，而对象本身也有原型，此时就形成了 ‘链’

同样的这个变量也是一个对象，他也可以作为其他变量的原型，这样‘链’就变得更长了，但是所有的链都有一个最终指向（root终点）--- Object，Obejct是最原始的对象，它包含了所有js变量都共享的方法，它不再有原型属性[[prototype]], 所以在js中一切皆对象中的对象就是指的继承自Object

这里可以总结一下：

  • 原型是一个对象，它可以向继承了自身的变量提供方法（属性）
  • 变量都拥有原型，也可以成为原型，循环下去可以形成‘链’，
  • 链的最顶端是Object对象，它提供了最基本的方法

js通过原型来复用通用的方法和属性，这样极大的减少了变量创建的成本（减少了内存支出，原型的方法属性都存储在原型上，变量中不会复制过来占用内存；也不必每个对象都去书写基本的方法），

tips：

原型链：就前面说到的 变量获得原型，原型又有原型，变量又可以作为原型，这样就形成了‘链’，链的最外层（底层），拥有最多的方法，继承了原型链上所有原型的方法和属性

prototype

在 JavaScript 中，对象有一个特殊的隐藏属性 [[Prototype]]（如规范中所命名的），它要么为 null，要么就是对另一个对象的引用。当我们从 object 中读取一个缺失的属性时，JavaScript 会自动从原型中获取该属性。这就是继承，object也可以从中借用方法

prototype不能在变量中被直接引用，通常没有办法遍历或者读取这个属性，所以它在控制台的名称有些特殊，使用[[ ]]引用，但是可以直接去调用它里面的方法，当你使用变量中不存在的属性或者方法，此时会自动向原型中寻找，对应的属性方法并调用，若原型链中没有则返回undefined

但是也有特例，在构造函数中，可以给构造的实例添加原型属性或方法

__proto__

这是一个过时的属性，现在只能在浏览器中使用，它的作用就是指向prototype，给原型添加属性或方法，这样添加的原型属性或方法会被遍历出来（Object.keys,for in）,

let animal = {eats: true
};
let rabbit = {jumps: true
};rabbit.__proto__ = animal; // 设置 rabbit.[[Prototype]] = animal

注意，__proto__ 与内部的 [[Prototype]] 不一样。__proto__ 是 [[Prototype]] 的getter/setter；获取和设置原型可以使用函数 Object.getPrototypeOf/Object.setPrototypeOf 来替代 __proto__ 去 get/set 原型

new

当使用 new 关键字调用函数时，该函数将被用作构造函数。new 将执行以下操作：

  1. 创建一个空的简单 JavaScript 对象作为实例。
  2. 如果构造函数的 prototype 属性是一个对象，则将实例的 原型[[Prototype]] 指向构造函数的 prototype 属性，否则实例将保持为一个普通对象，其 [[Prototype]]为 Object.prototype, 因此，通过构造函数创建的所有实例都可以访问添加到构造函数 prototype 属性中的属性/对象。
  3. 使用给定参数执行构造函数，并将this指向实例
  4. 如果构造函数返回非原始值，则该返回值成为整个 new 表达式的结果。否则，如果构造函数未返回任何值或返回了一个原始值，则返回实例。（通常构造函数不返回值，但可以选择返回值，以覆盖正常的对象创建过程。）

 new的关键点在于，它新建了一个实例对象，同时引入了原型，改变了构造函数的this指向，让实例对象成为了这个构造函数的构造结果

class

class是es6新增的语法糖，它简化了js中构造类的步骤，隐去了对原型的操作（根本上还是原型的操作），js中的类是基于原型的，使用原型达到继承的效果，

以下使用原型prototype和类class构建一个相同的类，

prototype.js

// 使用原型构造一个P类// 构造器，大写开头规范（不强制）
function P (x,y){// this指向实例，此时this不生效，构造实例后指向实例this.x = x;this.y = y;// 实例方法,此处的this指向实例,可以使用实例的属性this.getXY = ()=>{return [this.x,this.y]}
}// 实例方法，此处的this指向windows，不能使用实例的属性
P.prototype.getPName = ()=>{return P.name
}// 实例属性
P.prototype.desc = '2维坐标'//类方法/静态方法 
P.getP = (p1,p2)=>{return [p1.getXY(),p2.getXY()]
}// 类属性/静态属性
P.des = '坐标'

class.js 

// 使用class构造一个P类class P{//构造器constructor(x,y){this.x = x;this.y = y;}// 实例属性desc = '2维坐标'// 实例方法getXY(){return [this.x,this.y]}getPName(){return P.name}// 静态属性static des = '坐标'// 静态方法static getP(p1,p2){return [p1.getXY(),p2.getXY()]}}

很明显，class的用法更加整体化，但实际上这两种的写法效果是完成相同的，

可以使用同一串代码来实例化这个类P

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>prototype,class</title>
</head><body><script src="class.js"></script><!-- <script src="prototype.js"></script> --><script>// new关键字，新建一个对象，原型指向类，获得构造器中的this指向let p = new P(1, 2);console.log(p);console.log(p.x);console.log(p.y);console.log(p.desc);console.log(p.getXY());console.log(p.getPName());console.log(P.getP(p, p));console.log(P.des);</script>
</body></html>

实现的效果是一致的方法上略有不同，对于类的构造，关键在于this的指向问题，属性和方法是挂在类名下的，还是挂在实例下的需要区分开，

挂在类下的属性方法被称为，类方法（属性）或者静态方法（属性），通过类名引用（Math.max）

挂在实例下的属性方法被称为，实例方法（属性），通过实例引用(arr.push)

总结

  • 在 JavaScript 中，所有的对象都有一个隐藏的 [[Prototype]] 属性，它要么是另一个对象，要么就是 null。
  • 通过 [[Prototype]] 引用的对象被称为“原型”。
  • "prototype" 属性仅当设置在一个构造函数上，并通过 new 调用时，才具有这种特殊的影响。在常规对象上，prototype 会被当成是一个普通的属性名
  • 所以变量都通过原型/原型链使用共享的方法（即自身不存在，从原型/原型链中借用）
  • 类的使用要区分实例和静态类，哪些方法属性在类名下，哪些方法属性在实例下

相关文章：

js原型和类---prototype，__proto__，new，class

原型和原型链 在js中&#xff0c;所有的变量都有原型&#xff0c;原型也可以有原型&#xff0c;原型最终都指向Object 什么是原型 在js中&#xff0c;一个变量被创建出来&#xff0c;它就会被绑定一个原型&#xff1b;比如说&#xff0c;任何一个变量都可以使用console.log打…...

编程日记 2024/7/11 16:50:07

bevfomer self-att to transformer to tensorrt

self-attentation https://blog.csdn.net/weixin_42110638/article/details/134016569 query input* Wq key input* Wk value input* Wv output 求和 query . key * value detr multiScaleDeformableAttn Deformable Attention Module&#xff0c;在图像特征上&#…...

编程日记 2024/7/11 16:49:06

Day01-ElasticSearch的单点部署，集群部署，多实例部署，es-head和postman环境搭建

Day01-ElasticSearch的单点部署&#xff0c;集群部署&#xff0c;多实例部署&#xff0c;es-head和postman环境搭建 0、ElasticSearch的简单介绍1、ElasticSearch的单点部署2、ElasticSearch的集群部署3、基于二进制部署ElasticSearch3.1 准备阶段3.2 部署阶段3.3 使用systemct…...

编程日记 2024/7/11 16:48:05

Linux--DHCP原理与配置

目录 一、DHCP 1、DHCP 服务是什么 2、DHCP 优点 3、为什么使用DHCP 二、DHCP的模式与分配方式 1、DHCP 模式 2、DHCP 分配方式 3、工作原理 3.1 租约过程（四步） 3.2 更新租约 三、DHCP 服务器的配置 3.1 配置DHCP 3.2 dhcpd.conf 的内容构成 3.3 全局设置，作…...

编程日记 2024/7/11 16:47:03

Hi3861 OpenHarmony嵌入式应用入门--华为 IoTDA 设备接入

华为云物联网平台&#xff08;IoT 设备接入云服务&#xff09;提供海量设备的接入和管理能力&#xff0c;可以将自己的 IoT 设备 联接到华为云&#xff0c;支撑设备数据采集上云和云端下发命令给设备进行远程控制&#xff0c;配合华为云物联网平台的服 务实现设备与设备之间的控…...

编程日记 2024/7/11 16:46:02

Pytorch张量

在conda的环境中安装Jupyter及其他软件包 Pytorch 建立在张量&#xff08;tensor&#xff09;之上&#xff0c;Pytorch张量是一个 n 维数组&#xff0c;类似于 NumPy 数组。专门针对GPU设计&#xff0c;可以运行在GPU上以加快计算效率。换句话说&#xff0c;Pytorch张量是可以运…...

编程日记 2024/7/11 16:45:01

医院同步时钟系统提供可靠的时间支持

在医院这个充满紧张与忙碌的环境中&#xff0c;每一分每一秒都关乎着患者的生命与健康。为了确保医疗服务的高效、精准和安全&#xff0c;医院同步时钟系统应运而生&#xff0c;成为了医院可靠的时间支持。 医院同步时钟系统犹如一座精准的时间堡垒&#xff0c;为医院的各个角落…...

编程日记 2024/7/11 16:42:58

【中项第三版】系统集成项目管理工程师 | 第 11 章 规划过程组② | 11.3 - 11.5

前言 第 11 章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于10大管理的内容&#xff0c;学习要以教材为准。本章上午题分值预计在15分。 目录 11.3 收集需求 11.3.1 主要输入 11.3.2 主要工具与技术 11.3.3 主要输出 11.4 定义范围 11.4.1 主要输入…...

编程日记 2024/7/11 16:40:56

无人直播赚钱的底层逻辑是什么？一文揭晓！

当前&#xff0c;网络直播已经成为各类商家提高曝光和引流获客的主要渠道之一&#xff0c;这在为商家带来新机遇的同时&#xff0c;也让他们因人手不足或资金匮乏等原因而陷入无人问津窘境之中。在此背景下&#xff0c;无人直播软件一经出现&#xff0c;便引起了众多商家的关注…...

编程日记 2024/7/11 16:39:55

d3dcompiler_43.dll文件是什么？如何快速有效的解决d3dcompiler_43.dll文件丢失问题

dcompiler_43.dll 是一个Windows系统中的系统文件&#xff0c;属于DirectX软件的一部分。这个dcompiler_43.dll&#xff08;动态链接库&#xff09;文件主要用于处理与3D图形编程有关的任务&#xff0c;是运行许多游戏和高级图形程序必需的组件之一。那么如果电脑丢失d3dcompil…...

编程日记 2024/7/11 16:38:54

Git分支结构

目录 1. 线性分支结构 2. 分叉与合并结构 3. 分支与标签的关系 4. 并行开发与分支管理策略 测试&#xff08;本机系统为Rocky_linux9.4&#xff09; 合并失败解决 删除分支 删除本地分支 删除远程分支 Git 中的分支结构是版本控制中非常重要的概念之一&#xff0c;它描…...

编程日记 2024/7/11 16:36:51

测试流程规范建设

建设目的 通过规则保障团队高效协同&#xff0c;自驱、可控。能和所有成员达到精确的沟通。 基本规则 测试角色管理 红线-QA 新员工试用期考核流程&#xff08;RD&#xff09; 周会--QA 周报--QA 需求阶段 需求变更规范 开发阶段 接口文档规范 代码走查规范 分支管…...

编程日记 2024/7/11 16:35:50

启英泰伦CI13LC系列：打造AI语音芯片性价比之王！

在智能家居、消费电子、汽车电子等领域&#xff0c;语音识别技术已深度融入各类设备。通过嵌入语音芯片&#xff0c;这类设备可识别并执行用户的语音指令&#xff0c;无论是启动、调节还是关机&#xff0c;仅需一句话即可完成&#xff0c;极大地简化了操作流程。 智能语音部分应…...

编程日记 2024/7/11 16:32:47

headerpwn：一款针对服务器响应与HTTP Header的模糊测试工具

关于headerpwn headerpwn是一款针对服务器响应与HTTP Header的模糊测试工具&#xff0c;广大研究人员可以利用该工具查找网络异常并分析服务器是如何响应不同HTTP Header的。 功能介绍 当前版本的headerpwn支持下列功能&#xff1a; 1、服务器安全与异常检测&#xff1b; 2、…...

编程日记 2024/7/11 16:31:46

2021 RoboCom 世界机器人开发者大赛-本科组（复赛）:拼题A打卡奖励

拼题 A 的教超搞打卡活动&#xff0c;指定了 N 张打卡卷&#xff0c;第 i 张打卡卷需要 mi​ 分钟做完&#xff0c;完成后可获得 ci​ 枚奖励的金币。活动规定每张打卡卷最多只能做一次&#xff0c;并且不允许提前交卷。活动总时长为 M 分钟。请你算出最多可以赢得多少枚金币&a…...

编程日记 2024/7/11 16:30:45

flink 大数据处理资源分配

Flink在大数据处理中的资源分配是一个复杂但至关重要的过程&#xff0c;它直接影响到作业的性能和稳定性。以下将从几个方面详细阐述Flink的资源分配机制和优化策略&#xff1a; 一、资源分配概述 Flink是一个用于无界和有界数据流处理的分布式计算框架&#xff0c;它通过集群…...

编程日记 2024/7/11 16:29:43

独立站营销新思路：携手TikTok达人，促进用户参与与品牌传播

数字化时代&#xff0c;品牌传播的方式发生了重大变化。尤其是TikTok&#xff0c;作为全球最受欢迎的短视频平台之一&#xff0c;其独特的社群特点和用户行为模式&#xff0c;对品牌独立站提供了全新的营销思路。本文Nox聚星将和大家分析TikTok社群的特点和用户行为模式&#x…...

编程日记 2024/7/11 16:27:41

工单管理系统能解决什么？

工单系统具备智能化派单模式工程师响应快减少员工等待时间。自定义知识库可提升工程师专业技能水平&#xff0c;帮助工程师迅速判断员工问题&#xff0c;极大提升员工报单体验。系统还能够大幅提升职能部门可以服务的用户数&#xff0c;有效降低专业人力成本开支&#xff0c;提…...

编程日记 2024/7/11 16:26:40

探索Facebook在人工智能领域的最新进展

在当今快速发展的科技领域中&#xff0c;人工智能&#xff08;AI&#xff09;作为一项关键技术&#xff0c;正在逐步改变着社交媒体的面貌。作为全球最大的社交平台之一&#xff0c;Facebook积极探索和应用人工智能&#xff0c;以提升用户体验、增强平台安全性并推动技术创新。…...

编程日记 2024/7/11 16:25:39

Deepspeed : AttributeError: ‘DummyOptim‘ object has no attribute ‘step‘

题意&#xff1a;尝试在一个名为 DummyOptim 的对象上调用 .step() 方法&#xff0c;但是这个对象并没有定义这个方法 问题背景&#xff1a; I want to use deepspeed for training LLMs along with Huggingface Trainer. But when I use deepspeed along with trainer I get …...

编程日记 2024/7/11 16:21:35

降AI方法选错了会有什么后果？这几个坑别踩

降AI方法选错了会有什么后果&#xff1f;这几个坑别踩 降AI率这件事&#xff0c;大部分同学觉得"无非就是降没降下来"&#xff0c;以为选错方法最多就是浪费点时间。 实际上&#xff0c;有几种后果比这更严重。 后果一&#xff1a;浪费宝贵时间&#xff0c;错过截止…...

编程新知 2026/4/4 18:01:51

从一线装维经验看，扩展式智能插座更适合多路监测与项目落地

作为一名做了12年现场电气安装与运维的一线装维人员&#xff0c;今天想聊聊智能插座。这些年接触过的智能插座不少&#xff0c;市面上的产品确实五花八门&#xff0c;外观、功能、结构都不一样。选择多了&#xff0c;对用户来说未必是好事&#xff0c;反而更容易挑花眼。尤其一…...

编程新知 2026/4/4 16:38:42

2026年一体化HR系统TOP8盘点：从集团管控到AI落地的选型指南

进入2026年&#xff0c;企业选一体化HR系统不再只看模块是否齐全&#xff0c;更看能否支撑集团管控、复杂用工、数据洞察与AI提效闭环。红海云在国央企与复杂场景的深度适配、以及AI在招聘与员工服务等环节的可落地性上更突出&#xff1b;用友、北森、金蝶在业人融合、PaaS扩展…...

编程新知 2026/4/4 15:59:59

从 Vectorless 到 SAIF 再到板级实测：HLS Kernel 功耗估计全流程实战

从 Vectorless 到 SAIF 再到板级实测&#xff1a;HLS Kernel 功耗估计全流程实战 很多人在做 FPGA 或 SoC 上的 HLS kernel 时&#xff0c;第一次接触功耗分析&#xff0c;往往是从 Vivado 里的 report_power 开始的。点一下按钮&#xff0c;工具很快就会给出一个总功耗数字&am…...

编程新知 2026/4/4 15:53:47

群晖搭建PS4 HEN服务器 | 无需联网的本地化解决方案

1. 为什么需要本地化HEN服务器&#xff1f; 如果你是一位PS4玩家&#xff0c;可能对HEN&#xff08;Homebrew ENabler&#xff09;这个名词并不陌生。它能让你的PS4运行自制软件、备份游戏存档&#xff0c;甚至解锁一些官方系统限制的功能。但传统方式需要PS4联网访问外部HEN服…...

编程新知 2026/4/4 15:29:35

后软件时代：当交互成为本能

从显式操作到隐式协同，从界面到无界 范式转移：从“使用工具”到“与伙伴共存” 当软件不再以独立形态存在，交互的本质将从主动操作变为自然协同。这不仅是技术变革，更是人类与机器关系的根本重构。 交互层级的演进 第一层：意图直连 过去：打开App → 点击按钮 → 输入…...

编程新知 2026/4/4 15:05:13

OmX企业解决方案：大型组织的AI编码助手部署全攻略

OmX企业解决方案&#xff1a;大型组织的AI编码助手部署全攻略 【免费下载链接】oh-my-codex OmX - Oh My codeX: Your codex is not alone. Add hooks, agent teams, HUDs, and so much more. 项目地址: https://gitcode.com/GitHub_Trending/oh/oh-my-codex OmX&#x…...

编程新知 2026/4/4 14:40:57

可能是综合性能最强的PCIe 5.0 SSD！铠侠EXCERIA PRO G2 2TB评测：AIDA64线性写入全程不掉速

一、前言&#xff1a;铠侠首款旗舰级PCIe 5.0 SSD 可能很多读者会疑惑&#xff0c;作为存储领域的一线巨头&#xff0c;在PCIe 5.0时代&#xff0c;为什么铠侠迟迟没有推出旗舰级SSD产品&#xff01; 这主要是因为&#xff0c;早期的PCIe 5.0 SSD主控功耗极高(超过10W)&#xf…...

编程新知 2026/4/4 13:50:22

Git-RSCLIP快速入门：基于1000万图文对训练的遥感AI模型实测

Git-RSCLIP快速入门&#xff1a;基于1000万图文对训练的遥感AI模型实测 1. 模型概述&#xff1a;专为遥感场景打造的智能助手 Git-RSCLIP是北京航空航天大学团队基于SigLIP架构专门开发的遥感图像理解模型。这个模型最特别之处在于它使用了Git-10M数据集进行训练——这是一个…...

编程新知 2026/4/4 13:46:17

最佳论文提名！DancingBox：一台手机，从任意物体捕捉角色动画！

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达点击进入—>【顶会/顶刊】投稿交流群添加微信号&#xff1a;CVer2233&#xff0c;小助手拉你进群&#xff01;扫描下方二维码&#xff0c;加入CVer学术星球&#xff01;可以获得最新顶会/顶…...

编程新知 2026/4/4 13:05:43