ES6的Proxy代理多层结构数据 触发set方法的坑

Proxy代理多层结构Demo

 

//需要被代理的数据
var data=[
{name:"小明",age:12},{name:"小红",age:15},{name:"小蓝",age:17}
];
//代理后的数据对象 操作proxyData会影响data数据，但直接更改data不会触发get和set方法
const proxyData=new Proxy(data,{
        get(obj, index) {
            return obj[index];
        },
        set: function (target, key, value) {
                target[key] = value;
                return true;
        });
假设给proxyData[0]["name"]="小明_修改后" 不会触发proxyData的set方法，因为proxyData[0]对象的指向没有变。
目前我解决的方法是：在赋值的时候
let obj=proxyData[0];
obj["name"]="小明_修改后";
proxyData[0]=obj;
这种方法可以修改proxyData[0]对象的指向obj，从而触发set方法，但这种方法有一定局限性，当我们的数据有更多未知层的时候修改内层数据还是无法触发set方法。
然后在原来基础加一个递归，通过递归触发set
function deepProxy(obj, cb) {

 if (typeof obj === 'object') {

  for (let key in obj) {
   if (typeof obj[key] === 'object') {
    obj[key] = deepProxy(obj[key], cb);
   }
  }

 }

 return new Proxy(obj, {

  /**
   * @param {Object, Array} target 设置值的对象
   * @param {String} key 属性
   * @param {any} value 值
   * @param {Object} receiver this
   */
  set: function (target, key, value, receiver) {

   if (typeof value === 'object') {
    value = deepProxy(value, cb);
   }

   let cbType = target[key] == undefined ? 'create' : 'modify';

   //排除数组修改length回调
   if (!(Array.isArray(target) && key === 'length')) {
    cb(cbType, { target, key, value });
   }
   return Reflect.set(target, key, value, receiver);

  },
  deleteProperty(target, key) {
   cb('delete', { target, key });
   return Reflect.deleteProperty(target, key);
  }

 });

}


// 数组测试
let a = deepProxy([], (type, data) => {
 console.log(type, data);
});

a.push(1)
a.push({ a: 1 })

// 对象测试
let b = deepProxy({}, (type, data) => {
 console.log(type, data);
});

b.name = '大花猫花大';
b.info = {
 age: 10,
 data: {
  data: {
   data: {
    text: 1
   }
  }
 }
}

delete b.info.age;

　　

另外如果在"use strict"严格模式下，set方法需要返回true.