深入理解js对象

定义对象

两种方式定义对象

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。

如果该文章对你有帮助，请点个赞吧