JavaScript对象能够看做是属性的无序集合,每一个属性就是一个键值对,可增可删。
JavaScript中的全部事物都是对象:字符串、数字、数组、日期,等等。
JavaScript对象除了能够保持自有的属性外,还能够从一个称为原型的对象继承属性。对象的方法一般是继承的属性。这种“原型式集成”是JavaScript的的核心特征。javascript
第一种:对象直接量表示法建立对象。
这是最简单的对象建立方式,对象直接量由若干key:value
键值对属性组成,属性之间用逗号分隔,整个对象用花括号括起来。java
var empty = {}; //不包含任何属性的对象 var point = { x: 3, y: 5 }; //包含两个属性的对象 var point2 = { x: point.x + 1, y: point.y + 1 }; //属性值能够是表达式 var book = { "main title": "JavaScript", //属性名有空格,必须用字符串表示 "sub-title": "The Defintive Guide", //属性名有连字符,必须用字符串表示 "for": "all audiences", //属性名是保留字,必须用字符串表示 author: { //这个属性的值是一个对象 firstname: "David", surname: "Flanagan" }
ECMAScript 5版本中,使用保留字属性名能够不用引号引发来。对象直接量最后一个属性后的逗号自动忽略。正则表达式
第二种:经过关键字建立对象。
关键字new
用来建立并初始化对象,后面跟一个构造函数。JavaScript语言核心中原始类型都包含内置构造函数,下面是内置对象建立演示。编程
var o = new Object(); //建立一个空对象,等价于 0={} var a = new Array(); //建立一个空数组 var d = new Date(); //建立一个表明当前时间的Date对象 var r = new RegExp("js"); //建立一个正则表达式对象
除了这些内置构造函数,使用自定义构造函数来初始化新对象也很常见。数组
介绍第三种方法以前须要先简单了解“原型”的概念。每个JavaScript对象(null除外)都有一个关联对象,而且能够从关联对象继承属性。这个关联对象就是所谓的“原型”,相似于C#中的基类。
全部经过对象直接量和构造函数建立的对象均可以经过Object.prototype得到原型对象的引用。没有原型的对象为数很少,Object.prototype就是其中之一。
普通对象都有原型,好比Array数组对象的原型是Array.prototype。同时,内置构造函数都具备一个继承Object.prototype的原型。所以,经过new Array()建立的数组对象的属性同时继承至Array.prototype和Object.prototype,当对象出现多继承关系时,那么这一系列连接的原型对象就被称做“原型链”。浏览器
第三种:使用Object.create()函数建立对象。
Object.create(Object[,Properties])
是ECMAScript 5版本出现的一个静态函数,用来建立对象。它接收两个参数:第一个是要建立对象的原型;第二个是可选参数,用来描述对象属性。dom
使用它建立对象,只需传入所需原型对象便可:编程语言
var a = Object.create({ 'isLock': true }); //为对象a指定一个原型 console.log(a.isLock); //=> true o继承原型对象属性isLock console.log(a.hasOwnProperty('isLock')); //=> false 验证isLock并不是o的自有属性
建立一个普通的空对象,须要传入参数Object.prototype
:ide
var b = Object.create(Object.prototype);
能够经过传入参数null
来建立没有原型的对象,该类对象不会继承任何东西:函数
var b = Object.create(null); //该对象不包括任何对象的基础方法
经过原型建立对象,可使任意对象可继承,这是一个强大的特性。好比能够防止程序无心修改不受控制的对象。程序不直接操做对象,而是操做经过Object.create()
建立的继承对象。
对象属性值能够经过点.
和方括号[]
运算符来查询或设置。
var book = { 'author': 'Tom', 'main title': 'Hello JavaScript' }; var author = book.author; //1.获取book的“author”属性值 var title = book["main title"]; //2.获取book的“main title”属性值 book.edition = 6; //3.给book建立一个“edition”属性 book["main title"] = "ECMAScript"; //4.修改"main title"属性值
ES3版本中,若是属性名是关键字必须经过方括号的形式访问。ES5版本放宽了要求,能够直接在点运算符后面直接使用保留字。
关联数组对象
上面提到能够经过object["property"]
操做对象属性,这种语法看起来更像数组,只是这个数组元素是经过字符串索引而不是数字索引,这类数组被称为关联数组。JavaScript对象都是关联数组,经过[]
访问对象属性时,在程序运行时能够建立或修改它们,更有灵活性。
继承
JavaScript对象的属性分两种,一种是本身定义的,被称为“自有属性”。也有一些属性是从原型对象继承过来的。对象属性的多继承关系构成了原型链。
对象属性在赋值前会先检查原型链,以此判断是否容许赋值操做。例如,若是对象o继承自一个只读属性x,那么对x属性赋值是不容许的。若是容许属性赋值,也只是在原始对象上建立或对已有的属性赋值,而不会修改原型链。
JavaScript中,通常只有在查询属性的时候才能体会到继承的存在,而设置属性和继承无关。经过这个特性能够有选择的覆盖继承的属性。
属性访问错误
查询一个不存在的属性不会报错。若是在对象自身属性和继承的属性中没有找到指定属性,则返回undefined
。经过下面一小段代码验证下:
var a = { name: 'admin' }; //定义一个原型对象a var b = Object.create(a); //定义一个对象b继承至对象a console.log(b.name); //=> admin b继承a的name属性,正常输出 console.log(b.age); //=>undefined b自己和继承对象都没有age属性,故输出undefined
但有一种状况:假如对象不存在,试图访问这个不存在对象的属性时则会抛异常。例如:
console.log(c.name); //Uncaught ReferenceError: c is not defined var d = null; console.log(d.name); //Uncaught TypeError: Cannot read property 'name' of null
因此,这就要求咱们在访问不肯定对象属性时须要验证一下。
var book = { "length": 21 }; var len = book && book.length; //这里用&&的第三种用法代替if。 console.log(len); //=>21
delete
运算符能够删除对象的属性,删除成功返回true
。可是delete
不能删除那些可配置型为false
的属性。只能删除自身属性,不能删除继承属性。
delete book.author // 返回true
删除全局属性时,能够直接省略全局对象,delete
后面跟上要删除的属性便可。
this.x=1; //建立一个全局属性 console.log(delete x); //=>true
所谓检测属性就是判断某个属性时候存在与某个对象中。通常能够经过in
运算符、hasOwnProperty()
和propertyIsEnumerable()
方法来完成验证工做。
in
运算符判断,若是对象自有属性或继承属性包含这个属性则返回true
。
var o = { "x": 5 }; console.log("x" in o); //=>true 对象o有属性x console.log("y" in o); //=>false 对象o没有属性x console.log("toString" in o); //=>true 对象o继承属性toString
hasOwnProperty()
方法用来检测给定属性是否为对象的自有属性,对于继承属性返回false
。
var o = { "x": 5 }; console.log(o.hasOwnProperty("x")); //=>true console.log(o.hasOwnProperty("toString")); //=>false
propertyIsEnumerable()
方法是hasOwnProperty()
的加强版。只有检测到属性为对象的自有属性而且这个属性可枚举性时才返回true
。
var o = Object.create({ "y": 5 }); o.x = 6; console.log(o.propertyIsEnumerable("x")); //=>true x为自有属性 console.log(o.propertyIsEnumerable("y")); //=>false y是继承属性 console.log(Object.prototype.propertyIsEnumerable("toString")); //=>false toString不可枚举
ECMAScript 5版本中,对象能够用get
和set
关键字定义像C#、Java等高级语言同样的保护属性。这种属性被称为“存取器属性”,它是能够继承的。
var obj = { //数据属性(可当作字段) data: null, //存取器属性(保护属性) get Data() { return this.data; }, set Data(value) { this.data = value; } }; obj.Data = "admin"; console.log(obj.data); //=>admin
怎么样,有没有感受和JAVA中的保护属性写法很像。由于JavaScript自己就是一种面向对象的编程语言。
若是对象属性同时具备get
和set
方法,那么它是一个可读/写的属性。若是属性只有一个get
方法,那么它是一个只读属性。若是属性只有一个set
方法,那么它是一个只写属性,读取只写属性老是返回undefined
。
ECMAScript 3版本下对象的属性都是否可写、可配置和可枚举的,可是到ECMAScript 5版本下是属性是能够经过一些API来标识是否为可写、可配置和可枚举的。这API也就是所谓的属性的特性。
ECMAScript 5中定义了一个Object.getOwnPropertyDescriptor()
方法用来查询对象特定属性的特性,返回一个“属性描述符”对象,该对象就表明对象属性的4个特性。
var descriptor = Object.getOwnPropertyDescriptor({ length: 50 }, "length"); console.log(descriptor); //=> descriptor = { value: 50, writable: true, enumerable: true, configurable: true } //------------------------------------------------------------------ var random = { //只读属性:返回一个0-255之间的随机数 get octet() { return Math.floor(Math.random() * 256); } }; var descriptor1= Object.getOwnPropertyDescriptor(random,"octet"); console.log(descriptor1); //=> descriptor1 = Object {set: undefined, enumerable: true, configurable: true}
从名字能够看出该方法只能获得对象自有属性的描述符,因此对于继承属性和不存在的属性,返回undefined
。要得到继承属性的特性,须要遍历原型链。
要想设置属性或让新建立属性具备某种特性,则须要调用Object.defineProperty()
方法,第一个参数是要修改的对象;第二个参数是要修改的属性;第三个是属性描述符对象。返回值为修改后的对象副本。
var o = {}; //建立一个空对象 Object.defineProperty(o, "x", { value: 1, //定义一个x属性,赋值为1 writable: true, //可写 enumerable: false, //不可枚举 configurable: true //可配置 }); if (o.x) console.log(Object.keys(o)); //=> props = [] 属性存在,可是不能枚举 Object.defineProperty(o, "x", { writable: false }); //让属性x变为只读 o.x = 2; //试图修改属性x的值失败,但不报错 console.log(o.x); //=>1 Object.defineProperty(o, "x", { value: 2 }); //但属性x依然为可配置,能够直接修改value值特性。 console.log(o.x); //=>2 Object.defineProperty(o, "x", { //将数据属性修改成存取器属性 get: function () { return 0; } }); console.log(o.x); //=>0
该方法一样不能设置继承属性的特性。若是须要同时修改多个自有属性的特性可使用Object.defineProperties()
方法。第一个参数是要修改的对象;第二参数是一个映射表对象,它包含属性名称和对应属性的描述符对象。
var p = Object.defineProperties({}, { x: { value: 3, writable: true, enumerable: true, configurable: true }, y: { value: 4, writable: true, enumerable: true, configurable: true }, r: { get: function () { return Math.sqrt(this.x * this.x + this.y * this.y); }, enumerable: true, configurable: true } }); console.log(p.r); //=>5
原型属性
对象的原型是用来继承属性的,这个属性很是重要,以致于常常把“o的原型属性”直接叫作“o的原型”。
原型属性是在对象建立之初就设置好的。前面已对原型作过介绍,但这里仍是要补充补充。
Object.prototype
做为原型;prototype
做为原型;Object.create()
建立的对象使用第一个参数做为原型。在ES5版本中,将对象传入Object.getPrototypeOf()
方法能够查询它的原型对象。
想要检测一个对象是不是另外一个对象的原型可使用isPrototypeOf()
方法。
var a = { x: 2 }; var b = Object.create(a); console.log(a.isPrototypeOf(b)); //=> true console.log(Object.prototype.isPrototypeOf(b));//=> true
类属性
对象的类属性是一个字符串,用来表示对象的类型信息。可是JS中没有提供直接查询方法,只能用一种间接的方法查询,能够调用对象的toString()
方法,而后提取返回字符串的第8个字符至倒数第二个位置之间的字符。若是对象继承的toString()
方法重写了,这时必须间接经过Function.call()
方法调用。
function classof(o) { if (o === null) return "Null"; if (o === undefined) return "Undefined"; return Object.prototype.toString.call(o).slice(8,-1); }
classof()
能够接收任何类型的参数,而且该函数包含了对null
和undefined
的特殊处理。
console.log(classof(null)); //=> "Null" console.log(classof(1)); //=> "Number" console.log(classof("")); //=> "String" console.log(classof(false)); //=> "Boolen" console.log(classof({})); //=> "Object" console.log(classof(/./)); //=> "Regexp" console.log(classof(window)); //=> "Window"(浏览器宿主对象类)
可扩展性
对象的可扩展行用来表示是否能够给对象添加新属性。ECMAScript 5版本中,全部自定义对象、内置对象和宿主对象默认支持可扩展性。下面介绍几个检测和设置对象可扩展性的方法以及它们之间的区别。
Object.preventExtensions()
方法能将传入对象设置为不可扩展的。须要注意的两点是:1.一旦对象转为不可扩展的,就没法再将其转换成可扩展的;2.若是给一个不可扩展的对象的原型添加属性,这个不可扩展的对象一样会继承这些新属性。Object.isExtensible()
方法能够检测传入对象的可扩展性。
Object.seal()
方法能将传入对象设置为不可扩展的,而且将对象全部自有属性都设置为不可配置的。也就是说不能给这个对象添加新属性,并且也不能删除或配置已有属性。对于已经密封的对象一样不能解封,可使用Object.isSealed()
方法检测对象是否封闭。
Object.freeze()
方法更“狠”,它会直接将对象冻结。除了将对象设置为不可扩展和其属性设置为不可配置以外,还将对象自有属性的全部数据属性设置为只读属性。可使用Object.isFrozen()
方法检测对象是否被冻结。
Object.preventExtensions()
、Object.seal()
和Object.freeze()
三个方法都返回传入的对象。
相信你们对JSON都不陌生,其实该小节就是介绍JSON序列化。所谓序列化就是JS对象和字符串之间的互相转换,JSON做为数据交换格式。ECMAScript 5 中提供两个内置函数JSON.stringify()
和JSON.parse()
用来序列化和还原JS对象。
var obj = { x: 3, y: 5 }; //定义一个测试对象 var str = JSON.stringify(obj); //str = "{"x":3,"y":5}" obj = JSON.parse(str); //obj = Object {x: 3, y: 5}
JSON的全称是“JavaScript Object Notation”---JavaScript对象表示法。JSON的语法并不能表示JavaScript里全部的全部值。支持序列化和还原的有对象、NaN、数组、字符串、无穷大数字、true\false和null。函数、RegExp、Error对象和undefined值不能序列化和还原。JSON.stringify()
函数只能序列化对象可枚举的自有属性。日期对象序列化的结果是ISO格式的日期字符串。
本篇内容源自我对《JavaScript权威指南》第6章-对象 章节的阅读总结和代码实践。总结的比较粗糙,你也可经过原著或MDN更深刻了解对象。
[1] David Flanagan,JavaScript权威指南(第6版)
[2] MDN,JavaScript 参考文档 - Array - JavaScript | MDN