web前端-JavaScript中的对象(Object)

简介: web前端-JavaScript中的对象(Object)

对象是什么?


对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性


在上一节我们说到JavaScript中有许多数据类型,有基本数据类型和引用数据类型,在这里我可以理解为只要不是基本数据类型,都属于对象。


对象的分类


内建对象


由ES标准中定义的对象,在任何的ES的实现中都可以使用。


宿主对象


由js的运行环境提供的对象,目前来讲主要指由浏览器提供的对象比如BOM,DOM


自定义对象


有开发人员自己创建的对象。


创建对象


  • 使用new关键字调用的函数,是构造函数constructor,构造函数是专门用来创建对象的函数。


<script>
//创建一个对象
        var inf = new Object();
</script>


  • 直接创建


<script>
//创建一个对象
        var inf = {};
</script>


操作对象中的属性


添加和修改属性


语法:对象名.属性名=属性值


删除一个属性


语法:delete 对象名.属性名


查找对象属性值


语法:对象名.属性名


image.png


属性名和属性值


属性名


  • 对象的属性名不强制遵守标识符的规范


  • 无论什么名字都可取


  • 在取一些特殊的属性名,添加到对象中时不能使用.的方式来操作。而是对象['属性名'] = 属性值


image.png


使用[]这种形式去操作属性,更加的灵活,


[]中可以直接传递一个变量,这样变量值是多少就会读取那个属性。


image.png


属性值


JavaScript对象的属性值,可以是任意的数据类型。甚至也可以是一个对象。


image.png


判断对象中的属性是否存在(in运算符)


检查一个属性是否在一个对象中。


语法:'属性名' in 对象名


返回值为true/false


image.png


JavaScript中的数据类型的存储原理


基本数据类型存储原理:js中的变量都是保存到栈内存中的,基本数据类型的值直接在栈内存中存储,值与值之间是独立存在,修改一个变量不会影响其他的变量


image.png

https://ucc.alicdn.com/images/user-upload-01/74cec6b357f34c338911e4f9e16e6806.gif#pic_center


实例:


image.png


对象的存储原理:对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响。


  1. 变量保存的为对象的内存地址


image.png

https://ucc.alicdn.com/images/user-upload-01/815ba19fdf854d0dba4f25c21d2a1f54.gif#pic_center


  1. 给对象添加属性,并将其赋值给另一个变量,另一个变量也是保存的是该对象的内存地址。


image.png

https://ucc.alicdn.com/images/user-upload-01/8f2da65d05c84a709dd1ab2e72ec6e8d.gif#pic_center


  1. 用变量修改对象属性值,实际上无论用那个变量修改属性值,对象的属性值都改变了。


image.png

https://ucc.alicdn.com/images/user-upload-01/164a00b206384ede9b748f5400581118.gif#pic_center


实例:


image.png


比较两个对象时,需要看的是它的内存地址,内存地址不同的对象即使属性名相同,两个对象也毫不相干。

目录
相关文章
|
1月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
266 108
|
24天前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
217 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
3月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
38 2
|
3月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
74 1
|
5月前
|
JavaScript 前端开发 API
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5137 24
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
173 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
安全 IDE Java
重学Java基础篇—Java Object类常用方法深度解析
Java中,Object类作为所有类的超类,提供了多个核心方法以支持对象的基本行为。其中,`toString()`用于对象的字符串表示,重写时应包含关键信息;`equals()`与`hashCode()`需成对重写,确保对象等价判断的一致性;`getClass()`用于运行时类型识别;`clone()`实现对象复制,需区分浅拷贝与深拷贝;`wait()/notify()`支持线程协作。此外,`finalize()`已过时,建议使用更安全的资源管理方式。合理运用这些方法,并遵循最佳实践,可提升代码质量与健壮性。
170 1
|
6月前
|
Java
课时78:Object类的基本概念
Object类的主要特点是可以解决参数的统一问题,使用object类可以接受所有的数据类型。 1. Object类简介 2. 观察Object类接收所有子类对象 3. 使用Object类接收数组
131 0
|
9月前
|
JSON Java Apache
Java基础-常用API-Object类
继承是面向对象编程的重要特性,允许从已有类派生新类。Java采用单继承机制,默认所有类继承自Object类。Object类提供了多个常用方法,如`clone()`用于复制对象,`equals()`判断对象是否相等,`hashCode()`计算哈希码,`toString()`返回对象的字符串表示,`wait()`、`notify()`和`notifyAll()`用于线程同步,`finalize()`在对象被垃圾回收时调用。掌握这些方法有助于更好地理解和使用Java中的对象行为。
111 8

热门文章

最新文章