超详细的JavaScript对象分享,看完就会了
<=> 朋友你好,这里是小毅的前端日记, 分享代码日常 !
<=>本文目标:JavaScript对象详解
<=>卑微的大三前端仔持续输出前端知识,欢迎批评指正 !
<=> 愿你永远青春激昂,风华永驻 !
文章目录
- 一、初识对象
- 1、什么是对象(不是你想的那个对象哦)
- 2、我的第一个对象
- 3、如何调用对象
- 二、创建对象的5种方式及其利弊
- 第一种: 对象字面量模式
- 第二种: 利用new Object 创建对象
- 第三种: 工厂模式
- 第四种:自定义构造函数模式
- 第五种:构造函数+原型的组合模式
- 三、结尾
一、初识对象
1、什么是对象(不是你想的那个对象哦)
对象:
现实生活中:现实具体的一个东西,比如 moyi 、Tom 是一个对象,但是 人 就不是一个对象。
程序中: 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串,数组 函数 数值等等。
对象属性:事务的特征,常用名词来表达,如手机的大小 颜色 尺寸
对象方法:事务的行为,常用动词来表达,如手机可以打电话 发短信
2、我的第一个对象
哦对了,差点忘说,最近刷题的时候有小伙伴在问,有没有好用并且成体系的的刷题资源,
那今天就为大家推荐一款我正在用的、超nice的神器点击访问牛客网
里面的互联网大厂面试真题刷到手软,从基础到进阶,只有你想不到,没有他做不到,赶紧卷起来吧!助你成为offer收割机!
利用字面量大括号 {}创建我的第一个对象(突然,没对象的竖起了中指,哈哈哈)
var obj = {} //创建一个空对象var obj = {// 三个属性name: '莫子',sex: 'man',height: 170,// 一个方法sayHisayHi: function () {console.log('我是一个对象的方法hello world');}}
3、如何调用对象
现在我们已经有一个自己的对象啦,那么该如何调用它呢?
通常调用对象的属性有两种方法:
a. 调用属性
对象名.属性名,例如obj.name
对象名[‘属性名’], 例如obj[‘sex’]
b. 调用方法 对象名.方法名()
但是,在调用属性的时候,我们具体该选择哪一种方法呢?像我这么良心的博主,肯定会为大家找好解决办法滴。
接下来请看以下三点:
1.点【 . 】方法后面跟的必须是一个指定的属性名称,而中括号【[ ]】方法里面可以是变量,即用中括号的是属性名不确定的,例如下列程序只能用中括号
var a = 'aaa';var b = 'bbb';obj[a] = b;console.log(obj[a]);
2.中括号【[ ]】方法里面的属性名可以包含特殊字符 如 - 空格,而点【 . 】方法后面的属性名不可以是特殊字符
// 利用[ ]添加一个set-age属性obj['set-age'] = 22;console.log(obj['set-age']);
3.当动态为对象添加属性时,必须使用 中括号【[ ]】,如obj[shuxing],不可用 点【 . 】方法
二、创建对象的5种方式及其利弊
第一种: 对象字面量模式
步骤: 使用{}创建对象, 同时指定属性/方法
适用场景: 起始时对象内部数据是确定的,适用于只创建一个对象的场景
问题: 如果创建多个对象, 有重复代码
创建一个对象p, 包含属性name, age, 方法setName
var p = {name: 'momo',age: 15,setName: function (name) {this.name = name;console.log('我是函数的名字:' + name)}}p.setName('DJ')console.log(p.age, p.name);
创建一个对象p2, 包含属性name, age, 方法setName
var p2 = {name: 'yiyi',age: 33,setName: function (name) {this.name = name;console.log('我是函数的名字:' + name)}}p2.setName('莫莫3号')console.log(p2);console.log(p2.age, p2.name);
第二种: 利用new Object 创建对象
步骤: 先创建空Object对象, 再动态添加属性/方法
适用场景: 起始时不确定对象内部数据
问题: 语句太多,有点繁杂
var obj = new Object();obj.age = 14;obj.name = 'momo';obj.setAge = function (age) {this.age = age;console.log('我是函数的年龄:' + age)}obj.setAge(12)console.log(obj, obj.age, obj.name);
第三种: 工厂模式
步骤: 通过工厂函数动态创建对象并返回
适用场景: 需要创建多个对象
问题: 对象没有一个具体的类型, 都是Object类型
// 工厂函数:返回一个对象的函数function creatPerson(name, age) {var obj = {name: name,age: age,setName: function (name) {this.name = name;},setAge: function (age) {this.age = age;}}return obj;}//然后就可以创建多个对象了var p1 = creatPerson('momo', 18);var p2 = creatPerson('yiyi',19);console.log(p1, p2, p1.age)
第四种:自定义构造函数模式
可以增加代码的复用性
构造函数里面封装的不是普通代码,而是对象
构造函数语法规范如下:
1. 构造函数名首字母大写2.构造函数不需要return就可以返回结果function 构造函数名() {this.属性 = 值;this.属性 = 值;this.方法 = function () {}}
调用构造函数,即对象的实例化,即:new 构造函数名(),也就是我们平时说的new一个对象,没有对象,咱就new一个,想有多少就有多少,哈哈哈
步骤: 自定义构造函数, 通过new创建对象
适用场景: 需要创建多个类型确定的对象
问题: 每个对象都有相同的数据, 浪费内存,所以可以考虑把函数放在原型里面,即第五种方法
function Person(name, age) {this.name = name;this.age = age;this.setName = function (name) {this.name = name;};this.setAge = function (age) {this.age = age;}}var p1 = new Person('momo', 14);//实例化一个Person对象console.log(p1);console.log(p1 instanceof Person);// true,p1是Person类型
在下面的程序中,定义了一个Student构造函数,在最后两行,我们分别判断p1, s1的类型,可知p1不是Student类型,而s1是student类型
function Student(name, age) {this.name = name;this.age = age;this.setName = function (name) {this.name = name;};this.setAge = function (age) {this.age = age;}}var s1 = new Student('yiyi', 22);console.log(s1);console.log(s1 instanceof Student);//true, s1是student类型的对象console.log(p1 instanceof Student);//false,代表p1不是Student类型对象
第五种:构造函数+原型的组合模式
步骤: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
适用场景: 需要创建多个类型确定的对象
这个跟构造函数差不多,只不过是把构造函数里面的原来的方法添加到了对象的原型上面去
function Person(name, age) {this.name = name;this.age = age;}Person.prototype.setName = function (name) {this.name = name;};Person.prototype.setAge = function (age) {this.age = age;}var p1 = new Person('momo', 14);var p2 = new Person('sdf', 678);console.log(p1, p2);console.log(p1 instanceof Person);//p1是Person类型
三、结尾
今天的分享到这里就结束了,如果觉得有收获,左下角有个大拇指哦,关于本文有什么好滴建议也可以分享到评论区哦,博主才疏学浅,还请各位读者老爷们批评指正
超详细的JavaScript对象分享,看完就会了相关推荐
- 超详细vr全景拍摄教程,看完别说你还不会全景拍摄
一.VR VR 全景拍摄设备推荐型号 1.佳能入门级全画幅 6D 单反机身 2.鱼眼镜头(8-15mm) 3.思锐三脚架 R-2204 4.思锐云台 PB-10 二. VR 全景拍摄器材及组装 ◆ 首 ...
- 单链表的操作(超详细),保证你看完不后悔
- 【超详细Scratch教学课件分享】可暂停倒计时
您好,感谢您一直对少儿编程.对"与非学堂"的关注.为了更好地为大家服务,诚邀您填写一份<关于少儿编程教与学的课件资源素材需求调查>,https://www.wjx.cn ...
- 【超详细Python教学课件分享】寻宝探路
您好,感谢您一直对少儿编程.对"与非学堂"的关注.为了更好地为大家服务,诚邀您填写一份<关于少儿编程教与学的课件资源素材需求调查>,https://www.wjx.cn ...
- AI:从小白到入门,超详细人工智能成长路径分享:观后感
本博文为视频观后总结,博文出现的专有名词 B 站或者 gitHub 搜索即可检索到学习链接,欢迎各位小伙伴,评论区总结分享好的学习路线 文章目录 AI 学习从小白到入门 1. Python学习 2. ...
- 超详细——接口测试总结与分享 (51Testing软件测试网采编)
超详细--接口测试总结与分享 发表于:2017-11-29 10:36 作者:米阳MeYoung 来源:51Testing软件测试网采编 字体:大 中 小 | 上一篇 | 下一篇 |我要投稿 | ...
- 计算机网络之交换机的工作原理---超详细解析,谁都看得懂!!
在了解交换机的工作原理之前,我们先要了解几个概念. 一.相关概念 1.OSI七层模型是哪七层? 自上而下分别是: 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 交换机工作在数据链路层, ...
- 国服被ban咋看_王者荣耀:赵云不会玩?完美详细攻略教学,看完助你轻松上王者...
王者荣耀:赵云不会玩?国服最细教学:快速发育,三指卡位,看完轻松上王者 目录: 1.版本强度 2.技能解析 3.出装铭文 4.实战教学 一:版本强度 数据来自王者营地 收集巅峰赛1350玩家对局数据 ...
- 内容分享,详细的招投标流程,看完请收藏
无论是在施工单位.建设单位.招标代理机构,对于招投标大家可能只是经历了招投标完整流程中的一个环节.今天就一起分享下完整的招投标流程! 一.招标人准备工作 1.项目立项 (1)提交项目建议书主要内容有: ...
最新文章
- TensorFlow常用Python扩展包
- 英伟达3080Ti、3070Ti来了:继续封锁挖矿性能,网友:不信,空气卡+1
- Spring - 父容器与子容器
- IT牛人往事如烟之七大“先烈”
- js 的 math 函数
- 单片机C语言中空语句,单片机C语言中的空语句.doc
- 栈应用:判断字符串中括号是否成对出现
- 使用git时提示Could not create directory #39;%USERPROFILE%/.ssh#39;.percent_expand:unkown key %U...
- 省钱有简单的祛痘方法 - 健康程序员,至尚生活!
- UITableView优化之按需加载
- SpringBoot启动成功后,访问接口报错404(error:“Not Found“)
- django模型多对一 多对多 一对一三种关系解读
- [搜索 meet in the middle+哈希] ProjectEuler 598. Split Divisibilities
- Map.Entry和Map中的map.keySet()、map.entrySet()详解
- pandas数据类型转为str
- 多元统计分析及R语言建模
- LWP 与 WEB 的基本使用
- autojs联众识图
- 二叉树 求叶子节点数并返回叶子节点个数
- 网络天才网页中文版_网络天才电脑版