「类 vs 实例」对比 ,「类 - 原型 - 实例」的关系

坚持的本身就是意义

目录

  • 直观类比
  • 类 (Class) vs 实例 (Instance)
    • 对比表
    • 示例代码
  • 类 - 原型 - 实例关系图
  • 解释:
    • 类 (class Person)
    • 原型 (Person.prototype)
    • 实例 (new Person(...))
  • 总结:

直观类比

  • 类(Class) = 图纸 / 模板
  • 实例(Instance) = 根据图纸造出来的房子 / 产品

类 (Class) vs 实例 (Instance)

对比表

对比点类 (Class)实例 (Instance)
定义方式使用 class 关键字定义使用 new 类名(...) 创建
打印结果打印出来的是 类的结构/定义打印出来的是 对象(属性 + 值)
内存位置存在于函数(构造器)区域存在于堆内存,每次 new 都是新的对象
属性类本身没有具体属性值,只定义结构实例对象上有具体的属性和值
方法方法定义在类的 prototype实例可以直接调用这些方法
用途相当于一个“模板”相当于由模板生产出来的“成品”
例子代码console.log(Person)
👉 输出:class Person { constructor(...) {...} speak() {...} }
console.log(p1)
👉 输出:Person { name: '张三', age: 22 }

示例代码

class Person {name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}speak() {console.log(`我叫${this.name},今年${this.age}`)}
}console.log(Person) // 类的定义const p1 = new Person("张三", 22)
console.log(p1)     // 实例对象 Person { name: '张三', age: 22 } 
p1.speak()          // 调用实例方法 我叫张三,今年22岁

类 - 原型 - 实例关系图

   ┌─────────────────────────┐│        class Person     ││ ─────────────────────── ││ constructor(name, age)  ││ speak() { ... }         │  ← 方法挂到 prototype 上└─────────────┬───────────┘│▼┌─────────────────┐│ Person.prototype│   ← 原型对象│ ─────────────── ││ speak() { ... } │   ← 共享方法│ constructor: f  │└───────▲─────────┘│ [[Prototype]]┌────────────┴────────────┐│                         │
┌──┴───────────┐      ┌──────┴───────────┐
│   p1 实例     │      │    p2 实例       │
│ ───────────  │      │ ───────────      │
│ name: '张三'  │      │ name: '李四'     │
│ age: 22      │      │ age: 18          │
└──────────────┘      └──────────────────┘

解释:

类 (class Person)

  • 定义了构造函数和方法。
  • 方法其实会自动挂载到 Person.prototype 上。

原型 (Person.prototype)

  • 所有实例共享的方法都存在这里。例如 speak() 方法,只存一份,所有实例都能通过原型链访问。

实例 (new Person(…))

  • 每次 new 都会创建一个新的对象(放在堆内存里),对象上存储 独有的数据属性(name, age)。
  • 调用 p1.speak() 时,JS 引擎会:
    • 先找 p1 本身有没有 speak
    • 找不到 → 顺着 proto(即原型链)去 Person.prototype 找
    • 找到后执行
class Person {constructor(name, age) {this.name = namethis.age = age}speak() {console.log(`我叫${this.name},今年${this.age}`)}
}const p1 = new Person("张三", 22)console.log(p1) // Person { name: '张三', age: 22 }
console.log(Person.prototype) // { speak: f, constructor: f }
console.log(p1.__proto__ === Person.prototype) // true

总结:

  • 类 (Class) 是模板,方法都放在 prototype 上。
  • 实例 (Instance) 存放自己的数据属性。
  • 实例通过 proto 链接到 Person.prototype,形成原型链来共享方法。

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

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

相关文章

第一课、Cocos Creator 3.8 安装与配置

介绍说明 本文主要介绍在windows系统中,安装开发Cocos使用的软件工具,主要包含:安装CocosDashboard控制面板、CocosCreator3.8编辑器和脚本编辑器 VS Code 。 一、Cocos Dashboard 的安装 说明:Cocos Dashboard 主要作用是能够同…

从航空FACE的一个落地方案漫谈汽车HPC软件架构的思维转变(2/3)FACE的“段”同Autosar的“层”概念区别探索

文章目录PART THREE:段和层的概念比较一、“段”更强调“功能闭环责任归属”,而非“单纯的层级堆叠”二、“段”规避“层”的“刚性依赖陷阱”,适配航空系统的“灵活组合需求”三、“段”贴合航空工业的“工程化语言习惯”,降低跨…

金融量化指标--6InformationRatio信息比率

InformationRatio信息比率计算公式添加图片注释,不超过 140 字(可选)一、信息比率(IR)是什么?核心概念:信息比率衡量的是投资组合经理相对于某个基准指数(Benchmark)&…

Java全栈开发面试实录:从基础到微服务的实战经验分享

Java全栈开发面试实录:从基础到微服务的实战经验分享 一、初识面试场景 我叫李明,28岁,毕业于复旦大学计算机科学与技术专业,硕士学历。在互联网行业已经有5年的工作经验,先后在两家中型互联网公司担任Java全栈开发工程…

【51单片机】【protues仿真】基于51单片机公交报站系统

目录 一、主要功能 二、使用步骤 三、硬件资源 四、软件设计 五、实验现象 一、主要功能 主要功能如下: 1、LCD12864显示时间、日期、公交车车站、温度等 2、按键设置时间,显示公交车信息 3、串口播报相应站点信息 4、按键控制上行、下行、手动播…

第1节-PostgreSQL入门-从表中查询数据

摘要:在本教程中,你将学习如何使用 PostgreSQL 的 SELECT 语句从表中检索数据。 SELECT 语句 要从表中查询数据,需使用 PostgreSQL 的 SELECT 语句。 以下是 SELECT 语句的基本语法: SELECT column1, column2, ... FROM table_name;在这种语法中: 首先,在 SELECT 关…

【C++进阶】---- map和set的使用

1.序列式容器和关联式容器 前⾯我们已经接触过STL中的部分容器如:string、vector、list、deque、array、forward_list等,这些容器统称为序列式容器,因为逻辑结构为线性序列的数据结构,两个位置存储的值之间⼀般没有紧密的关联关系…

430章:Python Web爬虫入门:使用Requests和BeautifulSoup

在软件交付日益高频、用户需求快速迭代的今天,版本发布流程的规范性直接决定了团队的交付效率、产品质量和用户满意度。然而,许多团队仍面临以下痛点:发布混乱:分支管理随意,代码冲突频发;质量失控&#xf…

代码随想录第七天|● 454.四数相加II ● 383. 赎金信 ● 15. 三数之和 18.四数之和

本文所有题目链接/文章讲解/视频讲解:https://programmercarl.com/0454.%E5%9B%9B%E6%95%B0%E7%9B%B8%E5%8A%A0II.html 454.四数相加II 有四个数组,如果要遍历则时间复杂度太大 可以选择分组,a和b一组,c和d一组 这样就可以等同于…

Vue3源码reactivity响应式篇之computed计算属性

概述 vue3中,computed函数用于表示计算属性,有惰性求值、响应式追踪依赖的特点。本文将介绍computed的实现原理以及其机制细节。 源码解析 computed计算属性和computed方法、ComputedRefImpl类以及refreshComputed方法有关。 computed方法 computed暴露给…

[嵌入式embed]Keil5烧录后STM32不自动运行,复位才能运行

[嵌入式embed]Keil5烧录后STM32不自动运行,复位才能运行Keil5-验证“Reset and Run”功能是否生效参考文章Keil5-验证“Reset and Run”功能是否生效 参考文章 Keil5烧录后STM32不自动运行?必须复位才能启动的终极解决方案

阿里云Qwen3系列模型部署微调评测

与阿里云一起轻松实现数智化让算力成为公共服务:用大规模的通用计算,帮助客户做从前不能做的事情,做从前做不到的规模。让数据成为生产资料:用数据的实时在线,帮助客户以数据为中心改变生产生活方式创造新的价值。模型…

北京鲁成伟业 | 三屏加固笔记本电脑C156F3

在工业控制、应急指挥、测控及无人机作业等对设备稳定性与环境适应性要求较高的领域,一款性能均衡且坚固耐用的计算机往往能为工作效率提供有力支撑。三屏加固笔记本电脑C156F3便是针对这类需求设计的设备,凭借多方面的特性,可满足不同场景下…

七彩氛围灯芯片EH3A01RGB驱动芯片定时开关IC方案

‍在现代智能家居和个性化照明领域,EH3A01-442A-A24F小夜灯定时芯片凭借其多功能、低功耗和灵活配置的特点,成为LED氛围灯、小夜灯及便携式照明方案的理想选择。本文将深入解析该芯片的核心功能、电气特性及应用场景,帮助开发者与用户全面掌握…

Spring Boot 项目新增 Module 完整指南

1. 模块化开发的重要性 在软件开发中,随着项目规模的不断扩大,​​模块化设计​​已成为提高代码可维护性和可复用性的关键实践。通过将大型项目拆分为多个独立模块,开发团队可以​​并行开发​​不同功能组件,降低代码耦合度&…

Git cherry-pick 与分支重置技术实现代码健全性保障下的提交记录精简

代码健全性保障:上市审查中的 Git 提交记录整理方案(核心功能提交筛选流程) 一、背景与目的 我司正处于上市筹备阶段,券商需对核心系统进行 Git 代码审查,并基于提交记录生成测试报告。由于原始提交记录包含大量细节性…

前后端联调时出现的一些问题记录

服务器的ip没有设置成所有ip都能访问的,或防火墙没开跨域问题(刚开始异源,有这个问题,主要是前端做一下配置代理,后端也可以配置跨域资源共享(CORS))Configuration public class Cor…

数字图像处理-设计生成一个半球

1 实验题目设计生成一个半球(matlab)。2 程序源代码%Hemisphere clear,clc,close all %Sphere radius R1; %Set grid number n30; theta (-n:2:n)/n*pi; phi ([0,0:2:n])/n*pi/2; cosphi cos(phi); cosphi(1) 0; cosphi(end) 0; sintheta sin(thet…

mac M1上安装windows虚拟机报错

Parallels版本是18.0.02 mac:arm系统15.6.1 自动获取windows11下载,安装的时候报错,蓝屏,是因为安装的版本不对,猜测原因应该是18.0.02不支持最新版的windows11,需要更新最新版的Parallels。 解决方案&am…

基于R语言机器学习方法在生态经济学领域中的实践技术应用

近年来,人工智能领域已经取得突破性进展,对经济社会各个领域都产生了重大影响,结合了统计学、数据科学和计算机科学的机器学习是人工智能的主流方向之一,目前也在飞快的融入计量经济学研究。表面上机器学习通常使用大数据&#xf…