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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
webpack之devtool详解
Feb 10 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
js实现小星星游戏
Mar 23 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
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
PHP中函数内引用全局变量的方法
2008/10/20 PHP
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
销售辞职报告范文
2014/01/12 职场文书
三八妇女节活动总结
2014/05/04 职场文书
答谢会策划方案
2014/05/12 职场文书
服务整改报告
2014/11/06 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
银行员工考核评语
2014/12/31 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL