JS面向对象之构造函数和原型(2)

news/2024/5/18 2:37:13/文章来源:https://blog.csdn.net/LQlove1/article/details/127165862

文章目录

  • 1.构造函数
    • 1-1.使用构造函数面向对象
    • 1-2.构造函数里面的原型prototype
    • 1-3.对象原型__proto__
    • 1-4.constractor构造函数
    • 1-5.构造函数、实例、原型对象三者之间的关系

1.构造函数

1-1.使用构造函数面向对象

  • ES6之前对象的公共部分,不是使用类解决的,而是使用构造函数来创建对象的公共部分
  • 使用构造函数会有一个问题,就是创建实例对象的时候,如果构造函数里面有方法,创建多少个实例对象,就会在内存里开辟多少个地址用来存储方法
  • 用console.log(lq.say === wy.say);来证明实例对象的方法不一样,等于false,因为他们方法的地址不一样
    请添加图片描述
 function Star(name,age){this.name = name this.age = agethis.say = function (){console.log('hello');}}const lq = new Star('lq',22)const wy = new Star('wy',22)lq.say()wy.say()console.log(lq.say === wy.say);</script>

1-2.构造函数里面的原型prototype

  • prototype就是用来解决构造函数创建实例对象时,方法的存储地址的问题
  • prototype用来共享构造函数里面的方法
function Star(name,age){this.name = name this.age = age}Star.prototype.say = function(){console.log('hello');}const lq = new Star('lq',22)const wy = new Star('wy',22)lq.say()wy.say()console.log(lq.say === wy.say);

请添加图片描述
方法存到构造函数的prototype中,创建实例对象的时候就会共享原型prototype里的一个方法

1-3.对象原型__proto__

  • 为什么lq实例对象能访问到prototype上的say方法,因为lq这个实例对象有一个__proto__对象原,指向的就是Star 的prototype
  • proto 等价于 prototype 但是__proto__不能拿来赋值等使用

1-4.constractor构造函数

  • 如果说我们修改了原来的原型对象 ,给原型对象赋值了一个对象,这个时候就要用constractor指向原来的构造函数
function Star(name,age){this.name = name this.age = age}// Star.prototype.say = function(){//     console.log('hello');// }// Star.prototype.sing = function(){//     console.log('sing');// }Star.prototype = {// costractor:Star,say:function(){console.log('hello')},sing:function(){console.log('sing')}}const lq = new Star('lq',22)const wy = new Star('wy',22)lq.say()wy.say()console.log(lq.__proto__);console.log(Star.prototype);

用对象来封装prototype的方法后,在log__proto__或者prototype得到的就是一个对象,并且里面没有constactor构造函数请添加图片描述

Star.prototype = {// costractor:Star,say:function(){console.log('hello')},sing:function(){console.log('sing')}}

在封装的对象里面使用constractor指向我们构造函数后,log出来的对象里面就有constractor了
请添加图片描述

1-5.构造函数、实例、原型对象三者之间的关系

请添加图片描述

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

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

相关文章

沉睡者IT - [短视频运营] 抖音短视频成SEO新风口

下面会从以下5个企业关心的问题来聊聊&#xff0c;如果有什么不明白的地方可以评论交流。 一、什么是SEO? 二、为什么要做抖音SEO? ​三、哪些企业适合做抖音SEO? 四、抖音SEO怎么做? 五、影响抖音排名的因素有哪些? 一、什么是SEO? SEO是“搜索引擎优化”英文单词首字母…

C++ 函数学习笔记

前言&#xff1a;主要是自己学习过程的积累笔记&#xff0c;所以跳跃性比较强&#xff0c;建议先自学后拿来作为复习用。 文章目录1 函数基础2 参数传递2.1 const 形参和实参2.2 引用形参2.3 数组形参2.4 数组引用形参2.5 多维数组形参2.6 可变形参3 返回类型和 return 语句3.1…

ASP.NET Core--依赖注入

文章目录依赖注入什么是依赖注入什么是依赖什么是注入依赖注入解决的问题.Net Core DI替换默认服务容器依赖注入 什么是依赖注入 什么是依赖 Rely类 public class Rely {public Task Test(string testMessage){Console.WriteLine(testMessage);return Task.FromResult(0);}…

【QT学习】如何绘制圆角窗口?

文章目录前言一、实现效果二、基础知识1.QBitmap类2.QPainter类3.setMask函数三、实现代码总结前言 在使用QT创建窗口时&#xff0c;所创建出来的默认窗口都是矩形的。当我们隐藏默认标题栏&#xff0c;想自己绘制自定义的标题栏时&#xff0c;就会发现矩形的窗口过于棱角分明。…

加深印象篇之Servlet

环境配置 需要配置web.xml文件,如图所示: userServlet:是指那个继承自HttpServlet的.java文件的名称 index.jsp:是指那个随意一个.jsp文件名称即可 要使用到Servlet相关类,需要提前将相关导包导入到pom.xml文件中 相关文件的编写 1、JDBCUtils.java文件(存储连接数据库的…

(附源码)计算机毕业设计ssm大数据学院图书管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

web前端面试题附答案016-怎么让顶部轮播图渲染的更快?

一、为什么强调轮播图&#xff1f; 很多时候我们强调用户体验&#xff0c;而这里更多时候我们更强调完美的首屏体验&#xff0c;而现在几乎每个网站顶部第一个大模块就是轮播图。轮播图占得区域最大&#xff0c;图片质量也更高&#xff0c;几乎一张图片的面积&#xff0c;体积就…

【C语言】结构体字节对齐

目录 前言 一、什么是字节对齐&#xff1f; 二、结构体字节对齐 三、#pragma pack()的使用 总结 结语 封面 前言 本教程可能会用到一点汇编的知识&#xff0c;看不懂没关系&#xff0c;知道是那个意思就行了。使用的工具是vs2010。 一、什么是字节对齐&#xff1f; 字节…

【易购管理系统】商品列表

我们来写一下商品管理界面 在Goods.vue中 <template><div><!-- 1.搜索区域 --><div class"header"></div><!-- 2.表格区域展示视图数据 --><div class"wrapper"></div><!-- 3.分页 --></div&g…

数据分析3-pandas

文章目录pandaspandas常用数据类型1.Series的创建pandas读取外部数据pandas读取数据库DataFrame基础字典列表排序索引loc与iloc字符串离散化数据的合并pandas pandas常用数据类型 Series一维数据&#xff0c;带标签数组 DataFrame 二维&#xff0c;Series容器 import pandas …

【ElasticSearch】(分组统计,自动补全,数据同步)

分组统计&#xff0c;自动补全&#xff0c;数据同步1.分组统计1-1.聚合为桶1-2.桶内度量2.RestAPI结果条件过滤数据同步安装MQ声明交换机、队列发送MQ消息接收MQ消息搭建集群修改系统配置集群状态监控1.分组统计 桶(bucket): 桶的作用&#xff0c;是按照某种方式对数据进行分…

关苏哲-洞察问题本质,解决工作难题

高效管理者的三大技能 问题界定的6个问题 1.你所需要解决的问题是什么&#xff1f; 2.你为什么需要解决这个问题&#xff1f; 3.你期待的理想结果是什么&#xff1f; 4.这个问题包括哪些子问题&#xff1f; 5.你曾经尝试过哪些解决方式&#xff1f;其他人呢&#xff1f; 6.这个…

(机器学习-深度学习快速入门)第二章数据分析基本工具正则表达式

文章目录一&#xff1a;说明二&#xff1a;正则表达式学习建议三&#xff1a;Python正则表达式简要说明&#xff08;1&#xff09;基本匹配&#xff08;2&#xff09;元字符①&#xff1a;.号②&#xff1a;字符集③&#xff1a;重复次数④&#xff1a;{}号⑤&#xff1a;(...)…

Spring(二)- 工厂高级

八&#xff1a;控制Spring工厂创建对象的次数 为什么要控制对象创建的次数 &#xff1f; 好处&#xff1a;节省不必要的内存浪费 &#xff01; 九&#xff1a;对象的生命周期 1.什么是对象的生命周期 指的是一个对象创建&#xff0c;存活&#xff0c;消亡的一个完整过程 2.…

基于朴素贝叶斯算法对肿瘤类别分类

目录 朴素贝叶斯算法​编辑 朴素贝叶斯的三种方式 实战——肿瘤类别的分类 朴素贝叶斯算法 贝叶斯定理 贝叶斯定理&#xff08;Bayes Theorem&#xff09;也称贝叶斯公式&#xff0c;是关于随机 事件的条件概率的定理 定理内容&#xff1a; 如果随机事件A1 ,A2 ,...,An构成…

【177】Java利用JNI调用C++编写的DLL,连接海康人脸抓拍机,实现人脸库全量更新。

C开发环境&#xff1a;Visual Studio 2022、windows10 Java开发环境&#xff1a;Java8、idea、windows10 这个DLL功能&#xff0c;是输入一个设备IP&#xff0c;删除设备中的所有以前的人员资料&#xff0c;然后用文件夹中XML和图片的新人脸库资料上传到设备的人脸库中。相当于…

【MySql】常用语法及例题

文章目录字符串处理函数/正则rlikegroup_concat组合查询 & 指定选取union all字符串处理函数/正则 rlike 在MySQL中&#xff0c;RLIKE运算符用于确定字符串是否匹配正则表达式。它是REGEXP_LIKE()的同义词。 如果字符串与提供的正则表达式匹配&#xff0c;则结果为1&…

【网安神器篇】——WPScan漏洞扫描工具

作者名&#xff1a;Demo不是emo 主页面链接&#xff1a;主页传送门创作初心&#xff1a;对于计算机的学习者来说&#xff0c;初期的学习无疑是最迷茫和难以坚持的&#xff0c;中后期主要是经验和能力的提高&#xff0c;我也刚接触计算机1年&#xff0c;也在不断的探索&#xf…

理解递归与循环

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…