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 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
js实现微博发布小功能
Jan 12 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js取得url地址参数实例
2013/02/22 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python使用MONGODB入门实例
2015/05/11 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
临时租车协议范本
2014/09/23 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
考试没考好检讨书
2015/05/06 职场文书
廉洁自律证明
2015/06/24 职场文书
优秀志愿者感言
2015/08/01 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript