0

我需要创建一个存储另一个对象的对象。大对象的每个属性都有两个属性“值”和“回调”。

let bigObj = {
    first: {
        value: true,
        callback: () => {}
    },
    second: {
        value: false,
        callback: () => {}
    }, {...}
}

我希望能够通过使用 bigObj.first / bigObj.first = "false" 和回调来获取和更改 value 属性。通过经典方法：bigObj.first.callback = () => {}。

每次更改属性“值”时，我都想调用它的回调函数。

这就是我所做的

var proxy = new Proxy({
    first: {
        value: true,
        callback: () => {}
    }
}, {
    get(target, key) {
        return key in target ? target[key].value : null;
    },
    set(target, key, value) {
        target[key] ? target[key].value = value : target[key] = {value, callback: () => {}};
        key !== 'callback' && target[key].callback();
        return true;
    }
});

问题是我无法更改回调属性。

proxy.first.callback = () => console.log('new cb'); // won't do anything.

您对我如何更改代码以使其正常工作有任何想法吗？

谢谢你。

4

1 回答 1

1

您设置它的方式proxy.first是返回一个布尔值。所以proxy.first.callback =最后是false.callback =or true.callback =。这些至少不会抛出异常，但它们没用。如果值是对象而不是布尔值，则可以使值本身成为代理，但不能创建以非对象为目标的代理。

另一种选择是有一个你首先设置的特殊值，告诉它插入回调。下面是一个例子，如果你传入一个像 {callback: () => {}} 这样的对象，那么它将作为回调插入。但其他任何东西都会被设置为值。

var proxy = new Proxy({
    first: {
        value: true,
        callback: () => {}
    }
}, {
    get(target, key) {
        return key in target ? target[key].value : null;
    },
    set(target, key, value) {
        if (value && value.callback) {
           target[key] ? target[key].callback = value.callback : target[key] = {value: null, callback: value.callback};
           return true;
        } else {
          target[key] ? target[key].value = value : target[key] = {value, callback: () => {}};
          target[key].callback();
          return true;
        }
    }
});

proxy.first = {callback: () => console.log('got a callback')};

proxy.first = false;

于 2017-10-05T21:36:36.923 回答