前端 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.mzph.cn/bicheng/60594.shtml

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

相关文章

NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍

一.前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本 1. NodeJS的安装 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环 境,可以使 JavaScript 运行在服务…

软件工程概论项目(二),node.js的配置,npm的使用与vue的安装

上一章我们配置了git仓库,这一章我们来配置项目需要用的一些其他的环境。 放一个思维导图在这里,可以参考一下,很不全面,没有参考价值,反正我先这样写吧。 参考了这个nodejs的配置,写的很好:https://blog.c…

什么是crm?3000字详细解析

在现代商业环境中,客户关系管理(CRM)已经成为企业驱动成功的关键工具。在复杂且竞争激烈的市场中,如何有效地管理客户关系、提升客户满意度,并增加客户忠诚度,越来越成为企业迫切关心的问题。而CRM系统&…

3.1_文件上传漏洞

文件上传漏洞 文件上传漏洞原理:未对用户提交的文件进行严格校验,就将恶意文件解析执行,导致用户可以提交恶意的文件进行攻击; 利用方式(危害): 1). 上传 HTML/SVG 进行 XSS 攻击&…

C++入门基础知识140—【关于C++ 类构造函数 析构函数】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 类构造函数 & 析构函数的相关内容…

Notepad++的完美替代

由于Notepad的作者曾发表过可能在开发者代码中植入恶意软件的言论,他备受指责。在此,我向大家推荐一个Notepad的完美替代品——NotepadNext和Notepad--。 1、NotepadNext NotepadNext的特点: 1、跨平台兼容性 NotepadNext基于Electron或Qt…

为什么RNN(循环神经网络)存在梯度消失和梯度爆炸?

1️⃣ 原理分析 RNN前向传播的公式为: x t x_t xt​是t时刻的输入 s t s_t st​是t时刻的记忆, s t f ( U ⋅ x t W ⋅ s t − 1 ) s_tf(U\cdot x_tW\cdot s_{t-1}) st​f(U⋅xt​W⋅st−1​),f表示激活函数, s t − 1 s_{t-1} …

NUXT3学习日记二(样式配置、引入组件库、区分在服务端还是在客户端渲染)

上一章已经给大家分享官网下载的nuxt3了,下面正式进入我所要说的内容吧 一、初始化样式 想必大家从我的git下载下来的nuxt3,能看到nuxt.config.ts这个文件了吧。 这里我们有两种css配置方式 1、css:[~/assets/base.scss] 这种方式不能在scss文件中定义…

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题:《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接:DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文(小声bb:华…

计算机视觉 ---图像模糊

1、图像模糊的作用: 减少噪声: 在图像获取过程中,例如通过相机拍摄或者传感器采集,可能会受到各种因素的干扰,从而引入噪声。这些噪声在图像上表现为一些孤立的、不符合图像主体内容的像素变化,如椒盐噪声&…

串口DMA接收不定长数据

STM32F767—>串口通信接收不定长数据的处理方法_stm32串口超时中断-CSDN博客 STM32-HAL库串口DMA空闲中断的正确使用方式解析SBUS信号_stm32 hal usart2 dma-CSDN博客 #define USART1_RxBuffSize 100 extern DMA_HandleTypeDef hdma_usart1_rx; //此处声明的变量在…

web实验3:虚拟主机基于不同端口、目录、IP、域名访问不同页面

创建配置文件: 创建那几个目录及文件,并且写内容: 为网卡ens160添加一个 IPv4 地址192.168.234.199/24: 再重新激活一下网卡ens160: 重启服务: 关闭防火墙、改宽松模式: 查看nginx端口监听情况:…

Jmeter中的监听器(二)

5--JSR223 Listener 用途 自定义数据处理:使用脚本语言处理测试结果,实现高度定制化的数据处理和分析。实时监控:实时处理和显示测试结果。集成外部系统:将测试结果发送到外部系统进行进一步处理和分析。日志记录:记…

计算机组成原理——进位计数制

1.认识不同进制 通常的我们日常生活中用到的都是十进制,比如买东西或者期末成绩等等,当然肯定不止这一种进制方法,相关的还有二进制、八进制、十六进制,还有古罗马数字,通常古罗马数字近似可以看作是五进制的数&#x…

function and task

任务和函数 在Verilog语言中提供了任务和函数,可以将较大的行为级设计划分为较小的代码段,允许设计者将需要在多个地方重复使用的相同代码提取出来,编写成任务和函数,这样可以使代码更加简洁和易懂。 1.1任务 任务的定义 任务定义…

【C++】用红黑树封装set和map

在C标准库中,set容器和map容器的底层都是红黑树,它们的各种接口都是基于红黑树来实现的,我们在这篇文章中已经模拟实现了红黑树 ->【C】红黑树,接下来我们在此红黑树的基础上来看看如何封装set和map。 一、共用一颗红黑树 我…

类与实例

1 问题如何理解类与实例? 2 方法 类与实例 类(class)的概述:用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。 类是一类事物,实例是具体的一个事物。 编程与生活是相通的&#xff0…

2024/11/4 计网强化

10: 17: 22: 09: 11: 12: 13: 14: 15: 18: 19: 20: 21: 16:

力扣104 : 二叉树最大深度

补:二叉树的最大深度 描述: 给定一个二叉树 root ,返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 何解? 树一般常用递归:递到叶子节点开始倒着处理

机器情绪及抑郁症算法

🏡作者主页:点击! 🤖编程探索专栏:点击! ⏰️创作时间:2024年11月12日17点02分 点击开启你的论文编程之旅https://www.aspiringcode.com/content?id17230869054974 计算机来理解你的情绪&a…