JavaScript Class Getter/Setter

Question

is there a way to listen for a property call on a JavaScript Class

for example when i go something like this:

myForm = new Form(); myForm.name = 'Name';

-> when i set the name i dont only want to set the property but i also want to update my Vuex store. Same thing with get i would like to read from Vuex store.

I knoew there are thins like Proxy but for this i need to wrap my Class with a Proxy object. Not so sure if i like this.

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

What i need is something like this:

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

it there a best practice for this?

Possible duplicate of Javascript getters and setters for dummies? — notgiorgi
– notgiorgi, Commented Apr 18, 2018 at 8:52
@notgiorgi, It's not a duplicate. The OP asks about setting getters and setters for every property, even those that are not defined. — Stefan Octavian
– Stefan Octavian, Commented Apr 18, 2018 at 8:55
Don't use a proxy when you know the names of your getters/setters beforehand. — Bergi
– Bergi, Commented Apr 18, 2018 at 9:13

Jamiec · Accepted Answer · 2018-04-18 09:09:37Z

Javascript supports getters and 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);

You could make this more dynamic by writing a withGetterSetter method which wraps each property of an object with a 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);

It works by copying each property p to a new object with p_internal and creating a dynamic get/set for the original property name.

My guess is that OP wants some generic getter/setter for all properties at once.
but like this i would need to set up a setter/getter for every property? edit: @dfsq yap
@therabbityouknow how many properties do you have?? How much extra work is it to wrap each?
i mean if i had to possibility to define the setters and getters in my constructor for all my fields that the form contains , guess it would be fine. I could call new Form(fields). The only thing is it should by dynamic.
defineProperty only works with objects right? Hmm ill give this a try. Thank you.

Collectives™ on Stack Overflow

JavaScript Class Getter/Setter

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related