[javascript] 재산 변경에 대한 중단 점

2016.03 수정 : Object.observeChrome 50에서 더 이상 사용되지 않고 제거되었습니다.

2014.05 수정 : Object.observeChrome 36에 추가되었습니다

Chrome 36 Object.observe은 여기에서 활용할 수있는 기본 구현 과 함께 제공됩니다.

myObj = {a: 1, b: 2};
Object.observe(myObj, function (changes){
    console.log("Changes:");
    console.log(changes);
    debugger;
})
myObj.a = 42;

일시적으로 만 원한다면 변수에 콜백을 저장하고 Object.unobserve완료되면 호출해야 합니다.

myObj = {a: 1, b: 2};
func = function() {debugger;}
Object.observe(myObj, func);
myObj.a = 42;
Object.unobserve(myObj, func);
myObj.a = 84;

을 (를) 사용하는 경우 Object.observe과제가 변경되지 않은 경우 (예 : 글을 쓴 경우) 알림이 표시되지 않습니다 myObj.a = 1.

호출 스택을 보려면 개발자 도구에서 “비동기 호출 스택”옵션을 활성화해야합니다.

원래 답변 (2012.07) :

console.watch@katspaugh에 의해 제안 스케치 :

var console = console || {}; // just in case
console.watch = function(oObj, sProp) {
   var sPrivateProp = "$_"+sProp+"_$"; // to minimize the name clash risk
   oObj[sPrivateProp] = oObj[sProp];

   // overwrite with accessor
   Object.defineProperty(oObj, sProp, {
       get: function () {
           return oObj[sPrivateProp];
       },

       set: function (value) {
           //console.log("setting " + sProp + " to " + value); 
           debugger; // sets breakpoint
           oObj[sPrivateProp] = value;
       }
   });
}

기도:

console.watch(obj, "someProp");

적합성:

• Chrome 20에서는 런타임에 개발자 도구에 직접 붙여 넣을 수 있습니다!
• 완벽 함 : Firebug 1.10 (Firefox 14)에서는 웹 사이트에 소스를 삽입해야합니다 (예 : 소스를 수동으로 편집 할 수없는 경우 Fiddler를 통해). 슬프게도 Firebug에서 정의 된 기능은 깨지지 않는 것 같습니다 debugger(또는 구성의 문제입니까? 그런 다음 나를 수정하십시오) console.log.

편집하다:

console.watchFirefox의 비표준으로 인해 Firefox에는 이미 존재합니다 Object.watch. 따라서 Firefox에서는 기본적으로 변경 사항을 감시 할 수 있습니다.

>>> var obj = { foo: 42 }
>>> obj.watch('foo', function() { console.log('changed') })
>>> obj.foo = 69
changed
69

그러나 이것은 곧 (2017 년 말) 제거 될 것 입니다.

답변

breakOn(myObject, 'myProperty');

const originalObject = {property: 'XXX', propertyToWatch: 'YYY'};
const watchedProp = 'propertyToWatch';
const handler = {
  set(target, key, value) {
    if (key === watchedProp) {
      debugger;
    }
    target[key] = value;
  }
};
const wrappedObject = new Proxy(originalObject, handler);

function debugProperty(obj, propertyName) {
  // save in another property
  obj['_' + propertyName] = obj[propertyName];

  // overwrite with accessor
  Object.defineProperty(obj, propertyName, {
    get: function() {
      return obj['_' + propertyName];
    },

    set: function(value) {
      debugger; // sets breakpoint
      obj['_' + propertyName] = value;
    }
  });
}

(function (global) {
  global.observeObject = (obj, prop) => {
    let value

    Object.defineProperty(obj, prop, {
      get: function () {
        return value
      },

      set: function (newValue) {
        debugger
        value = newValue
      },
    })
  }
})(typeof process !== 'undefined' ? process : window)