定义对象
两种方式定义对象
let person = new Object()
obj.name = '蛙人'
obj.age = 23
obj.sex = 'male'
obj.getAge = function() {
return this.age
}
上面的例子创建了一个person对象实例，并为它添加了属性及方法,在早期js开发人员经常使用这种方式，但是现在对象字面量成了首先方式，看一下字面量定义对象。
let person = {
name: '蛙人',
age: 23,
sex: 'male',
getAge() {
return this.age
}
}
可以看到上面这种使用字面量的方式定义对象更加简洁明了,字面量的方式跟第一种定义方式是一样的。
属性类型
在说数据属性时，咱们先来讲一下js里的内部属性, 在Es5版本中，在定义只有内部才用的特性attribute时，描述了属性property的各种
特征, 定义这些特性是为了实现js引擎用的，因此在js里无法访问内部属性，内部属性是两个中括号括起来的例如 [[Enumerable]]。
数据属性
数据属性包含一个数据值的位置，在这个位置可以进行读取和写入值，那么这就是数据属性描述对象。
-
[[Configuralbe]]: 表示是否可以delete删除该属性，是否能在对象上定义其它属性，是否能修改属性值，默认返回true。 -
[[Enumerable]]：表示是否可以枚举该属性for in, 默认返回true。 -
[[Writeable]]: 表示是否可以读写改属性，默认返回true。 -
[[Value]]: 表示属性值的位置，每次读取属性的时，从这个[[Value]]内部属性返回值，写入属性值的时候，把值保存在这个位置，默认返回undefined，这也就是我们所读取对象上不存在的属性时，返回undefined的原因。
理论讲完了，那么直接上代码一把梭
[[Value]]
let person = {
name: '蛙人'
}
上面example中定义属性name，为它的值默认 “蛙人” 也就是说，在内部属性 [[Value]] 中保存了该值, 从这点我们明白，只要是对象中修改或写入值，都会触发内部属性 [[Value]]。
修改属性描述对象
如果要修改数据属性的描述对象，使用Es5中Object.defineProperty()方法，这个方法接收三个参数，目标对象、要访问的属性、属性的描述对象，描述对象必须是: configurable、enumerable，writeable、value, 设置其中一或多属性，可以修改对应的描述属性值。
let person = {}
Object.defineProperty(person, 'name', {
writeable: false, // 不能写入
value: '你没有permission'
})
console.log(person.name) // 你没有permission
person.name = "蛙人"
console.log(person.name) // 你没有permission
在上面example中，我们设置了person对象描述对象为只读不可写，又为它设置了value属性，所以不管它怎么读取都返回你没有permission，怎么写都不可以，需要注意的是上面代码在严格模式下会抛出错误，在非严格模式下赋值操作则会忽略， 而且更为重要的一点，Object.defineProperty第三个参数必须写，不然code报错
访问器属性
数据访问器属性不包含数据值, 他们包含一对 getter和setter函数 (这两个函数不是必需的 可选)。
在读取访问器属性时，会调用getter函数，在写入访问器属性时，会调用setter函数，函数接收一个参数这个参数就是写入的值。
-
[[get]]：在读取属性时调用的函数，默认返回undefined -
[[set]]：在写入属性时调用的函数，默认返回undefined
访问器属性不能直接定义，使用Object.defineProperty()，请看下面 example
let person = {
_age: 23,
name: '蛙人'
}
Object.defineProperty(person, "age", {
get() {
return this._age
},
set(val) {
this._age = val
}
})
person.age = 24
上面example中，写入age属性就会触发访问器对象里的set函数，从而重新赋值，然后触发get方法，返回该属性值，上面使用了_age这种定义方式表示为常用的mark，表示只能通过对象方法访问的属性, 不要直接写在get函数返回里返回自身 如：this.age = xxx 这样会造成堆栈溢出
定义多个描述属性
Es5版本中还有一个Api方法是定义多个对象写入描述属性, 该方法接收2个参数，目标对象、属性值，请看下列example
let person = {}
Object.defineProperties(person, {
_age: {
value: 23
},
name: {
value: "蛙人"
},
age：{
get() {
return this._age
},
set(val) {
this._age = val;
}
}
})
上面example与 上一个example都是同样的代码效果，只不过定义方式不同，该方法不经常使用，大家知道就好。
获取对象的描述属性
Es5版本中定义了一个Api方法可以查看当前对象的描述属性，Object.getOwnPropertyDescriptor(), 该方法接收2个参数,目标对象、属性值。
let person = {
age: 23
}
let descriptor = Object.getOwnPropertyDescriptor(person, "age")
console.log(descriptor.writable) // true
console.log(descriptor) // {"value":23,"writable":true,"enumerable":true,"configurable":true}
上面example中可以清楚的看见当前的对象属性的描述对象，这样在出现bug的时候，我们也可以查看当前的描述属性是否可以更改，快速定位bug，在js中可以针对任何对象使用Object.getOwnPropertyDescriptor(), 包括BOM和DOM对象，兼容IE9 +、Firefox4+、Safari5+、Opera12+、Chrome。
<b>如果该文章对你有帮助，请点个赞吧</b>
网友评论