如何使用javascript代理嵌套对象

Question

我在js bin中有这个代码:

var validator = {
  set (target, key, value) {
    console.log(target);
    console.log(key);
    console.log(value);
    if(isObject(target[key])){

    }
    return true
  }
}


var person = {
      firstName: "alfred",
      lastName: "john",
      inner: {
        salary: 8250,
        Proffesion: ".NET Developer"
      }
}
var proxy = new Proxy(person, validator)
proxy.inner.salary = 'foo'

如果我这样做proxy.inner.salary = 555;不起作用.

但是,如果我这样做proxy.firstName = "Anne",那么它的效果很好.

我不明白为什么它不起作用递归.

http://jsbin.com/dinerotiwe/edit?html,js,console

Answer 1

您可以添加get陷阱并返回一个新的代理validator作为处理程序:

var validator = {
  get(target, key) {
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], validator)
    } else {
      return target[key];
    }
  },
  set (target, key, value) {
    console.log(target);
    console.log(key);
    console.log(value);
    return true
  }
}


var person = {
      firstName: "alfred",
      lastName: "john",
      inner: {
        salary: 8250,
        Proffesion: ".NET Developer"
      }
}
var proxy = new Proxy(person, validator)
proxy.inner.salary = 'foo'

Answer 2

对Micha的示例稍作修改？Per?akowski与这种方法的好处是嵌套代理只创建一次，而不是每次访问一个值。

如果正在访问的代理的属性是一个对象或数组，则该属性的值将替换为另一个代理。isProxygetter 中的属性用于检测当前访问的对象是否为代理。您可能希望更改 的名称isProxy以避免与存储对象的属性发生命名冲突。

注意：嵌套代理是在 getter 而不是 setter 中定义的，因此只有在数据实际在某处使用时才会创建它。这可能适合也可能不适合您的用例。

const handler = {
  get(target, key) {
    if (key == 'isProxy')
      return true;

    const prop = target[key];

    // return if property not found
    if (typeof prop == 'undefined')
      return;

    // set value as proxy if object
    if (!prop.isProxy && typeof prop === 'object')
      target[key] = new Proxy(prop, handler);

    return target[key];
  },
  set(target, key, value) {
    console.log('Setting', target, `.${key} to equal`, value);

    // todo : call callback

    target[key] = value;
    return true;
  }
};

const test = {
  string: "data",
  number: 231321,
  object: {
    string: "data",
    number: 32434
  },
  array: [
    1, 2, 3, 4, 5
  ],
};

const proxy = new Proxy(test, handler);

console.log(proxy);
console.log(proxy.string); // "data"

proxy.string = "Hello";

console.log(proxy.string); // "Hello"

console.log(proxy.object); // { "string": "data", "number": 32434 }

proxy.object.string = "World";

console.log(proxy.object.string); // "World"

Answer 3

我在GitHub上发布了一个库,它也是这样做的.它还将向回调函数报告已完成的修改及其完整路径.

Michal的答案很好,但Proxy 每次访问嵌套对象时都会创建一个新的.根据您的使用情况,这可能会导致非常大的内存开销.