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


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

目录
相关文章
|
5天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
8天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
20 2
|
1天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
5天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
5天前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
6天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
18 4
|
5天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
9天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
24 3
|
9天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
16 3
|
9天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
25 2
下一篇
无影云桌面