通俗讲解javascript的实例对象、原型对象和构造函数以及它们之间的关系

news2024/11/15 17:39:02

今天通俗讲解一下js的对象,因为要通俗,所以可能描述不甚准确。

在js中,想要创建一个对象,首先要写出构造函数(跟其它的语言不太一样哦,其它语言一般都会先写一个class 类名)。

构造函数写法如下(其实就是一个普通函数,不过,我们一般遵循类名第一个字母是大写的风俗,写成Person,其实写成person也没问题):

//Person是构造函数
function Person(name,age)
{
    this.name=name;
    this.age=age;
}

有了构造函数后,new一下构造函数,就会产生出一个“实例对象”。

//p1是实例对象
var p1=new Person("张三",20);
console.log(p1)

有了实例对象p1后,p1有一个constructor属性,这个属性等于它的构造函数

console.log(p1.constructor === Person)

这就是一个对应关系:

构造函数--------------new-------------实例对象

实例对象 --------constructor--------构造函数

那么,这个构造函数、实例对象所对应的原型对象(类)是什么呢?

来了,在构造函数Person有一个prototype的属性,它就指向原型对象(类)。

console.log(Person.prototype)

运行结果(原型对象,而且其中有一个构造函数Person。【类中就是应该有一个构造函数】): 

构造函数--------------new-------------实例对象

实例对象 --------constructor--------构造函数

构造函数-----------prototype---------原型对象(类)

原型对象(类)----constructor----构造函数

好,既然有了原型对象(类),那么,我就可以在类中添加方法了。

//在原型对象(类)中添加方法
Person.prototype.eat=function(){
    console.log('吃饭');
}

既然类中有了新的方法,那么刚才生成的实例对象p1,也应该有这个新方法了,确认一下:

运行结果(证明是可以的): 

 至此,我们建立了如下关系:

构造函数--------------new-------------实例对象

实例对象 --------constructor--------构造函数

构造函数-----------prototype---------原型对象(类)

原型对象(类)----constructor----构造函数

似乎缺少点什么?

是的,那就是实例对象和原型对象(类)之间的关系。

刚才的测试我们已经可以确认,如果在类中添加了新的方法,对应的实例对象中,也可以使用这个方法,那么实例对象和原型对象(类)之间怎么建立的这种联系呢?

直接给出:实例对象中有一个__proto__属性,指向了原型对象(类)。

实例对象 ---------__proto__---------原型对象(类)。

下面有来了新的问题,实例对象p1中,并没有eat的方法【eat方法是原型对象(类)中的方法】,如下图

那么,实例对象(p1)为何能使用原型对象类(Person.prototype)中的方法呢?

方法:实例对象先看自己有没有这个方法,若有,执行;若没有,通过 __proto__找到上一级类看是否有方法,如果还没有,继续往上找,直至类成为null。

这就是原型链。

本质上是种“类的继承”的解决方法。

 所以,全面的关系如下:

构造函数-------------->new------------->实例对象

实例对象 -------->constructor-------->构造函数

构造函数----------->prototype--------->原型对象(类)

原型对象(类)---->constructor---->构造函数

实例对象 --------->__proto__>---------原型对象(类)

最后再说一点,其实可以在浏览器的console中看到原型链的情况。

构造函数Person生成的实例对象p1,只有age,name,sleep(),如果运行p1.eat(),其会通过__proto__找到它的原型函数中的eat()执行。

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

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

相关文章

【PGCCC】 复合索引和部分索引,竟然能让查询速度提升 275 倍!

索引对于加速数据库查询和提高 PostgreSQL 应用程序的性能至关重要。但是,并非所有索引都以相同的方式发挥作用。复合索引和部分索引是两种常见类型,每种类型都有不同的用途和对性能的影响。本文我们将深入探讨复合索引和部分索引是什么、它们如何运作以…

关于在vue2中给el-input等输入框的placeholder加样式

::v-deep {.el-input--medium,.el-input__inner {height: 100%;background: #163670;border: 1px solid #4cc0f6;border-radius: 6px 6px 6px 6px;&::placeholder {color: #13EFFF;}} } 效果如下: .el-date-editor .el-range-input{&::placeholder {color:…

SAP MIGO M7146不支持移动原因

移动类型 Z91 查看配置:Z91 匹配的原因没有921 倒是Z92的原因里面有921 那解决方案有2种,但是要根据具体业务要求来 1、审视一下是否移动原因用错了 ?换一个移动原因 2、确实是这个移动类型 要用到这个移动原因 ,那就在上图 移…

Python编码系列—Python观察者模式:实现事件驱动架构的利器

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

【数字ic自整资料】SV约束constraint

参考链接: SV--随机约束(一)_sv constraint-CSDN博客 SV--随机约束(二)_sv constraint f循环-CSDN博客 [SV]Constraint 遇到的问题_父类和子类 constraint-CSDN博客 目录 1、随机化的概念理解 2、约束(constrain…

基于报位时间判断船舶设备是否在线,基于心跳时间判断基站网络是否在线

文章目录 引言I 在线船舶查询在线或者离线船舶显示在线状态统计在线船舶II 树状显示船舶设备数据结构统计船舶设备在线数和总数III 基站网络是否在线IV 知识扩展统计某个key的数据,例如统计船舶分类下的在线船舶MyBatis引言 本文采用的数据库是SQL Server,开发语言为Java。 …

无线协议wlan在华为模拟器中的实现

无线技术 wifi6:标准为802.11; wifi发展趋势: vlan基本概念: wlan组网架构: 1)fat胖AP;能够独立工作,可以单独配置;小型网络使用,功能少; 2)fit瘦APAC:适用大型网络…

《深度学习》—— PyTorch的介绍及PyTorch的CPU版本安装

文章目录 一、PyTorch的简单介绍二、pytorch的CPU版本安装三、 torch、torchvision、torchaudio 三个库的介绍 一、PyTorch的简单介绍 PyTorch是一个由Facebook AI实验室开发的深度学习框架,它基于Python,并提供了高效的GPU加速和灵活的模型定义能力。1…

基于vue框架的传统服饰剪裁交流平台5m953(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能:用户,服装分类,服装资讯 开题报告内容 基于Vue框架的传统服饰剪裁交流平台开题报告 一、研究背景与意义 随着全球化进程的加速,文化多样性的保护与传承日益受到重视。传统服饰作为各民族历史文化的瑰宝,不仅承载…

阅读记录:Gradient Episodic Memory for Continual Learning

1. Contribution 提出了一组指标来评估模型在连续数据上的学习情况。这些指标不仅通过测试准确性来表征模型,还通过其跨任务迁移知识的能力来表征模型。针对持续学习任务,提出了GEM模型(Gradient Episodic Memory),它…

C++中stack类和queue类

感谢大佬的光临各位,希望和大家一起进步,望得到你的三连,互三支持,一起进步 数据结构习题_LaNzikinh篮子的博客-CSDN博客 初阶数据结构_LaNzikinh篮子的博客-CSDN博客 收入专栏:C_LaNzikinh篮子的博客-CSDN博客 其他专…

基于MT79815G CPE 板子上挂usb3.0的5G 模块,WIFI能跑多少速度呢

关于MT79815G CPE 板子上挂usb3.0的5G 模块,WIFI能跑多少速度的问题,我们以启明智显 ZX7981P智能无线接入型路由器(CPE)挂广合通5G模组为例说明: 一般来说,用 ZX7981P,通过软加速,U…

Java:列表操作

目录 1、判断列表是否为空或者为NULL2、列表包含3、列表排序4、列表截取5、列表合并6、列表求极值7、列表转字符串8、列表去重的四种方式9、列表转数组 1、判断列表是否为空或者为NULL Optional.ofNullable(list).orElse(Collections.emptyList()).isEmpty() // true为空或NU…

【JAVA-数据结构】时间空间复杂度计算案例

接着上一篇文章&#xff0c;对应举一些例子。 1.时间复杂度 【实例1】 // 计算func2的时间复杂度&#xff1f; void func2(int N) {int count 0;for (int k 0; k < 2 * N ; k) {count;} int M 10;while ((M--) > 0) {count;} System.out.println(count); } 基本操作…

在云渲染中3D工程文件安全性怎么样?

在云渲染中&#xff0c;3D工程文件的安全性是用户最关心的问题之一。随着企业对数据保护意识的增强&#xff0c;云渲染平台采取了严格的安全措施和加密技术&#xff0c;以确保用户数据的安全性和隐私性。 云渲染平台为了保障用户数据的安全&#xff0c;采取了多层次的安全措施。…

电子信息制造业数据安全如何防护?有什么加密方案?

电子信息制造业数据加密解决方案 问题 1.电子文档&#xff08;源代码、设计图纸、设计方案等&#xff09;均要做数据保护措施&#xff0c;防止内部人员有意或无意造成数据泄露&#xff1b; 2.与外部企业之间往来的外发文件&#xff0c;管控不当&#xff0c;容易造成泄密&…

工业能源物联网的建设与维护该如何实现

随着全球对可持续发展的重视&#xff0c;智能电网和微电网的应用逐渐成为能源转型的重要方向。在新型电力系统中&#xff0c;负荷侧资源不再是单纯消耗的“消费者”&#xff0c;而是既消耗电能又可生产电能的“产消者”。比如&#xff0c;电力用户利用屋顶建设光伏发电&#xf…

防火墙详解(二)通过网页登录配置华为eNSP中USG6000V1防火墙

配置步骤 步骤一 打开eNSP&#xff0c;建立如下拓扑。防火墙使用&#xff1a;USG6000V1。 Cloud的作用是通过它可以连接本地的网卡&#xff0c;然后与我们的电脑进行通信。 由于防火墙USG6000V&#xff0c;不能直接开启&#xff0c;需要的导入包&#xff0c;所以需要在华为官网…

可视挖耳勺神器怎么样?可视耳勺热销第一名品牌!

耳道作为我们身体的重要部分&#xff0c;它的清洁健康很重要。传统挖耳勺的材质偏硬、表面摩擦力大并且在不可视的情况下进行盲目掏耳&#xff0c;很容易出现刮伤耳道肌肤导致耳朵出血感染等意外。而网上出现了一种新型的掏耳神器--可视耳勺&#xff0c;它到底怎么样&#xff1…

Java语言程序设计基础篇_编程练习题**18.38 (递归树)

目录 题目&#xff1a;**18.38 (递归树) 代码示例 代码逻辑解释 类定义和变量初始化 main 方法 start 方法 drawRecursiveTree 方法 输出结果 题目&#xff1a;**18.38 (递归树) 编写一个程序来显示一个递归树&#xff0c;如图18-20所示 代码示例 编程练习题18_38Re…