跟蹤對象屬性值的修改, 設置斷點(Break on property change)

• 代碼
  • 　　

    //Break on property change
    (function () {
        var localValue;
    
        Object.defineProperty(targetObject, 'propertyName', {
            get: function() { //any access to the target property will call this method
                return localValue;
            },
            set: function(val) { //any modification to the target property will call this method
                debugger;
                localValue = val;
            }
        });
    }());

     

• Object.defineProperty
  • reference
    • segmentfault: 
      • 使用 Object.defineProperty
      • 解析神奇的 Object.defineProperty
    • MDN: Object.defineProperty()
  • Object.defineProperty是ECS5屬性，因此IE8如下無效
  • 實際應用例子
    
    • 數據雙向綁定
      • 　　

        Object.defineProperty(demo,'foobar',{
          get:function(){
            return v;
          },
          set:function(e){
            v = e;
            sow();
          }}
        );
        
        function sow(){
           $('body').html(demo.foobar) 
        }

         

    • 手動設置斷點
    • 設置屬性不可變
    • 移除屬性
      • 　　

        get: function () {
              throw new Error('Most middleware (like ' + name + ') is no longer bundled with Express and must be installed separately. Please see https://github.com/senchalabs/connect#middleware.');
            }

         

• debugger
  • reference: MDN - debugger