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.

Answer 1

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()

Answer 2

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.

Answer 3

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!

Answer 4

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/