Прокси-объект окна для обнаружения изменений

Question

Могу ли я прокси-объект window для обнаружения изменений? Я безуспешно пробовал следующее:

var handler = {
  get: function(target, property) {
    console.log("getting " + property + " for " + target);
    return target[property];
  },
  set: function(target, property, value, receiver) {
    console.log("setting " + property + " for " + target + " with value " + value);
    target[property] = value;
    return true;
  },
};
var p = new Proxy(window, handler);
setTimeout(() => {
  window.a = 10; // expecting a log, but nothing...
}, 3000);
setTimeout(() => {
  window.c = 20; // expecting a log, but nothing...
}, 4000);

Answer 1

Вы должны ссылаться на экземпляр Proxy в нижнем коде, а не на window:

var handler = {
  get: function(target, property) {
    console.log("getting " + property + " for " + target);
    return target[property];
  },
  set: function(target, property, value, receiver) {
    console.log("setting " + property + " for " + target + " with value " + value);
    target[property] = value;
    return true;
  },
};
var p = new Proxy(window, handler);

setTimeout(() => {
  p.a = 10;    // <------------
}, 300);
setTimeout(() => {
  p.c = 20;    // <------------
}, 400);

Если вы не можете изменить код, который ссылается на window, вы также можете назвать прокси window (и сохранить ссылку на истинное окно в другой переменной), но код для этого будет выглядеть запутанным.

Если он находится в отдельном файле сценария, описанный выше трюк не сработает, и вы не сможете использовать Proxy - в конце концов, вы не можете переопределить объект окна. Если вы ищете изменение для определенного свойства в window, вы можете использовать defineProperty и заставить установщик перезаписать дескриптор свойства новым значением, когда ему присваивается:

Object.defineProperty(window, 'a', {
  configurable: true,
  set(value) {
    console.log("setting with value " + value);
    Object.defineProperty(window, 'a', { value });
  }
});

setTimeout(() => {
  window.a = 10;
  console.log(window.a);
}, 300);