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

前端 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来判断对象是否在一个原型链上。

相关文章:

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题: function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…...

Java中的不可变集合:性能与安全并重的最佳实践

Java中的不可变集合:性能与安全并重的最佳实践 在现代软件开发中,集合类(如List、Set和Map)是Java开发者的日常工具。它们用于存储和操作数据,能极大地简化开发工作。但随着并发编程和大规模应用的广泛使用&#xff0…...

RandomWords随机生成单词

from random_words import RandomWords rw RandomWords() r rw.random_word() print(r) 更多How to use — random_words documentation (randomwords.readthedocs.io) li LoremIpsum()# 这行代码创建了一个 LoremIpsum 类的实例。li.get_sentence()# 这个方法返回一个随机…...

从零开始使用Intel的AIPC使用xpu加速comfyui

Intel的AIPC使用xpu加速跑comfyui 环境安装python环境搭建驱动及oneAPI安装创建python环境验证环境是否生效 ComfyUI的安装下载、汉化comfyui下载checkpoint 测试使用xpu加速测试使用cpu执行测试 环境安装 python环境搭建 直接下载Anaconda 下载地址 安装好后,通…...

PyQt入门指南五十二 版本控制与协作开发

在开发PyQt应用程序时,版本控制和协作开发是提高开发效率和项目可维护性的重要手段。本指南将介绍如何使用Git进行版本控制,以及如何使用GitHub进行协作开发。 版本控制基础 Git简介:Git是一种分布式版本控制系统,用于跟踪代码变…...

思考:linux Vi Vim 编辑器的简明原理,与快速用法之《 7 字真言 》@ “鱼爱返 说 温泉啊“ (**)

Linux vi/vim | 菜鸟教程 https://zhuanlan.zhihu.com/p/602675406 Linux Vim编辑器的基本使用_vim文本编辑器-CSDN博客 这里提出使用 vi / vim 进行简单的编辑操作的原因,主要是在容器镜像中,普遍都是使用这个。 在 linux 服务器应用场景&#x…...

共筑开源技术新篇章 | 2024 CCF中国开源大会盛大开幕

在这个技术革新日新月异的时代,开源精神如同点燃创新火焰的火种,照亮了无数技术探索者的征途。2024年11月9日,备受瞩目的2024 CCF中国开源大会在深圳这座充满活力的创新之城盛大开幕。这场开源领域的顶级盛事,以“湾区聚力 开源启…...

SpringBoot(十八)SpringBoot集成Minio

项目上传文件集成一下Minio,下面是我在项目中集成Minio的全过程。 首先介绍一下Minio:MinIO是高性能的对象存储,单个对象最大可达5TB。适合存储图片、视频、文档、备份数据、安装包等一系列文件。是一款主要采用Golang语言实现发开的高性能、分布式的对象存储系统。客户端支…...

ODOO学习笔记(3):Odoo和Django的区别是什么?

Odoo和Django都是基于Python的开源框架,但它们的设计目标和用途有所不同: 设计目标和用途: Odoo:Odoo是一个企业资源规划(ERP)系统,它提供了一套完整的商业管理软件,包括会计、库存…...

持续收集解决VCcode各种报错的方法

在学习中我们经常会发生各种各样的报错, 1、pip 安装失败的报错 类似下面的 我们有时候纠结在上面会纠结好久,浪费很多时间。(什么轮子我不知道) 常见的解决方法: s-1:先uninstall packing,再重新装一次(有时候会重…...

Windows下使用adb实现在模拟器中ping

文章目录 前言安装adb执行adb命令查找模拟器设备链接模拟器命令行执行ping命令 总结 前言 有时在模拟器中测试应用不像在Windows这种开发环境中那么方便,毕竟Windows或者Linux下的工具五花八门,可以满足各种测试需求,比如应用在模拟器中无法…...

c++之deque和priority_queue

Deque 文档&#xff1a;https://legacy.cplusplus.com/reference/deque/deque/?kwdeque 相关接口&#xff1a; push_back():在尾部插入 #include <iostream> #include <deque>int main () {std::deque<int> mydeque;int myint;std::cout << "…...

SDL渲染器和纹理

文章目录 渲染器 (SDL_Renderer)纹理 (SDL_Texture)代码 渲染器 (SDL_Renderer) &#xff1a;它是渲染内容的接口&#xff0c;负责将内容绘制到窗口中。通过SDL_CreateRenderer创建&#xff0c;可以设置渲染器的背景颜色、绘图颜色、透明度等。所有绘图操作&#xff08;如绘制…...

基于Matlab 火焰识别技术

课题介绍 森林承担着为人类提供氧气以及回收二氧化碳等废弃气体的作用&#xff0c;森林保护显得尤其重要。但是每年由于火灾引起的事故不计其数&#xff0c;造成重大的损失。如果有一款监测软件&#xff0c;从硬件处获得的图像中监测是否有火焰&#xff0c;从而报警&#xff0…...

Qt 监控USB设备的插入和移除

Qt 监控USB设备的插入和移除 flyfish Ubuntu22.04 Qt 6.2.4 CMakeLists.txt 内容 # 指定 CMake 的最低版本要求 cmake_minimum_required(VERSION 3.16)# 定义项目的名称和使用的编程语言 project(USBMonitor LANGUAGES CXX)# 开启自动 UIC&#xff0c;MOC 和 RCC 工具 set(…...

终于弄懂了Python自定义模块与代码复用

自定义模块与代码复用 在编写Python代码时&#xff0c;很多时候我们会遇到需要多次使用相同功能的情况。这时候&#xff0c;模块化编程就显得尤为重要。通过将常用的功能代码放入单独的模块中&#xff0c;我们可以轻松地进行代码复用&#xff0c;避免重复编写相同的代码&#…...

从无音响Windows 端到 有音响macOS 端实时音频传输播放

以下是从 Windows 端到 macOS 端传输音频的优化方案&#xff0c;基于上述链接中的思路进行调整&#xff1a; Windows 端操作 安装必要软件 安装 Python&#xff08;确保版本兼容且已正确配置环境变量&#xff09;。安装 PyAudio 库&#xff0c;可通过 pip install pyaudio 命令…...

直方图均衡化及Matlab实现

文章目录 直方图均衡化关键点及思路Matlab实现 直方图均衡化 直方图均衡化是一种图像增强技术&#xff0c;主要用于增强图像的对比度&#xff0c;特别是当图像的有用数据的对比度接近时效果显著。通过改变图像的直方图分布&#xff0c;直方图均衡化能够使图像的灰度值更加接近…...

设备接入到NVR管理平台EasyNVR多品牌NVR管理工具/设备的音视频配置参考

NVR管理平台EasyNVR是一款功能强大的安防视频监控平台&#xff0c;能够轻松实现视频流的导入、录像、存储和回放等功能。在将设备接入到海康NVR管理平台EasyNVR时&#xff0c;视音频配置是确保视频监控效果的重要步骤。本文将详细介绍如何将设备接入到EasyNVR平台&#xff0c;并…...

后端:Aop 面向切面编程

文章目录 1. Aop 初步学习面向切面编程&#xff0c;EnableAspectJAutoProxy2. AOP的核心概念3. 前置通知&#xff08;Before&#xff09;4. 后置通知&#xff08;After&#xff09;5. 返回通知&#xff08;AfterReturning&#xff09;6. 异常通知&#xff08;AfterThrowing&…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...