使用setter在對象屬性更改時調度事件

Question

每次更改對象屬性時是否可以使用setter/getter來分派事件？通過改變，我的意思是成員添加，刪除或更新。

下面是我嘗試實現的一個非工作示例。每次將成員添加到instance._dataStore時，instance都應觸發事件。

var EventDispatcherObject = require("EventDispatcherObject"); 

var instance = new EventDispatcherObject(); 

//This is a non-working attempt to use setter to dispatch event 
Object.defineProperty(instance, "_dataStore", { 
      get : function() { 
        return this_dataStore; 
      }, 
      set : function(data) { 
        this._dataStore[data] = data; 
        this.dispatchEvent("_dataStoreChanged"); 
      } 
}); 


var data = [{id: "A", data: "abc"}, {id: "B", data: "def"}, {id: "C", data: "ghi"}]; 

for (var i=0; i < data.length; i++) { 
    instance._dataStore[data[i].id] = data[i]; 
} 

//should return: 
console.log(instance._dataStore); 
>>> { 
     A : {id: "A", data: "abc"}, 
     B : {id: "B", data: "def"}, 
     C : {id: "C", data: "ghi"} 
    } 
console.log(instance._dataStore[A]); 
>>> {id: "A", data "abc"} 

其實這非工作示例返回錯誤：

InternalError: too much recursion: return this._dataStore; 

Answer 1

你的二傳手是爲_dataStore屬性定義，而不是爲_dataStore財產的性能。所以只有在您分配_dataStore時纔會觸發。

您應該調查使用Proxy，而不是;這可以讓你鉤到任何二傳手，而普通的二傳手只有特定的屬性。

this._backingData = {}; 
this._dataStore = new Proxy(this._backingData, { 
    set(target, prop, value, receiver) { 
    target[prop] = value; 
    this.dispatchEvent("_dataStoreChanged");   
    } 
});