前端 JS面向对象 原型 prototype

news2024/12/26 22:35:03

目录

一、问题引出

二、prototype原型对象

三、小结

四、constructor

五、__proto__对象原型

六、原型链


一、问题引出

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

    function Star(name,age){
       this.name=name
       this.age=age
       this.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=name
       this.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 = {
        //重新指回这个原型的构造函数 Star
        constructor: 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.coloradmin.cn/o/2238870.html

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

相关文章

【MATLAB代码】二维平面上的TDOA,使用加权最小二乘法,不限制锚点数量,代码可复制粘贴

本文所述的MATLAB代码实现了一个基于两步加权最小二乘法的二维目标定位算法,利用多个锚点(基站)和时间差到达(TDOA)数据来估计未知目标的位置。 订阅专栏后可以看到完整代码,复制到MATLAB空脚本上面即可直接运行。若需要单独下载,可通过下面的链接:https://download.cs…

推荐一款完全开源的多端仓库管理系统

简介 模块 安装 UI展示 开源地址 今天给大家介绍一款完全开源的仓库管理系统,本系统采用Python语言开发。 简介 该库存管理系统是目前福特亚太区售后物流仓储供应链流程。离开福特后,开始了这个项目。为了帮助一些有需要的人。OneAPP 理念。支持扫…

第七部分:2. STM32之ADC实验--AD多通道(AD采集三路传感器模块实验:光敏传感器、热敏传感器、反射式传感器附赠温湿度传感器教程)

这个多通道采用非扫描模式--单次转换模式 1.代码配置链路图 2. ADC的输入通道 3.ADC的非扫描模式的转换模式(单次和连续) 4.ADC的扫描模式的转换模式(单次和连续) 5.采集校准 代码实验: 代码部分: #inclu…

手持测温热像仪市场规模:预计2030年全球市场规模将达到24.9亿美元

手持测温热像仪是一种能够实时监测和记录物体表面温度分布的高科技仪器。其核心功能在于,利用物体自身辐射出的热红外线来生成可视化的温度分布图像,进而为各种应用提供精准的温度数据。这一技术的普及和应用,无疑极大地提升了我们对于物体温…

web——[SUCTF 2019]EasySQL1——堆叠注入

这个题主要是讲述了堆叠注入的用法,来复现一下 什么是堆叠注入 堆叠注入:将多条SQL语句放在一起,并用分号;隔开。 1.查看数据库的名称 查看数据库名称 1;show databases; 发现有名称为ctftraining的数据库 2.对表进行查询 1;show tabl…

数据结构选择题及答案

一、选择题 1、下列查找方法中,( )适用于查找有序单链表。 A.分块查找; B.哈希查找; C.顺序查找; D.二分查找; 2、在有n个结点的二叉树的二叉链表表示中,空指针数为( )。 A&#xf…

GraphQL在现代Web开发中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 GraphQL在现代Web开发中的应用 GraphQL在现代Web开发中的应用 GraphQL在现代Web开发中的应用 引言 GraphQL 概述 定义与原理 发展…

智能社区服务小程序+ssm

智能社区服务小程序 摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了智能社区服务小程序的开发全过程。通过分析智能社区服务小程序管理的不足,创建了一个计算机管理智能社区服务小程序的方案。文…

前端上传大文件,后端报错Content-Type ‘application/octet-stream‘ is not supported【解决】

报错内容org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type application/octet-stream is not supported 组件库:naiveui中upload进行上传功能使用的主要组件 使用原生XMLHttpRequest进行接口请求 authorization请求头需要手动写入 不…

【免越狱】iOS砸壳 可下载AppStore任意版本 旧版本IPA下载

软件介绍 下载iOS旧版应用,简化繁琐的抓包流程。 一键生成去更新IPA(手机安装后,去除App Store的更新检测)。 软件界面 支持系统 Windows 10/Windows 8/Windows 7(由于使用了Fiddler库,因此需要.Net环境…

第三十七章 Vue之编程式导航及跳转传参

目录 一、编程式导航跳转方式 1.1. path 路径跳转 1.1.1. 使用方式 1.1.2. 完整代码 1.1.2.1. main.js 1.1.2.2. App.vue 1.1.2.3. index.js 1.1.2.4. Home.vue 1.1.2.5. Search.vue 1.2. name 命名路由跳转 1.2.1. 使用方式 1.2.2. 完整代码 1.2.2.1. main.js 1…

《硬件架构的艺术》笔记(一):亚稳态

同步系统中如果数据和时钟满足建立保持时间的要求,不会发生亚稳态(meastable)。 异步系统中数据和时钟关系不固定,可能违反建立保持时间,就会输出介于两个有效状态之间的中间级电平,且无法确定停留在中间状…

【Qt】在 Qt Creator 中使用图片资源方法(含素材网站推荐)

先准备图片资源 推荐一个好用的图标素材网站,有很多免费资源。 Ic, fluent, animal, dog, filled icon - Free download 其他辅助工具,类似 AI 抠图去背景,实测效果还行,但是非免费。 美图秀秀-在线一键抠图,无需P…

【Android、IOS、Flutter、鸿蒙、ReactNative 】水平布局

Android Xml LinearLayout 两个TextView水平并排&#xff0c;宽度占比1:2 XML布局文件 <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.com/apk/res/…

基于OLAP湖仓一体架构,火山引擎ByteHouse助力企业降本提效

在数字化转型的浪潮中&#xff0c;企业对数据处理能力的要求日益提高。 过去&#xff0c;数据湖和数据仓库分别拥有两套独立的管理体系&#xff0c;这导致维护成本高昂&#xff0c;研发周期漫长。为了加强数据端到端的链路整合&#xff0c;构建一套低成本、高性能的数据湖仓一…

VMware虚拟机安装Windows11保姆级教程(最新步骤+踩坑)

文章目录 一、镜像下载&#xff1a; Windows 11 x64最新版&#xff08;包含专业版、家庭版、教育版&#xff0c;安装Windows11的时候可以自行选择系统版本&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1Vnh-7nphe_uQleW56PKDGQ 提取码&#xff1a;E288 二、配置虚…

2024 年 8 个最佳 API 设计工具图文介绍

8 个最佳 API 设计工具推荐&#xff0c;包括 Apifox、Postman、Swagger、Insomnia、Stoplight、Hoppscotch、RapidAPI和Paw。 详细介绍&#xff1a;2024 年 8 个最佳 API 设计工具推荐

26.校园快递物流管理系统(基于SSM和Vue的Java项目)

目录 1.系统的受众说明 2.相关技术 2.1 JAVA简介 2.2 SSM三大框架 2.3 MyEclipse开发环境 2.4 Tomcat服务器 2.5 MySQL数据库 2.6访问数据库实现方法 3. 系统分析 3.1 需求分析 3.2 系统可行性分析 3.2.1技术可行性&#xff1a;技术背景 3.2.2经济可行性…

JAVA学习日记(十三)常用算法API+Lambda表达式

一、Arrays 操作数组的工具类 import java.util.Arrays; import java.util.Comparator;public class Main {public static void main(String[] args){int[] arrnew int[]{1,2,3,4,5,6,7,8,9};//将数组变为字符串 toStringSystem.out.println(Arrays.toString(arr)); //[1, 2, …

实现linux定时备份数据至群晖NAS

实现LINUX定期备份数据至NAS中 前置条件 linux群晖NAS 1.NAS准备工作 首先确保NAS系统已经处于配置成功的状态 在控制面板–>文件服务–>rsync下启用rsync服务 启用之后会生成一个NetBackup的文件夹 2.在linux系统中测试一下rsync的备份命令 rsync -av -e ssh /li…