JavaScript类Getter / Setter

Question

有没有办法在JavaScript类上监听属性调用

例如当我这样做的时候：

myForm =  new Form();

myForm.name = 'Name'; 

- ＆GT;当我设置名称我不想只设置属性，但我也想更新我的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支持getters和setters

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);

通过编写一个用getter / setter包装对象的每个属性的withGetterSetter方法，可以使它更具动态性。

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。