Object.defineProperty的理解

Hellow 大家好 今天我来给各位小伙伴讲一下vue实现数据变化监听的方法 Object.defineProperty
（若出现错误可在下方给小苏留言喔）

1.首先我们来看一下Object.defineProperty接收的参数

Object.defineProperty(obj,prop,descriptor)
obj→相当于传入的一个对象
prop→相当于是要定义或修改的属性的名称。
descriptor→将被定义或修改的属性描述符。

2.descriptor属性描述符

数据描述符和存取描述符均具有以下可选键值：

value
该属性对应的值。可以是任何有效的JavaScript值（数值，对象，函数等）。默认为undefind

configurable
当configurable设置为True时该属性描述符才能够改变，同时该属性也能从对应的对象上被删除。默认为false

writable
当改属性设置为true时，value才能被赋值运算符改变	。默认为false。

enumerable
当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

存取描述符同时具有以下可选键值：

get
一个给属性提供getter的方法，如果没有getter则为undefind。当访问prop属性时，该方法就会立即执行，方法执行没有传入参数时，但是会传入this对象（这里的this并不一定是定义该属性的对象）
默认为：undefind

set
一个给属性提供setter的方法，如果没有setter则为undefind。当监听到prop属性修改时，该方法就会立即执行，该方法接收一个参数为修改后属性的新值，。
默认为： undefind

例子：

=============代码我会在一一解答================

var data = {
	name: '小苏',
	age: 22,
	sex: '男'
}
//我们使用forEach将data的属性进行遍历出来
Object.keys(data).forEach(function(key){
	Object.defineProperty(data,key,{
		enumerable: true,		//当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
		configurable: false,		//当configurable设置为True时该属性描述符才能够改变，同时该属性也能从对应的对象上被删除。默认为false
		get: function(){
			console.log('获取到属性值为：'+this.value)
			return this.value
		},
		set: function(newValue){
			console.log(key+'属性值发生了变化,变化后为：'+newValue);
			this.value = newValue;
		}
	})
})

当我们执行之一段代码，我们去获取data.name属性的值的时候我们会发现，为什么获取的值是undefined呢？

接下来我们就再通过下面一段代码去看看它是为什么回这样


此时我们又能获取到了data.name属性的值，但是此时获取到的属性的值却是setter改变之后的值，由此我们不难看出，因为一开始我们就进入到了getter但是此时的this.value是没有值的，因为返回给我们的当然也就是undefinde了。而后面我们通过data.name = 'sd’调用了setter的方法此时 this.value的值也被赋予了newValue所以此时getter方法调用时就会返回this.value的值，但是这样做还是会有Bug，因为当你再获取data的其他属性时你会发现返回的永远都是那个newValue；

那么我们要怎么去解决这个问题呢
方法很简单，我们可以用闭包的方法去实现就可以了。

writable使用案例：
当设置为false时此时控制台就会报错

configurable使用案例：
当设置configurable为false时，此时控制台就会报错了，因为你不能删除设置了不能删除当前这个属性

当一个描述符不具有value,writable,get,set任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有（value或writable）和（get或set）关键字，将会产生一个异常。

！！！！当描述符同时有value或writable 和 get或set关键字时，将会产生一个异常

此时我们就会在控制台看见报错

当我们翻译这段报错的时候就可以看到：

类型错误:属性描述符无效。不能同时指定访问器和一个value或可写属性#

更多精彩的博客请关注小苏的CSDN账号喔也可以小苏的 扣扣： 1092453305 来讨论更多的学习问题