Как сделать proxy ловушку для добавления в массив внутри объекта?

Question

[Миша]

Код максимум упростил для понятности

let threads = {
    max: 50,
    used: 0,
    waiting: []
}

threads = new Proxy(threads, {
    set(target, prop, val) {
        console.log('Изменение')
        return true
    }
})

threads.max = 100 // срабатывает
threads.waiting.push({ name: 'example' }) // не срабатывает

При попытке назначения max или used ловушка срабатывает или если попробовать назначить threads.waiting = значение, но при методе push - ничего не происходит. Почему?

Answer 1

[Сергей Соколов]

Потому, что сам массив waiting не заменяется. Остаётся каким был.
Вызывается лишь его какой-то там метод.

Comments

[Миша]

Как тогда это отработать?
В голову приходит только что-то типа вызывать:
threads.waiting = { name: 'example' }
а потом перехватывать это значение и вносить его в массив, но может лучше вариант есть?

[Антон Антон]

Миша, создавать прокси рекурсивно

[Миша]

Спасибо за пояснение, разобрался:

threads.waiting = [..threads.waiting, { name: 'example' }]

работает

[Миша]

Антон Антон, это как?

Answer 2

[foxjkeeWOW]

let media = {};
media['value'] = [];

const proxyMedia = new Proxy(media, {
  get(target, property) {
    if (property === 'value') {
      return new Proxy(target[property], {
        set(obj, prop, value) {
          // Ловушка для отслеживания изменений в массиве
          console.log(`Изменение в массиве: ${value}`);
          obj[prop] = value;
          return true;
        }
      });
    }
    return target[property];
  }
});

proxyMedia['value'].push('string');