javascript use a function as a variable (getter)

Question

I'm just trying to get a "getter" in javascript in this way

var Product = function(){
  var self = this; 
  var _id = function() { 
    return self.styleCode + '-' + self.materialCode + '-' + self.colourCode; 
  }
  self.materialCode = ''
  self.colourCode = ''
  ..
  self.id = _id()
}
..
var obj = new Product();
//.. initialize properies
obj.id // = "--"

But it seems doesn't call the function every time as I believed. I tried to use this Javascript: Use function as variable something like this

var Product = function(){
  var self = this; 
  self.materialCode = ''
  self.colourCode = ''
  ..
  get self.id() { return self.materialCode + '-' + self.colourCode; }
}

but I get an exception on the get keyword. Any idea? Thanks

get is not cross-browser. This reserved word don't run in all browsers. I try to provide you another solution, I'm searching for it — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Jul 30, 2015 at 12:43
If you look more closely, this syntax is used in an object initializer; I don't know if it will work in a function declaration. Also, the browser has to support it. — Jared Farrish
– Jared Farrish, Commented Jul 30, 2015 at 12:45

thefourtheye · Accepted Answer · 2015-07-30 12:44:10Z

4

You can define the id property on self, with Object.defineProperty, like this

Object.defineProperty(self, 'id', {
    get: function () {
      return self.materialCode + '-' + self.colourCode;
    }
});

You can see this example from MDN, for reference.

answered Jul 30, 2015 at 12:44

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DevT Over a year ago

Thanks this works, is there any browsers compatibility issue ?

Mouser Over a year ago

@DevT: Yes, it's not supported IE8 and below. See MDN-article.

DevT Over a year ago

@Mouser this isn't good.. so this is the better way to do a getter but it isn't supported on IE8 and below.

Mouser Over a year ago

@DevT, yep, modern websites should't support those older browsers anymore. Windows 10 is coming. Time to wave goodbye to all IE browsers before IE10. However get and set is supported on DOM nodes in IE8.

Mouser · Accepted Answer · 2015-07-30 13:10:06Z

Use Object.defineProperty on MDN.

var Product = function(){
  var self = this; 
  self.materialCode = ''
  self.colourCode = ''

  Object.defineProperty(self, "id", {
        //printing the full code here
        get : function(){return self.materialCode + '-' + self.colourCode;},
        set : function(value){ null },
        enumerable : false,
        configurable : false
        //this is the default set up for Object.defineProperty when using getters and setters,
        //those two other properties default to false.
  });
}

var obj = new Product();
obj.materialCode = 124;
obj.colourCode = 5783;
alert(obj.id);

Just invoke with obj.id.

You can set the set and get function. And use it as a normal property declaration. I urge you to read the article on MDN to learn more about the possibilities.

Matteo Rubini · Accepted Answer · 2015-07-30 12:46:35Z

0

getter and setters are made in different way

with this code

self.id = _id();

you are storing in self.id return value of _id() called in constructor

with this code

get self.id()

you are declaring a getter with a parameter (correct way get id())

here you can find usefull information about getter/setter and don't forget firefox GETTER and SETTER

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

keep warning! this code do not work in non-firefox browsers!

answered Jul 30, 2015 at 12:46

Matteo Rubini

8215 silver badges9 bronze badges

Comments

uladzimir · Accepted Answer · 2015-07-30 12:50:48Z

0

Is another way

var xvar = new function(id){ 
    this.toString = this.valueOf = function() {
         return $(id).width();
    };
}('#y');

edited Jul 30, 2015 at 12:50

uladzimir

5,6897 gold badges34 silver badges51 bronze badges

answered Jul 30, 2015 at 12:45

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Collectives™ on Stack Overflow

javascript use a function as a variable (getter)

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related