Question

126

JavaScript Class Getter/Setter

rated 0 times [ 132] [ 6] / answers: 1 / hits: 34123 / 6 Years ago, wed, april 18, 2018, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminkyrap

Add To Favorites

Follow

Total Points: 631

Total Questions: 89

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

jazminkyrap questions

1 How to fix error: Fontconfig error: Cannot load default config file

Sat, Apr 17, 21, 00:00, 3 Years ago

1 How to return an attribute of clicked element in react?

Sun, Jul 5, 20, 00:00, 4 Years ago

1 why do I got Uncaught TypeError: response.text is not a function error when try to assignt body received as text to a variable in javascript

Sat, May 16, 20, 00:00, 4 Years ago

1 Error This line has a length of 182. Maximum allowed is 100 max-len

Thu, Apr 16, 20, 00:00, 4 Years ago

1 Selecting an html node's text content with htmlparser2 in Node.js

Mon, May 27, 19, 00:00, 5 Years ago

View All

answered 6 Years ago brandt · Accepted Answer

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.