理解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中的事件和动画(下:动画篇)
Mar 24 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
keras 读取多标签图像数据方式
2020/06/12 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
应届生服装设计自我评价
2013/09/20 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
教学实验楼管理制度
2014/02/01 职场文书
水电站项目建议书
2014/05/12 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL