理解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 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
JavaScript实现单点登录的示例
Sep 23 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
js如何验证密码强度
2020/03/18 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Django如何使用redis作为缓存
2020/05/21 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
创建无烟单位实施方案
2014/03/29 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
企业公益活动策划方案
2014/08/24 职场文书
邀请函样本
2015/02/02 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis