Puzzling Javascript constructor issue

Question

A very puzzling problem i am having with JavaScript. look at the code below..

az={
   classes:{
      test:function(){
        this.hello=function(name){
          alert('hello '+name);
        }
      }
   },
   getClass:function(name){
    return az.classes[name];
   }
};
var a=new az.classes['test']();
a.hello('foo');
var b= new az.getClass('test')();
b.hello();// fails !!!

in the code if you notice we have a class defined inside an object az.classes. when try to create an instance of that class by new az.classes['test](), it works and a.hello() executes fine. but when i call the method az.getClass('test'), which in turn returns the same constructor, but it fails when i say var b=new az.getClass('test'); here its saying b is undefined!! and b.hello() fails!! i do not understand this behaviour! what is the difference between new az.classes['test']() and new az.getClass('test'). Are they not the same thing??

try var b= new (az.getClass('test'))(); instead. then b will be like a — user2264587
– user2264587, Commented Apr 24, 2013 at 5:34
@gurvinder372 You must be reading a different question to me. I see getClass:function(name) — Phil
– Phil, Commented Apr 24, 2013 at 5:35

Alex Wayne · Accepted Answer · 2013-04-24 05:47:50Z

When instantiating a constructor, the first parens indicate what to use at the constructor.

So new az.classes['test'](); will execute the expression az.classes['test'] and use the resulting function as the constructor.

Or refactored, it does this:

// new az.classes['test']()
//                       ^ expression left of here used as constructor!
var MyConstructor = az.classes['test'];
new MyConstructor();

However, new az.getClass('test')(); executes the expression az.getClass which returns your class getter function, and attempts to use that as the constructor. Then your instance tried to be executed with the ().

Or refactored, it does this:

// new az.getClass('test')();
//                ^ expression left of here used as constructor!
var MyConstructor = az.getClass;
var instance = new MyConstructor('test');
instance(); // obviously not gonna work.

See the difference?

You can solve this by wrapping more parens around the expression that should return the constructor:

new (az.getClass('test'))();
//                       ^ expression left of here used as constructor!

Or by saving the constructor reference to a local variable, and then using it on the next line. This is probably more sane and readable:

var MyConstructor = az.getClass('test');
new MyConstructor();
//               ^ expression left of here used as constructor!

Linga · Accepted Answer · 2013-04-24 10:25:25Z

3

A constructor function in JavaScript can return a value, which replaces the value which would normally be returned by the "new" expression.

So new az.getClass("test")() will first evaluate az.getClass("test") which will return a function. You are then invoking that function with () which will return undefined since it has no return value.

edited Apr 24, 2013 at 10:25

Linga

10.6k10 gold badges57 silver badges109 bronze badges

answered Apr 24, 2013 at 5:37

john_omalley

1,3986 silver badges13 bronze badges

1 Comment

Qantas 94 Heavy Over a year ago

+1, the other answer was in fact slightly wrong - operator precedence dictates that new is called after ().

elclanrs · Accepted Answer · 2013-04-24 05:35:36Z

1

It's a problem with parenthesis (operator precedence). This should work:

var b = new (az.getClass('test'))();

http://jsbin.com/odajet/1/edit

answered Apr 24, 2013 at 5:35

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

user2264587 · Accepted Answer · 2013-04-24 05:46:29Z

0

var b = new az.getClass('test')();

is equivalent to first getting the class:

var b = new az.classes.getClass('test');

b is now the class az.test, not an instance of it.

and then:

b = b();

calling the class constructor with the global object as this

edited Apr 24, 2013 at 5:46

answered Apr 24, 2013 at 5:36

user2264587

4742 silver badges6 bronze badges

Collectives™ on Stack Overflow

Puzzling Javascript constructor issue

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related