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


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

目录
相关文章
|
21小时前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
22小时前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
22小时前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效(1),头条前端面试节奏
10款精美的web前端源码的特效(1),头条前端面试节奏
|
22小时前
|
JavaScript 前端开发 算法
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
102 0
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
68 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
9月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
57 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
36 0
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
32 0
|
3天前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
44 1