ES5 Object.defineproperty和 ES6 Proxy

语法：Object.defineProperty(obj,property,descriptor)
参数一：obj
绑定属性的目标对象
参数二：property
绑定的属性名
参数三：descriptor
属性描述（配置），且此参数本身为一个对象

• 属性值1：value
  设置属性默认值
• 属性值2：writable
  设置属性是否能够修改
• 属性值3：enumerable
  设置属性是否可以枚举，即是否允许遍历
• 属性值4：configurable
  设置属性是否可以删除或编辑
• 属性值5：get
  获取属性的值
• 属性值6：set
  设置属性的值

代码示例：

		var obj = {
			count : 0,
			list : [1,2,4]
		}
		var target = {};
	   
        for (let key in obj){
			Object.defineProperty(target,key,{
				value: obj[key],
                get: function(){
					return obj[key]
				}，
				set: function(val){
					console.log(val);//打印设置好的值
				}
			})
		}
		console.log(target.count);//读取count属性的值为0，触发get属性
        target.count = 10;//修改count属性的值为10，触发set属性
        target.Name='张三'; //添加属性不会触发get和set 但是target会包含Name属性
        Delate target.count  //删除属性不会触发get和set 但是target不会包含count属性
        

 

 Proxy 语法

var p = new Proxy(target, handler);//p是代理对象 target是目标对象 handler是处理器包含defineProperty里的get和set，除此之外还包含很多，比如deleteProperty等

代码示例 

 let target = {
   name: 'obj'
 };

 let targetWithLog = new Proxy(target, {
   get: function(target, key) {
     console.log(`${key} 被读取`);
     return target[key]; //vue3中使用反射 return Reflect.get(target, key)
   },
   set: function(target, key, value) {
     console.log(`${key} 被设置为 ${value}`);
     target[key] = value;//vue3中使用反射 return Reflect.set(target, key, value)   
   },
   deleteProperty(target, key){
    console.log(`${key} 被删除`);
     target[key] = value;//vue3中使用反射 return Reflect.deleteProperty(target, key)   
   }
 });

 targetWithLog.name; // 控制台输出：name 被读取
 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
 console.log(target.name); // 控制台输出: others
 delete targetWithLog.name  // target ：{}