JavaScript类型系统之Object详解


Posted in Javascript onJanuary 07, 2016

前面的话

在javascript中,对象为王;Javascript里的几乎所有东西都是对象或者用起来像对象。理解了对象,就理解了Javascript。在javascript中,引用类型是一种数据结构,用于将数据和功能组织在一起,它也常被称为类。引用类型有时也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法

大部分引用类型的值都是Object类型的实例;而且,Object也是javascript中使用最多的一个类型。虽然Object实例不具备多少功能,但对于在应用程序中存储和传输数据,它们确实是非常理想的选择

创建对象

有两种Object类型的创建方法

[1]Object构造函数

var person = new Object();
//如果不给构造函数传递参数可以不加括号 var person = new Object;
person.name = 'bai';
person.age = 29; 
//创建无属性的空对象
var cody1 = new Object();
var cody2 = new Object(undefined);
var cody3 = new Object(null);
console.log(typeof cody1,typeof cody2, typeof cody3);//object object object 
//创建string、number、array、function、boolean、regex
console.log(new Object('foo'));
console.log(new Object(1));
console.log(new Object([]));
console.log(new Object(function(){}));
console.log(new Object(true));
console.log(new Object(/\bbt[a-z]+\b/));

[注意]Object()构造函数本身就是对象,构造函数是基于Function构造函数创建的对象

[2]使用对象字面量

Javascript提供了叫做字面量的快捷方式,用于创建大多数原生对象值。使用字面量只是隐藏了与使用new 操作符相同的

基本过程

var person = {
name : 'bai',
age : 29,
5 : true
};

[注意]在对象字面量中使用逗号来分隔不同的属性,但是在最后一个属性后面添加逗号,会在IE7-导致错误

使用对象字面量的方法来定义对象,属性名会自动转换成字符串

//同上
var person = {
'name' : 'bai',
'age' : 29,
'5' : true
};

如果留空其花括号,则可以定义只包含默认属性和方法的对象

//等价于var person = new Object();
var person = {}; 
[tips]使用对象字面量封装多个可选参数
function displayInfo(args){
var output = '';
if(typeof args.name == 'string'){
output += 'name:' + args.name +'\n';
}
if(typeof args.age == 'number'){
output += 'Age:' + args.age + '\n';
}
console.log(output);
};
displayInfo({
name: 'Nicholas',
age: 29
});
displayInfo({
name: 'match'
});

以上这种传递参数的模式最适合需要向函数传入大量可选参数的情况。一般来说,虽然命名参数容易处理,但有多个可选参数时就会不够灵活。因此,对于必须值使用形参,而使用对象字面量来封装多个可选参数

设置对象

有两种访问对象属性的方法,可以用点表示法或中括号表示法获取、设置或更新对象的属性

中括号法的两个优点分别是可以通过变量来访问属性、属性名称可以为Javascript无效标识符

[注意]变量中可以存在中文,因为中文相当于字符,与英文字符同样对待,因此可以写成person.白或person['白']

var myObject = {
123:'zero',
class:'foo'
};
console.log(myObject['123'],myObject['class']);//'zero' 'foo'
console.log(myObject.123);//报错

方括号中的值若是非字符串类型会使用String()隐式转换成字符串再输出;如果是字符串类型,若有引号则原值输出,否则会被识别为变量,若变量未定义,则报错

person[0] = 1; //[]中的数字不会报错,而是自动转换成字符串
person[a] = 1; //[]中符合变量命名规则的元素会被当成变量,变量未被定义,而报错
person[''] = 2; //[]中的空字符串不会报错,是实际存在的且可以调用,但不会在控制台右侧的集合中显示
person[undefined 或 null 或 true 或 false] = 4;// 不会报错,而是自动转换成字符串
person['白'] = 6; // 不会报错

删除对象

delete操作符可以用于将属性从一个对象中完全删除。delete是将属性从一个对象中删除的唯一办法,将属性设置为undefined或null只能改变属性的值,而不会将属性从对象中删除。delete只能删除对象下的数据,其他5种基础类型的值是删除不掉的

[注意]delete不会删除在原型链上找到的属性

var foo = {bar: 'bar'};
delete foo.bar;
console.log('bar' in foo);//false 
var a = 123;
delete a;
console.log(a);//123

如果在全局状态下声明变量a,相当于window对象下的一个数据a,可以通过window.a或a来对a赋值,且window.a和a的值总是相等,但就是无法删除

var a;
a = 10;
console.log(a,window.a);//10 10
window.a = 20;
console.log(a,window.a);//20 20
delete a ;
console.log(a,window.a);//20 20
delete window.a;
console.log(a,window.a);//20 20

如果用window.b 来声明并赋值(b相当于声明在window对象下),可以删除,且用delete b 和 delete window.b 的效果相同,删除后,console.log(b)提示变量不存在,console.log(window.b)提示undefined

window.b = 10;
console.log(b,window.b);//10 10
delete b;
console.log(b);//报错
console.log(window.b);//undefined 
window.b = 10;
console.log(b,window.b);//10 10
delete window.b;
console.log(b);//报错
console.log(window.b);//undefined

对象嵌套

对象可以嵌套,但必须逐层取值

var student = {
name : {
chinese : 1,
englisth : 2
},
sex : 1,
age : 26
}

[注意]取值只能一层一层取,如student.name.chinese,而不能跨过name,直接用student.chinese,因为与name的同级下也可能有叫chinese的元素

var object1 = {
object1_1:{
object1_1_1:{foo: 'bar'},
object1_1_2:{}
},
object1_2:{
object1_2_1:{},
object1_2_2:{}
}
};
console.log(object1.object1_1.object1_1_1.foo);//bar

实例方法

constructor:保存着用于创建当前对象的函数

hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,propertyName必须以字符串形式指定

isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型

propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。其中,propertyName必须以字符串形式指定

toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应

toString():返回对象的字符串表示

valueOf():返回对象的字符串、数值或布尔值表示,通常与toString()方法的返回值相同

var myObject = {
mark: true
};
console.log(myObject.constructor);//function Object(){}
console.log(myObject.hasOwnProperty('mark'));//true
console.log(Object.prototype.isPrototypeOf(myObject));//true
console.log(myObject.propertyIsEnumerable('mark'));//true
console.log(myObject.toLocaleString());//[object Object]
console.log(myObject.toString());//[object Object]
console.log(typeof myObject.valueOf(),myObject.valueOf());// object Object{mark:true}

小结:

Object类型

对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象。

var o = new Object();

Object的每个实例都具有下列属性和方法: 

● constructor——保存着用于创建当前对象的函数
 

● hasOwnProperty(propertyName)——用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))
 

● isPrototypeOf(object)——用于检查传入的对象是否是另一个对象的原型
 

● propertyIsEnumerable(propertyName)——用于检查给定的属性是否能够使用for-in语句来枚举 

● toString()——返回对象的字符串表示
 

● valueOf()——返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
7个去伪存真的JavaScript面试题
Jan 07 #Javascript
jQuery表格插件datatables用法详解
Nov 23 #Javascript
详解JavaScript UTC时间转换方法
Jan 07 #Javascript
jQuery formValidator表单验证
Jan 07 #Javascript
JavaScript中的原始值和复杂值
Jan 07 #Javascript
理解JS事件循环
Jan 07 #Javascript
angularjs创建弹出框实现拖动效果
Aug 25 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
单点登录 Ucenter示例分析
2013/10/29 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
linux 下selenium chrome使用详解
2020/04/02 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
求职信模板标准格式范文
2014/02/23 职场文书
保护环境的建议书
2014/03/12 职场文书
公司应聘求职信
2014/06/21 职场文书
民主生活会剖析材料
2014/09/30 职场文书
高中班主任评语
2014/12/30 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年教务工作总结
2015/05/23 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
大学军训心得体会800字
2016/01/11 职场文书