Javascript ES6 Proxy

Question

Мне нужно создать объект, который хранит другие объекты. Каждое свойство большого объекта имеет два свойства: value и callback.

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

Я хочу иметь возможность получить и изменить свойство value с помощью 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;