JavaScript object instantiation options

Question

Given:

function MyCtor() {}
var myInstance = new MyCtor(); //myInstance.constructor ==== MyCtor

var MyCtor = function() {}
var myInstance = new MyCtor(); //myInstance.constructor ==== Function

If you instantiate an object using the former pattern the constructor is "more meaningful".

Is one of these approaches preferred? Are there circumstances where one is more idiomatic?

The functions will behave identically except for the existence of the non-standard name property in some implementations. Use which ever approach you prefer. It just really doesn't matter. — cookie monster, Aug 03 '14 at 12:04
...probably the only technical difference aside from hoisting is that the first should not be inside a block statement since it isn't a statement. — cookie monster, Aug 03 '14 at 12:08
...also worth noting that there are dozens of questions on StackOverflow that deal in great detail with the differences between these. — cookie monster, Aug 03 '14 at 12:17

score 4 · Answer 1 · edited May 23 '17 at 12:04

4

In the first case you have a named function and thus see that name, when you stringify the constructor.

In the second case you just have a pointer to an anonymous function, hence no name can be shown for the constructor.

You can combine both, though, by using a named function for the second case:

var MyCtor = function MyCtor() {}
var myInstance = new MyCtor(); //myInstance.constructor === MyCtor

this also works:

var otherRefName = function MyCtor() {}
var myInstance = new otherRefName(); //myInstance.constructor === MyCtor

With respect to the usage:

You can use this pattern, when you need to pass around the constructor to some other function (maybe a callback).

A (very very) simplified example could be something like this:

getConstructor( type ) {

  switch( type ) {
    case 'a': return function ContrA(){};
    case 'b': return function ContrB(){};
  }

}


var myConstr = getConstructor( 'a' ),
    myInstance = new myContr(); // myInstance.constructor === ConstrA

Other related questions:

var functionName = function() {} vs function functionName() {}

edited May 23 '17 at 12:04

Community

1
1

answered Aug 03 '14 at 11:55

Sirko

72,589
19
149
183

2

Understood, but when would you use each? Are there idiomatic usage patterns. Having the constructor property seems to be useful when looking at the objects in memory, assisting debugging. – Ben Aston Aug 03 '14 at 11:57
@RoyiNamir Wouldn't a new instance instead of the constructor be returned in a factory pattern? – Sirko Aug 03 '14 at 12:08
@Sirko A bit. you return function which you later do `new` on. so we can argue if `new` is missing or not would cause not to call it factory. but the general idea is that you provide some info about what you want , and something else creates something and return it to you. we later do `new` , so I guess it's pretty close. not to mention that you can't do nothing with `function (){this.x=...}` without `new` it.....:-) – Royi Namir Aug 03 '14 at 12:11
I wouldn't say that you have a "pointer" to a function since JavaScript doesn't have pointers. The top two examples are held identically as an object reference. And it should be noted that your `===` comparison in the second example will fail because `MyCtor` isn't available in the outer scope. Not sure if you were implying that you could actually make that comparison. – cookie monster Aug 03 '14 at 12:13

score 0 · Answer 2 · answered Aug 03 '14 at 12:05

As an addition ( and a bit off) to @sirko's answer , I will add the hoisting POV :

var myInstance = new MyCtor();
function MyCtor() {}
alert(myInstance.constructor ) //MyCtor

while

var myInstance = new MyCtor();  //error
var MyCtor = function() {}
alert(myInstance.constructor )

JavaScript object instantiation options

2 Answers2