前端 JS面向对象 原型 prototype

目录

一、问题引出

二、prototype原型对象

三、小结

四、constructor

五、__proto__对象原型

六、原型链


一、问题引出

由于JS的构造函数存在内存浪费问题:

    function Star(name,age){this.name=namethis.age=agethis.sing=function () {console.log("唱歌!")}}let star01=new Star("Jack",18)let star02=new Star("Mark",20)console.log(star01.sing==star02.sing)

打印:不同实例对象的动态方法是不同的,会开出新的内存区域用于存储相同的方法。

对此问题,提出了原型处理方法。

二、prototype原型对象

我们可以将不变的方法直接定义在prototype属性中,以减少内存开销。

对上面的问题代码进行优化:

    function Star(name,age){this.name=namethis.age=age}Star.prototype.sing=function (){console.log("唱歌!")}let star01=new Star("Jack",18)let star02=new Star("Mark",20)console.log(star01.sing==star02.sing)

打印:可以看到两个实例对象的该方法是同一个,证明都使用了同一个原型里的方法,没有新开内存拷贝。

三、小结

1、公共属性写到构造函数里;

2、公共函数写到prototype原型对象里;

3、构造函数里的this就是指向实例化的对象;

4、原型对象里的this还是指向实例化的对象。

四、constructor

prototype里的属性constructor属性就是帮原型确定它的构造函数是谁,如,构造函数Star的prototype里的constructor属性就是指向Star构造函数的。

作用:指向原型对象的构造函数。

    function Star(){}console.log(Star.prototype)Star.prototype={sing:function (){console.log("唱歌")},dance:function (){console.log("跳舞")}}console.log(Star.prototype)

打印:没构造前,有constructor属性,构造后没有了

可以看到,上面这种写法直接给prototype赋值了新值,没有了constructor对象标识,正确写法应该是:

    function Star() {}console.log(Star.prototype)Star.prototype = {//重新指回这个原型的构造函数 Starconstructor: Star,sing: function () {console.log("唱歌")},dance: function () {console.log("跳舞")}}console.log(Star.prototype)

打印:

五、__proto__对象原型

每个实例化的对象都有一个__proto__,而这个__proto__就是指向构造函数的prototype对象的。这样一来,每个实例化对象都可以访问prototype里的数据了。

1、这是一个只读属性;

2、

    function Star() {}const star01=new Star()console.log(star01.__proto__ === Star.prototype)

打印:这里可以看到__proto__指向的是构造函数的原型对象

此外,__proto__实例化对象的原型中也有constructor,并且是指向prototype原型对象中的constructor的。

六、原型链

只要是对象就是__proto__,prototype对象中也有__proto__属性,我们按照prototype的__proto__可以一级一级的指向,到最顶层Object.prototype.__proto__指向为null。

使用场景:比如某个对象需要调用一个方法,而这个方法在当前对象里没有,就会向上一级查找是否有该方法,若仍然没有再往上寻找prototype里是否有该方法,依次类推,直至到顶层prototype里查找,指向为null时结束查找。

可以通过instanceof来判断对象是否在一个原型链上。

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

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

相关文章

生成 Django 中文文档 PDF 版

文章目录 背景克隆 Django 文档和翻译仓库配置 conf.py设置和同步翻译生成 .pot 文件运行 sphinx-intl update复制翻译文件 构建 PDF生成 tex 文件安装 MikTeX生成 PDF Sphinx 生成文档 背景 浏览看到一个帖子,有个评论说可以用 sphinx 构建一个 pdf,正…

mysql 实现分库分表之 --- 基于 MyCAT 的分片策略详解

引言 在我们日常工作的项目中,特别是面向 C 端用户的产品,随着业务量的逐步扩大,数据量也呈指数级增长。为了应对日益增长的数据库压力,数据库优化已成为项目中不可或缺的一环,而分库分表则是海量数据优化方案中的重要…

JUC-locks锁

JUC-locks锁 1、JUC-locks锁概述2、管程模型3、ReentrantLock可重入锁3.1 ReentrantLock源码3.2 Sync静态内部类3.3 NonfairSync非公平锁3.4 FairSync公平锁 如有侵权,请联系~ 如有错误,也欢迎批评指正~ 1、JUC-locks锁概述 java…

GEE 数据集——美国gNATSGO(网格化国家土壤调查地理数据库)完整覆盖了美国所有地区和岛屿领土的最佳可用土壤信息

目录 简介 代码 引用 网址推荐 知识星球 机器学习 gNATSGO(网格化国家土壤调查地理数据库) 简介 gNATSGO(网格化国家土壤调查地理数据库)数据库是一个综合数据库,完整覆盖了美国所有地区和岛屿领土的最佳可用土…

kettle开发-Day43-数据对比

前言: 随着数字化的深入,各种系统及烟囱的建立,各系统之间的架构和数据存储方式不同,导致做数据仓库或数据湖时发现,因自建的系统或者非标准化的系统经常存在物理删除而不是软删除。这就延伸出一个问题,经常…

哪款开放式耳机好用?5款实力出众的开放式耳机按头安利!

随着耳机市场日益火爆,许多品牌与款式不断涌现。但是,不少劣质产品在核心性能上缺乏专业优化,且选用低质材料,在音质还原度和佩戴舒适性等关键方面存在明显短板,导致性能欠佳,聆听体验不佳,还可…

Unity资源打包Addressable资源保存在项目中

怎么打包先看“Unity资源打包Addressable AA包” 其中遗留一个问题,下载下来的资源被保存在C盘中了,可不可以保存在项目中呢?可以。 新建了一个项目,路径与“Unity资源打包Addressable AA包”都不相同了 1.创建资源缓存路径 在…

矩阵的各种计算:乘法、逆矩阵、转置、行列式等——基于Excel实现

在Excel中,可以使用内置的函数和公式来实现矩阵的各种计算。以下是具体方法: 矩阵乘法: 使用MMULT函数。如图矩阵A在单元格范围A1:B2,矩阵B在单元格范围D1:E2,结果矩阵的左上角单元格为G1:选中结果矩阵的区域(如G1:H2)。输入公式:=MMULT(A1:B2, D1:E2)。按Ctrl+Shift…

[ComfyUI]Flux:繁荣生态魔盒已开启,6款LORA已来,更有MJ6写实动漫风景艺术迪士尼全套

今天,我们将向您介绍一款非常实用的工具——[ComfyUI]Flux。这是一款基于Stable Diffusion的AI绘画工具,旨在为您提供一键式生成图像的便捷体验。无论您是AI绘画的新手还是专业人士,这个工具都能为您带来极大的便利。 在这个教程中&#xff…

【设计模式】关联关系与依赖关系

UML 图将事物之间的联系分为 6 种:关联、依赖、聚合、组合、泛化、实现 我认为关联关系和依赖关系非常不好理解。 我们看下定义: 关联:表示一种拥有的关系。具有方向性。如果一个类单方向的访问另一个类,称为单向关联。如果两个类…

前端Cypress自动化测试全网详解

Cypress 自动化测试详解:从安装到实战 Cypress 是一个强大的端到端(End-to-End, E2E)功能测试框架,基于 Node.js 构建,支持本地浏览器直接模拟测试,并具有测试录屏功能,极大地方便了测试失败时的…

#渗透测试#SRC漏洞挖掘#云技术基础02之容器与云

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…

Android 下内联汇编,Android Studio 汇编开发

版权归作者所有,如有转发,请注明文章出处:https://cyrus-studio.github.io/blog/ 内联汇编 Android 内联汇编非常适用于 ARM 架构的性能优化和底层操作,通常用于加密、解密、特定指令优化等领域。 1. 基础语法 内联汇编在 C/C …

深入剖析【C++继承】:单一继承与多重继承的策略与实践,解锁代码复用和多态的编程精髓,迈向高级C++编程之旅

​​​​​​​ 🌟个人主页:落叶 🌟当前专栏: C专栏 目录 继承的概念及定义 继承的概念 继承定义 定义格式 继承基类成员访问⽅式的变化 继承类模板 基类和派⽣类间的转换 继承中的作⽤域 隐藏规则 成员函数的隐藏 考察继承【作⽤…

RHCE的学习(16)(shell脚本编程)

第一章、shell入门基础 1.1 为什么学习和使用Shell编程 对于一个合格的系统管理员来说,学习和掌握Shell编程是非常重要的。通过编程,可以在很大程度上简化日常的维护工作,使得管理员从简单的重复劳动中解脱出来。 Shell程序的特点&#xff…

信号量和线程池

1.信号量 POSIX信号量&#xff0c;用与同步操作&#xff0c;达到无冲突的访问共享资源目的&#xff0c;POSIX信号量可以用于线程间同步 初始化信号量 #include <semaphore.h> int sem_init(sem_t *sem, int pshared, unsigned int value); sem&#xff1a;指向sem_t类…

docker运行ActiveMQ-Artemis

前言 artemis跟以前的ActiveMQ不是一个产品&#xff0c;原ActiveMQ改为ActiveMQ Classic, 现在的artemis是新开发的&#xff0c;和原来不兼容&#xff0c;全称&#xff1a;ActiveMQ Artemis 本位仅介绍单机简单部署使用&#xff0c;仅用于学习和本地测试使用 官网&#xff1a;…

区块链技术在电子政务中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 引言 区块链技术概述 定义与原理 发…

【AI换装整合包及教程】CatVTON与其他虚拟试衣技术的详细对比

一、概述 虚拟试衣技术近年来发展迅猛&#xff0c;尤其在电商领域的应用备受瞩目。CatVTON作为一种新兴的虚拟试衣技术&#xff0c;凭借其轻量化设计和高效训练策略脱颖而出。本文将从网络结构、训练策略、推理过程及应用场景四个方面详细对比CatVTON与其他主流虚拟试衣技术。…

图论基本术语

图论算法 —— 图论概述-CSDN博客 理论基础 —— 图_依附于顶点v是什么意思-CSDN博客 理论基础 —— 图 —— 图的存储结构_十字链表和链式前向星-CSDN博客 语雀版本 概括&#xff1a;图是计算机中常用的一种存储结构&#xff0c;图论是数学的一个分支&#xff0c;他以图为…