JavaScript類Getter / Setter

Question

有沒有辦法在JavaScript類上偵聽屬性調用

例如，當我這樣的事情：

myForm =  new Form();

myForm.name = 'Name'; 

- >當我設置名稱時，我不想只設置屬性，但我也想更新我的Vuex商店。 同樣的事情get我想從Vuex存儲讀取。

我知道有像Proxy這樣的東西，但為此我需要用Proxy對象包裝我的Class。 不確定我是否喜歡這個。

module.exports = new Proxy(new Form({}), {
    get (receiver, name) {
        console.log('getting property from Vuex Store');
    }
});

我需要的是這樣的事情：

module.exports = class Form {

//this should be triggered when form.something
get(property) {
return this[property];
}

//this should be triggered when from.something = 'something'
set(property, value) { 
return this[property] = value;
}
};

它有一個最好的做法嗎？

Answer 1

Javascript支持getter和setter

 class Form{ set foo(val){ console.log("setting foo") this.fooValue = val; } get foo(){ console.log("getting foo"); return this.fooValue; } } let frm = new Form(); frm.foo = "bar"; console.log(frm.foo); 

您可以通過編寫withGetterSetter方法使其更具動態性，該方法使用getter / setter包裝對象的每個屬性。

 var form = { a: "aValue", b: "bValue" } function withGetterSetter(obj){ var keys = Object.keys(obj); var result = {}; for(var i=0;i<keys.length;i++){ var key = keys[i]; result[key+"_internal"] = obj[key]; (function(k){ Object.defineProperty(result,k, { get:function() { console.log("getting property:",k); return this[k + "_internal"]; }, set: function(x) { console.log("setting property:",k); this[k + "_internal"] = x } }); })(key) } return result; } var setterObj = withGetterSetter(form); console.log(setterObj.a); setterObj.a = "updated"; console.log(setterObj.a); 

它的工作原理是將每個屬性p復制到一個帶有p_internal的新對象，並為原始屬性名稱創建一個動態get / set。