JavaScript类型系统之Object详解

前面的话

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

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

创建对象

  有两种Object类型的创建方法

[1]Object构造函数

rush:js;"> 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 操作符相同的

基本过程

rush:js;"> var person = { name : 'bai',age : 29,5 : true };

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

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

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

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

rush:js;"> //等价于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['白']

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

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

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

删除对象

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

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

rush:js;"> 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的值总是相等,但就是无法删除

rush:js;"> 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

rush:js;"> 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

对象嵌套

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

rush:js;"> var student = { name : { chinese : 1,englisth : 2 },sex : 1,age : 26 }

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

rush:js;"> 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()方法的返回值相同

rush:js;"> 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类型的实例并为其添加属性和(或)方法,就可以创建自定义对象。

rush:js;"> var o = new Object();

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

  ● constructor——保存着用于创建当前对象的函数   ● hasOwnProperty(propertyName)——用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))   ● isPrototypeOf(object)——用于检查传入的对象是否是另一个对象的原型   ● propertyIsEnumerable(propertyName)——用于检查给定的属性是否能够使用for-in语句来枚举   ● toString()——返回对象的字符串表示   ● valueOf()——返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...