数据劫持与代理

Object.DefineProperty实现数据劫持

介绍和应用场景

• 涉及双向绑定的原理
• 作用：可以往一个对象中添加属性，根据传参的配置对象，可以让这个属性和普通对象属性有些不同
• 应用：当对象中的属性值来自对象外部的变量时，更改变量的值，对象中的值也想同步更改
• 如果想外部的改变可以同步到内部，就需要用到Object.DefineProperty

语法：

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty(对象,想要修改或添加的key值,{
     //数据描述符 
   configurable: false, //为true值才可被修改删除，默认为false
   enumerable: false, //为true值才可被遍历枚举到，否则无法出现在循环中
   value: '0',  //可以为任何有效的值，如数字，字符串，对象，方法之类的
   writable： false, // 只有为true时才可以直接被=赋值运算符修改
     //存取描述符
   get: function(), //当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
   set: function()  ,//当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
})

参数说明：

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

返回值：

传入函数的对象。即第一个参数obj

Proxy的使用

代理Proxy是一个构造函数，是ES6提供的一个新的API，经过new使用，传入第一个参数为obj，第二个参数为{}，

Object.defineProperty只能监听属性，而Proxy能监听整个对象，省去对非对象或数组类型的劫持，也能做到监听。