Javascript ES6 代理

Question

我需要创建一个对象来存储另一个对象。大对象的每个属性都有两个属性'value'和'callback'。

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

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

每次属性 'value'改变，我想调用它的回调函数

这是我所做的

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.

关于我如何更改代码以使其正常工作，您有什么想法吗？

谢谢。

Answer 1

按照您设置的方式，proxy.first 返回一个布尔值。所以 proxy.first.callback = 最终成为 false.callback = 或 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;

Javascript ES6 代理

Javascript ES6 Proxy

javascript

proxy

ecmascript-6

es6-proxy