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(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
Django使用多数据库的方法
Sep 06 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
react MPA 多页配置详解
Oct 18 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
Vue实现省市区三级联动
Dec 27 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
简单谈谈python中的语句和语法
2017/08/10 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
JSF如何进行表格处理及取值
2012/08/06 面试题
南京某公司笔试题
2013/01/27 面试题
杠杆的科学教学反思
2014/01/10 职场文书
旅游网创业计划书
2014/01/31 职场文书
干部现实表现材料
2014/02/13 职场文书
机关会计岗位职责
2014/04/08 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python