目录

一,什么是对象?

二,创建一个对象

三,对象的嵌套

四,对象的属性与修改

1,使用点.运算符

2,使用[]符号

3,修改属性

五,给对象添加属性

六,查看与删除对象的属性

1,使用Object.keys(obj)方法查看对象所有属性

2,使用delete()方法删除对象属性

3,使用增强版for循环遍历对象元素

七,Object对象方法

1,Object对象的本身方法

2,Object对象自己的实例方法

八,函数与对象注意点

1,函数体里调用其他函数

2,函数体行数不超过50行


一,什么是对象?

英文名object,翻译成中文就是对象。用英语的角度来说object就是物体实体,即使他看不见摸不着。中文的对象指的是女朋友。在计算机中,用英语的角度理解对象,就是说:放在内存里面的复杂数据集合,也叫做数据与方法的封装,是一种编程逻辑概念。

函数是对数据与代码的封装,假如再把函数及函数外的数据进行封装,那就是object,即对象。

二,创建一个对象

将一些函数与对象封装起来就是对象,所谓封装在语法层面就是,把函数和变量用英文大括号{}包起来。使用:key:value的形式,value可以是对象的值,也可以是对象的地址。

key的值可以不符合标识符的命名规范,但是必须使用引号引起来,比如'12qw'=1。每个键值对之间使用英文逗号隔开。

//创建一个obj对象
var obj1 = {str1: 'woaini',"10p": 10
};
function f() {console.log(1)
};
var obj1 = {str1: 'woaini',"10p": 10,fun: f,fun1: function() {console.log(2)}
};
obj1.fun();
obj1.fun1();

如果一个键的值是一个函数,则称这个键名为这个对象的方法。如果一个键的值是基本数据类型,则称这个键名为这个对象的属性。

三,对象的嵌套

即对象的属性仍然可以是一个对象。运算符.表示getattr的意思,即访问对象属性。

var obj1 = {str1: 'woaini',"10p": 10,fun1: function() {console.log(2)},obj_inn: obj2 = {num: 1}
};
console.log(obj1.obj_inn.num);

四,对象的属性与修改

1,使用点.运算符

var obj1 = {str1: 'woaini',
};
console.log(obj1.str1);

2,使用[]符号

var obj1 = {str1: 'woaini',
};
console.log(obj1['str1'])

记住键需要加上引号。

3,修改属性

var obj1 = {str1: 'woaini',
};
obj1.str1 = 666
console.log(obj1['str1'])

五,给对象添加属性

var obj1 = {};
obj1.name = 'xiaoming';
obj1['age'] = 10;
console.log(obj1.age, obj1.name);

六,查看与删除对象的属性

1,使用Object.keys(obj)方法查看对象所有属性

var obj1 = {str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(Object.keys(obj1))
// [ 'str1', 'age' ]

2,使用delete()方法删除对象属性

var obj1 = {str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(delete obj1.age)
// true

删除一个对象里不存在的属性不仅不会报错而且还会返回true。当试图删除一个无法删除的属性时,则会返回false。删除对象属性:实际上是与相关的对象进行解绑。

3,使用增强版for循环遍历对象元素

var obj1 = {str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18for (var item in obj1) {console.log(obj1[item])
}

七,Object对象方法

这里讲解关于Object对象的一些知识,它类似于基类,是所有对象的老大。

1,Object对象的本身方法

Object本身就是一个对象,可以给他添加属性和方法。利用键值对形式给对象添加的方法叫做Object本身方法。只能使用Object.funcname()来执行。

Object.add = function() {console.log(1)
}
Object.add()

2,Object对象自己的实例方法

使用Object.prototype.name()形式添加的方法称为对象的实例方法。可以被任意对象使用。

function f() {console.log(1)
};
Object.prototype.fun = f;
var obj = {}
obj.fun()

八,函数与对象注意点

1,函数体里调用其他函数

可以再一个函数的函数体里面调用另一个函数,即函数名+()。

2,函数体行数不超过50行

每个函数的函数体不超过50行,如果超过的话最好拆分,使用函数搭积木实现功能。

JavaScript对象详解,js对象属性的添加相关推荐

  1. JavaScript 数据类型详解(对象、set、map)

    在上一篇博客中我已经详细介绍了JavaScript 中的字符串和数组,没看过的戳[JavaScript 数据类型详解(字符串.数组)]哦,现在我们来看看对象(Object)和 ES6 新增的 Set ...

  2. JavaScript核心之Document对象详解(document属性,方法)

    目录 1 Document节点概述 2 document节点的属性 2.1 doctype,documentElement,defaultView,body,head,activeElement 2. ...

  3. JavaScript对象详解

    转载请注明预见才能遇见的博客:https://my.csdn.net/ 原文地址:https://blog.csdn.net/weixin_42787326/article/details/81297 ...

  4. JS中的event 对象详解

    JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...

  5. Henry前端笔记之 Date对象详解

    Henry前端笔记之 Date对象详解 Date 对象 1 时间格式简介 2 Date.now 与 new Date().getTime() 的区别 3 Date对象详解 普通函数的用法 构造函数的用 ...

  6. java out对象_JSP out对象详解

    JSP out对象详解 out对象就是在Web应用开发过程中使用最多的一个对象,其功能就是动态的向JSP页面输出字符流,从而把动态的内容转化成HTML形式来展示,这个对象在任何JSP页面中都可以任意访 ...

  7. html内置时间对象,JavaScript中的常用事件,以及内置对象详解

    原标题:JavaScript中的常用事件,以及内置对象详解 今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...

  8. JS window对象详解

    JS window对象详解 1.window对象 2.窗口操作 打开窗口 关闭窗口 3.对话框 confirm prompt 4.定时器 setTimeout和clearTimeout setInte ...

  9. JS Event对象详解

    JS Event对象详解 参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态,比如事 ...

  10. 【JavaScript 教程】ES6 中的 Promise对象 详解

    [JavaScript 教程]ES6 中的 Promise对象 详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...

最新文章

  1. Context.getExternalFilesDir()和Context.getExternalCacheDir()
  2. 最大连续子序列----DP动态规划
  3. 02ODBC基本概念
  4. 导师推荐,本周开课 | 第 5 期临床基因组家系分析,同时解决科研和临床问题
  5. java并发编程之缓存一致性问题
  6. python123组合数据类型_Python的组合数据类型-字典
  7. win11组策略如何恢复默认设置 windows11组策略恢复默认设置的步骤方法
  8. JavaWeb学习篇8_用户登录、信息的增删改查、复杂功能小项目(Servlet、JSP、MySQL、JDBCTemplete、Durid、BeanUtils、tomcat、EL、JSTL)
  9. 虚拟机安装黑苹果mac 10.12系统安装教程
  10. SwiftUI - @Binding
  11. 三国志战略版鸿蒙梦魇,三国志战略版梦中弑臣厉害吗 梦中弑臣战法搭配
  12. 仙武:开局神级召唤!(一)
  13. 年审是当月还是当天_车辆年检可以在到期当月进行吗
  14. 转 Unity绳子插件Obi+Rope下载与简单使用方法
  15. 刷题记录(NC235611 牛牛国的战争,NC23803 DongDong认亲戚,NC235622 叠积木)
  16. 云原生时代的 Java 虚拟机
  17. 【论文整理】小样本学习Few-shot learning论文整理收藏(最全,持续更新)
  18. ALSA学习笔记 (1) ALSA 简介
  19. WebAPI编程_DOM
  20. 基于Tensorflow的卷积神经网络模型实现水果分类识别(实践案例)

热门文章

  1. 中国广电确定与一家运营商共建共享,电信?移动?联通?
  2. 网站性能优化总结(前端篇)
  3. 判断一个字符串是否是对称字符串(一)
  4. SFDC 微服务实践之路 2016.12.10 杭州(整理)--转
  5. Oracle的常见面试题
  6. 等价类划分法的步骤和示例
  7. 在JavaScript中时间戳
  8. java jsoup 网络爬虫 学习例子(六)京东和当当商品比价
  9. Centos workon -bash: workon: command not found问题处理
  10. QPainter绘制直方图后,绘制文字drawText文字翻转文字镜像解决办法