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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
layui扩展上传组件模拟进度条的方法
Sep 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
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python列表对象实现原理详解
2019/07/01 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
宠物店的创业计划书范文
2014/01/11 职场文书
学习作风建设心得体会
2014/10/22 职场文书
交通事故调解协议书
2015/05/20 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书