Having a getter and a function with the same name in javascript

Question

I need to make a change but continue providing backwards-compatibility for some time, but I can't figure out how to accomplish this.

I have an Object like this:

MyObject = (function() {
   // vars here and there

   var myVar

   // a bunch of code

   return {
     get myVar() { return myVar },
     myVar: function() { return myVar }
   }

}())

This doesn't work. I want to be able to get myVar both with

MyObject.myVar

and

MyObject.myVar()

Is it possible? Even better, is there any possibility to accomplish that and make it cross-browser compatible? (Right now I know the get notation is not supported by Internet Explorer)

Thanks.

UPDATE:

Because it seems not possible, is there any way to make what I have now, get myVar() browser-compatible with Internet Explorer? So all browsers can access MyObject.myVar

As long as I can continue providing a getter to myVar and it's compatible with Internet Explorer, there is no need to move to myVar() but I couldn't find a feasible solution to make the current way (MyObject.myVar) compatible other than moving to a function-like getter.

Doesn't make any sense. Why do you need to have both? Just use a function, it works everywhere. — Esailija
– Esailija, Commented Aug 9, 2012 at 10:41
Because it's kind of an API where clients are using right now MyObject.myVar.blabla() but we need to move all clients to MyObject.myVar().blabla() and this is not gonna happen in 1 day. That's why I want to support both ways, the current one (MyObject.myVar) and the new one (MyObject.myVar()) for some time. — Zheileman
– Zheileman, Commented Aug 9, 2012 at 10:48

xdazz · Accepted Answer · 2012-08-09 10:48:00Z

3

No, this is not possible. In javascript, there is no concept of fields and methods, only property of an object, no matter the property is a value or a function (function is also an object.)

If MyObject.myVar is not a function, then MyObject.myVar() will produce an error.

The only thing you could do is have two properties.

MyObject.myVar

And

MyObject.getMyVar()

answered Aug 9, 2012 at 10:48

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

1 Comment

Elias Van Ootegem Over a year ago

<smugness set='on' amount='lots'>It can be done, check my answer</smugness> but the way I achieved it is, whichever way you look at it, a nasty hack, with no benefits whatsoever. Quite the opposite IMHO

Elias Van Ootegem · Accepted Answer · 2012-08-09 12:22:34Z

1

It IS possible, though your code will look rather nasty. Since functions are objects, they have a valueOf property, too. Exploit that by overriding it with a reference to the method itself, and you're there:

var foo = (function()
{
    var bar = 'foobar';
    var r = {
        bar:function()
        {
            return bar;
        }
    };
    r.bar.toString = r.bar.valueOf = r.bar;//valueOf && toString invoke the method
    return r;
 })();

Be advised, its type will be an object all the same, so strict comparisons won't work:

foo.bar =='foobar'//true
foo.bar === 'foobar'//false
alert(foo.bar+'');//alerts foobar
alert(foo.bar);//alerts foobar now, setting toString to reference the method, too
console.log(foo.bar());//foobar <= still works, and here strict comparisons do work

This can cause lots of nasty bugs that could leave you scratching your hair for up to the point there's no hair left to scratch. Not to mention other people that might end up maintaining your code!

edited Aug 9, 2012 at 12:22

answered Aug 9, 2012 at 10:53

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

4 Comments

Zheileman Over a year ago

You are right. This way could work with the cost of being a hell to undestand and mantain in the future. I will mark you as the accepted answer because it's the closer I can get to what I was trying. Thank you!

Elias Van Ootegem Over a year ago

@Zheileman: well, it works X-browser, but after a bit more digging stuff like foo.bar.match(/^foo/) throws an error, I've managed to solve the alert issue by overriding the toString method, too. That means that you'll have to override/define all string methods: r.bar.match = (function(me) { return function(){return (me+'').match(arguments);}}(r.bar); and so on... rather you than me :)

Felix Kling Over a year ago

:) I was thinking about valueOf as well, but it really depends on the context in which your are accessing the property. var value = foo.bar; will just assign the function to value. It works, but it's not "comfortable" to use.

Elias Van Ootegem Over a year ago

@FelixKling, nips, didn't even think about what kind of nightmares assignments could cause... Yet another example of how error prone this is. Well, I guess that whatever madman might think of using this will end up in a padded white cell. Banging his head, constantly mumbling it was a string then an object then a function reference then a string then an object then.... I wish him a speedy recovery in advance :)

Augustus Kling · Accepted Answer · 2012-08-09 10:48:30Z

1

This is not possible because it would be ambiguous. MyObject.myVar does invoke the getter, if followed by () the object as returned by the getter is executed. Therefore because MyObject.myVar() has a meaning when a getter is present it is not possible to decide for the interpreter that you want to call your function instead.

answered Aug 9, 2012 at 10:48

Augustus Kling

3,3331 gold badge24 silver badges25 bronze badges

Comments

Esailija · Accepted Answer · 2012-08-09 11:07:16Z

1

I guess this works:

  function test() {
      var myVar = 5;
      return {
      /*@cc_on
          /*@if (@_jscript_version)
              myVar: function() { return myVar }
          @else @*/
              get myVar() { return myVar }
          /*@end
      @*/
      };
  }

var a = test();
var b = a.myVar/*@cc_on () @*/

alert(b) // alerts 5

http://jsfiddle.net/XS7fU/2/

answered Aug 9, 2012 at 11:07

Esailija

140k24 gold badges280 silver badges328 bronze badges

4 Comments

Zheileman Over a year ago

This is nice, but the problem is I don't have control over the call to myVar, so I can't put this: a.myVar/*@cc_on () @*/

Esailija Over a year ago

Yeah was worth a shot though :D

Zheileman Over a year ago

This can be useful though. I didn't know about this. Oh, IE is a box of surprises. Thanks anyway!

Elias Van Ootegem Over a year ago

@FelixKling I found a true X-browser approach (sorry, I'm rather pleased with myself now) - not that I'd ever used it though, but in theory, it is possible. I'll bug off now

Collectives™ on Stack Overflow

Having a getter and a function with the same name in javascript

4 Answers 4

1 Comment

4 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related