理解JavaScript中的对象


Posted in Javascript onAugust 25, 2020

JavaScript中对象的简介

我们知道生活中客观存在的一切事物皆为对象,那在程序中的对象是什么样子呢?我们可以将程序中的对象理解为客户端世界中的对象在一种计算机中的一种表示方式.所有的编程语言中提到的对象其性质都是类似的,它往往对应内存中的一块区域,在这个区域中存储对象的属性或方法信息。

JavaScript中对象的创建

基于{}符号创建对象

在JS中我们可以直接基于{}定义对象,在对象内容定义属性和方法,例如:

理解JavaScript中的对象

在JS中我们可以将对象理解为用于封装属性和方法的一个结构体,例如

理解JavaScript中的对象

如果需要反复创建多个相同结构的对象时,用{}代码就很冗余——重复。也不便于维护!

基于构造函数创建对象

假如在JS中我们希望非常方便的定义多个结构相同,但属性值不同的对象,可以直接基于构造函数( 定义同一类型多个对象的相同属性结构的特殊函数)进行对象创建,例如:

理解JavaScript中的对象

建议:只要反复创建多个相同结构的对象,都要用构造函数来创建对象.

在实际应用中我们尽量不要在构造函数中再去定义函数,例如:

理解JavaScript中的对象

这样在构建对象时,可能每次都需要开辟额外的函数空间.

JavaScript中的对象特性

封装特性

JS中的对象用于封装属性和方法.如图所示:

理解JavaScript中的对象

继承特性

JS中为了实现属性或方法的可重用性,提供了一种继承机制,

这种继承的方式需要借助Prototype对象去实现,Prototype对象是在定义构造函数时自动创建,用于存储所有共有属性和方法的一个对象,所有通过此构造函数构建的对象都继承这个原型对象.

构造函数中的原型对象分析,如图所示:

理解JavaScript中的对象

原型对象(ProtoType)对象的继承,如图所示:

理解JavaScript中的对象

在对象中添加共有属性,如图所示:

理解JavaScript中的对象

在对象中添加共有方法的.如图所示:

理解JavaScript中的对象

原型链是由多级父对象(原型对象)逐级继承形成的链式结构。这个原型链保存着一个对象可以访问的所有父级原型对象,以及这个对象可访问到的所有属性和方法。

多态特性

多态一般指同一个函数(行为),在不同情况下表现中的不同的状态。从应用上有两种形式,分别为重载和重写。

重载的定义:一个函数,根据传入的实参值不同,执行不同的逻辑。

重写的定义:在子对象中定义一个和父对象中成员同名的成员。只要从父对象继承来的东西不好用,就用重写自己的!

在子对象中定义一个和父对象中成员同名的自有成员,例如:

理解JavaScript中的对象

JavaScript内置对象类型

对象类型简介

JavaScript中对象的类型可以理解为构造方法和原型对象的结合体,当我们需要查看其对象类型时,可以通过构造方法名.

JS中内置的对象类型

JS中有11种内置对象类型,分别为String, Number, Boolean, Array, Date, RegExp, Math(对象), Error, Function, Object, global(对象)

总结(Summary)

本小节主要是对JS中对象做了简介,并通过实践方式分析JS中对象的创建,对象特性以及对象内置类型。

以上就是理解JavaScript中的对象的详细内容,更多关于JavaScript 对象的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript中json使用自己总结
Aug 13 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
JS数组的赋值介绍
Mar 10 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
js实现电灯开关效果
Jan 19 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 #Javascript
node.js基础知识汇总
Aug 25 #Javascript
基于JS实现快速读取TXT文件
Aug 25 #Javascript
Vue实现简单的拖拽效果
Aug 25 #Javascript
浅谈JavaScript节流和防抖函数
Aug 25 #Javascript
JS实现拖动模糊框特效
Aug 25 #Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
javascript与cookie 的问题详解
2013/11/11 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python functools模块学习总结
2015/05/09 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Django之路由层的实现
2019/09/09 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
公司庆典邀请函范文
2014/01/13 职场文书
优秀护士获奖感言
2014/02/20 职场文书
教师远程培训感言
2014/03/06 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
老乡聚会通知
2015/04/23 职场文书
灵魂歌王观后感
2015/06/17 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript