JavaScript中的对象个人分享

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量62 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000015996919
版权

对象

对象的概念

  • 所谓对象就是是一个拥有属性和方法的集合体

对象的分类

  1. 内置对象/原生对象:

    • 引用类型可以称作为内置对象

  2. 宿主对象:

    • 就是寄生在一个东西上的对象比如浏览器提供的对象
    • 比如：DOM、BOM

  3. 自定义对象

    • 开发人员创建的对象

  • Object对象是什么

    • object类型是所有JavaScript类型的父级

创建对象

对象的初始化器创建方式

var 对象名 = {
属性名 : 属性值,
方法名 : function(){
方法体
}
}
  • 注意: 如果存在多个属性名的话中间用 " , "隔开

示例代码:

var obj1 = {
    name : '一花一世界',
    name1 : '一叶一孤城',
    soso : function () {
        console.log('你是哈士奇')
    }
};

对象的构造函数方式

  • 利用所有引用类型常见对应的对象 - 就是具有具体的类型

    • var num = new Number();// Number类型
    • var str = new String();// String类型
    • var boo = new Boolean();// Boolean类型

  • 利用Object作为构造函数创建对象

    • var 对象名 = new Object();
    • var 对象名 = Object();

示例代码:

var num = new Number();// Number类型
var num2 = Number();
var str = new String();// String类型
var boo = new Boolean();// Boolean类型

var obj2 = new Object();
var obj3 = Object();

console.log(obj2);// {}// 调用结果为 { }
console.log(obj3);// {}// 调用结果为 { }

var obj4 = new Object(undefined);
var obj5 = new Object(null);

console.log(obj4);// 调用结果为 { }
console.log(obj5);// 调用结果为 { }

利用Object.create()方法创建对象

  • var 对象名 = Object.create(null) - 就是创建一个空对象

  • var 对象名 = Object.create(obj)

    • obj - 表示另一个对象
    • 特点 - 当前创建的新对象拥有与obj对象相同的属性和方法

示例代码:

var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

console.log(obj6);// 调用结果为 { }
console.log(obj7);// 调用结果为 { }

创建空对象

  • 创建空对象的方式目前有以下几种

    1. var obj1 = {};
    2. var obj2 = new Object();
    3. var obj3 = Object();
    4. var obj4 = new Object(undefined);
    5. var obj5 = new Object(null);
    6. var obj6 = Object(undefined);
    7. var obj7 = Object(null);
    8. var obj8 = Object.create(null);

创建方式的对比

  • Number,String和Boolean

    • 字面量方式创建的是原始类型,构造函数方式创建是引用类型

  • Array和Object

    • 无论是字面量方式还是构造函数方式创建的都是引用类型

示例代码:

// 1. Number类型
var num1 = 100;// 字面量方式
var num2 = new Number();// 构造函数方式

// 2. String类型
var str1 = '一花一世界';// 字面量方式
var str2 = new String();//构造函数方式

// 3.Boolean类型
var boo1 = true;// 字面量方式
var boo2 = new Boolean();// 构造函数方式

// 4.Array类型
var arr1 = [];
var arr2 = new Array();

// 5.Object类型
var obj1 = {};
var obj2 = new Object();

变量与对象

示例代码:

/* 变量声明并初始化值 */
var obj = 100;
/* 输出调用 */
console.log(obj);// 调用结果为 100
/* 变量重新赋值为对象 */
obj = {
    /* 对象的属性 */
    name : '一花一世界',
    /* 对象的方法 */
    soso : function () {
        /* 方法体 */
        console.log('一叶一孤城');
    }
};
/* 输出调用 */
console.log(obj);// 调用结果为 { name: '一花一世界', soso: [Function: soso] }

变量,函数与对象

  • 注意: 如果访问一个对象不存在的属性时 - 值为 undefined

示例代码:

var obj = {
    neme : '一花一世界',
    'Type-Content' : 'text/HTML',
    sayMe : function () {
        console.log('一叶一孤城');
    }
};

console.log(obj.soso);// 调用结果为 undefined

  • 创建一个对象 - 具有name和age属性与sayMe()方法

    • 对象的属性 - 类似于变量
    • 对象的属性 - 类似于变量
  • 其实定义的变量就是某个对象的属性,定义的函数就是某个对象的方法

  • JavaScript找那个具有一个全局对象(Global) - 仅存在与概念

    • 浏览器运行环境 - BOM中Window(窗口)对象
    • Node.js运行环境

示例代码:

var obj1 = {
    name : '一花一世界',
    age : '有点飘',
    sayMe : function () {
        console.log('一叶一孤城');
    }
};
console.log(Object);// 调用结果为 [Function: Object]
console.log(Global);// 调用结果为报错 - ReferenceError: Global is not defined

控制台调用图:
图片描述

调用对象的属性方式

对象名.属性名 - 名称简单的调用方式

  • 注意: 不适合用于复杂命名的属性名称

示例代码:

var obj = {
    neme : '一花一世界',
    'Type-Content' : 'text/HTML',
    sayMe : function () {
        console.log('一叶一孤城');
    }
};

console.log(obj.neme);// 调用结果为 一花一世界

控制台调用图:
图片描述

对象名称[属性名] - 通用的调用方式

  • 适用于复杂命名的属性名称
  • 特点: 该种方式比较通用

示例代码:

var obj = {
    neme : '一花一世界',
    'Type-Content' : 'text/HTML',
    sayMe : function () {
        console.log('一叶一孤城');
    }
};

console.log(obj.neme);// 调用结果为 一花一世界
console.log(obj['Type-Content']);// 调用结果为 text/HTML

控制台调用图:
图片描述

修改对象的属性

对象名.已存在的属性名 = 属性值

示例代码:

var obj = {
    name : '一花一世界',
    sayMe : function(){
        console.log('一花一世界');
    }
}

obj.name = '一叶一孤城';
console.log(obj);// 调用结果为 { name: '一叶一孤城', sayMe: [Function: sayMe] }

对象名[已存在的属性名] = 属性值

示例代码:

var obj = {
    name : '一花一世界',
    sayMe : function(){
        console.log('一花一世界');
    }
}

obj['name']
console.log(obj);// 调用结果为 { name: '一叶一孤城', sayMe: [Function: sayMe] }

删除对象的属性

delete 对象名.属性名

示例代码:

var obj = {
    name : '一花一世界',
    sayMe : function(){
        console.log('一花一世界');
    }
}

delete obj.name;
console.log(obj.name);//调用结果为 undefined

delete 对象名[属性名]

示例代码:

var obj = {
    name : '一花一世界',
    sayMe : function(){
        console.log('一花一世界');
    }
}

delete obj['name'];
console.log(obj.name);//调用结果为 undefined

检测对象的属性

判断对象的属性值是否为 undefined

示例代码:

var obj = {
    name : '张无忌',
    age : 18
}

if (obj.age !== undefined) {
    console.log('obj对象的age属性存在...');
} else {
    console.log('请先定义obj对象的age属性...');
}

判断对象的属性值 - 先转换为Boolean类型

示例代码:

var obj = {
    name : '张无忌',
    age : 18
}

if (obj.age) {
    console.log('obj对象的age属性存在...');
}

利用in关键字进行判断

示例代码:

var obj = {
    name : '张无忌',
    age : 18
}

if ('age' in obj) {
    console.log('obj对象的age属性存在...');
} else {
    console.log('obj对象的age属性不存在...')
}

Object类型提供了hasOwnProperty()方法

示例代码:

var obj = {
    name : '张无忌',
    age : 18
}

if (obj.hasOwnProperty('age')) {
    console.log('obj对象的age属性存在...');
} else {
    console.log('obj对象的age属性不存在...')
}

遍历对象的属性

示例代码:

var obj = {
    name : '一花一世界',
    age : 18,
    sayMe : function(){
        console.log('一花一世界');
    }
}
// 1.for...in语句
for (var objAttr in obj) {
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 2.Object类型提供了keys()方法 - 只能遍历可枚举的属性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 3.Object类型提供了getOwnPropertyNames()方法 - 包括不可枚举的属性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

调用对象的方法

  1. 对象名.方法名()
  2. 对象名[方法名]()

示例代码:

var obj = {
    name : '一花一世界',
    age : 18,
    sayMe : function(){
        console.log('一花一世界');
    }
}
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj['sayMe']();

新增对象的方法

  • 注意: 和新增对象的属性方法类似

示例代码:

var obj = {
    name : '一花一世界',
    age : 18,
    sayMe : function(){
        console.log('我是风儿');
    }
}
// 1.对象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log('你是沙');
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}

修改对象的方法

  • 注意: 和修改对象属性的方法类似

示例代码:

var obj = {
    name : '一花一世界',
    age : 18,
    sayMe : function(){
        console.log('我是风儿');
    }
}
// 1.对象名.方法名 = function(){}
obj.sayMe = function(){
    console.log('你是沙');
}
console.log(obj);
obj.sayMe();
// 2.对象名[方法名] = function(){}

删除对象的方法

  • 注意: 和删除对象属性的方法类似

示例代码:

var obj = {
    name : '一花一世界',
    age : 18,
    sayMe : function(){
        console.log('一笑一人生');
    }
}
// 1.delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法 -> 报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);

// 以属性是否存在的方式进行判断
if ('sayMe' in obj) {
    // 确认目前是一个方法
    if (obj.sayMe instanceof Function) {
        obj.sayMe();// 方法调用
    }
}
// 以上代码可以优化为以下代码
if ('sayMe' in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法调用
}

// 2.delete 对象名[方法名]
weixin_33911824
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript数组对象实现增加一个返回随机元素的方法
01-19
本方法 来自个人手写 JavaScript 的实践，只涉及 JavaScript 1.5（ECMAscript 3 国际标准）语言本身，在所有 JS 引擎实现中通用~ 为Array对象新增random方法： (function () { function Random_SN(iArray) { ...
分享9点个人认为比较重要的javascript 编程技巧
12-11
 在js中，NaN,undefined,Null,0,”” 在转换为bool的时候，是false，所以，可以这样写。 代码如下: if(!obj) {} 表示一个对象如果为false的时候所做的事情，因为如果obj为以上任何一个，那么就是false，!false即...
JavaScript之对象枚举
c__dreamer的博客
02-11 3053
对象的访问有两种方法，第一种是对象名.属性名（obj.name）、第二种是对象名['属性名']（obj['name']）。其实第一种是在内部变成第二种的形式，然后再执行。var obj = { name : "wang"; age : 20; sex : "male"; } console.log(obj['name']);这种也是有好处，看下面例子。var obj = { color1 : {...
如何从JavaScript对象中删除属性？
asdfgh0077的博客
11-27 2634
说我创建一个对象，如下所示： var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "
遨游 JavaScript 对象星际：探索面向对象编程的深邃世界
小z的博客
05-13 3600
12- 【高级】JavaScript 中的面向对象编程
2020回顾-个人web分享JavaScript面试题附加回答
程序员哆啦A梦，蓝胖子
01-03 1412
把你的前端拿捏得死死的，每天学习得爽爽的，达达前端程序员 感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩，欢迎关注 前言 希望可以通过这篇文章，能够给你得到帮助。 1. JavaScript垃圾回收机制的了解 对于在JavaScript中的字符串，对象，数组是没有固定大小的，只有当对他们进行动态分配存储时，解释器就会分配内存来存储这些数据，当JavaScript的解释器消耗完系统中所有可用的内存时，就会造成系统崩溃。 内存泄漏，在某些情况下，不再使用到的变量所占用内存没有及时释放，导致程序运行中.
JavaScript中的代理对象（proxy）
热门推荐
官方推荐
09-23 2万+
JavaScript中的代理对象（proxy）
javascript知识分享——对象
DS153的博客
11-08 1166
目录 前言 一、对象 1.什么是对象 2.为什么需要对象 二、创建对象的方法 1.利用字面量创建对象 2.利用new Object创建对象 3.利用构造函数创建对象 三、关于构造函数 1.构造函数和对象 2.new关键字 四、如何遍历对象属性 五、小节 1.变量、属性、函数、方法总结 2.关于对象知识的小结 结尾 前言 我们学会了函数，只需要调用函数，就可以解决很多问题。但是我们一个网页里面，需要使用的算法肯定不止是用一个函数来操作，当我们需要...
【干货分享|建议收藏】2w字爆肝详解 JavaScript对象
08-22 6992
5.1_初始对象 5.1.1_什么是对象 例如：在JavaScript中描述一个手机对象，则手机拥有的属性和方法如下： 手机的属性：颜色、重量、屏幕尺寸。 手机的方法：打电话、发短信、看视频、听音乐。 在代码中，属性可以看成是对象中保存的一个变量，使用“对象.属性名”表示；方法可以看成是对象中保存的一个函数，使用“对象.方法名（）”进行访问。 //假设现在有一个手机对象p1，通过代码创建出来 var p1 = { color:'黑色', weight: '188g', screenSize:'6.5',
JavaScript 中的数学与时光魔法：Math与Date对象大揭秘
小z的博客
05-03 2490
8-JavaScript中的Math对象方法、Date对象方法
正则表达式与JSON序列化：去除JavaScript对象中的下划线键名
interest_ing_的博客
04-03 890
在处理前端数据时，我们经常会遇到一些以下划线开头的属性，这在某些情况下可能会与JSON标准或其他数据格式的要求冲突。为了确保数据的一致性和兼容性，我们需要将这些属性的下划线去除。本文将介绍如何使用`JSON.stringify()`进行序列化，并通过`replace()`方法结合正则表达式来实现这一转换。
几种在JavaScript中创建对象的方式！
官方推荐
08-26 7418
几种在JavaScript中创建对象的方式！
Frida-scripts:分享个人工作中一些事半功倍的脚本
08-03
分享个人工作中一些事半功倍的脚本 iOS_Trace.js 说明 根据关键词模糊Hook Objective-C方法，可以对类名和方法名模糊Hook，参考，在此基础上进行了修改。 对Objective-C的地址进行判断（防止解析出错），默认拦截...
Javascript编程中几种继承方式比较分析
11-22
其实个人觉得，什么方式并不重要，重要的是是否具有面向对象的思想，说javascript不是面向对象语言的，往往都可能没有深入研究过javascript的继承方式，故特撰此文以供交流。 为何需要利用javascript实现继承 早
Large:故事分享网站“中”的副本。
05-06
JQuery AJAX调用用于所有数据库请求，而Jbuilder视图用于将返回的Ruby实例转换为JavaScript对象。 AWS集成用于存储和检索故事封面图像和缩略图。特征用户认证大型同时维护前端和后端用户身份验证。 客户端验证和...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 620
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 570
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
vue 使用 export default
global_coding的博客
05-24 346
vue 使用 export default
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
2301_79969279的博客
05-24 1098
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
写一个关于个人博客的django
09-14
个人博客是一个非常流行的网络平台，让用户可以分享自己的观点、经验和技能。Django是一个使用Python编写的高级Web开发框架，它提供了强大的功能和易于使用的工具，适用于构建个人博客。 在使用Django构建个人博客...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值