理解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跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
一文秒懂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调用dll的实例操作动画与代码分享
2012/08/14 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python多进程编程常用方法解析
2020/03/26 Python
Python面向对象实现方法总结
2020/08/12 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
人身损害赔偿协议书范本
2014/09/27 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
毕业生政审意见范文
2015/06/04 职场文书
离婚协议书格式范本
2016/03/18 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
JS实现九宫格拼图游戏
2022/06/28 Javascript
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android