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.