理解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 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 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读取PPT文件的方法
2015/12/10 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
详解Vue中组件的缓存
2019/04/20 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
python list语法学习(带例子)
2013/11/01 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
如何理解委托
2012/01/06 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
保护环境倡议书
2014/04/14 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
python画条形图的具体代码
2022/04/20 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle