Javascript constructor function creating object vs regular object

Question

Sorry about the maybe misleading title, but I wonder why is this approach of creating objects and adding properties and methods:

//A)
var myObjCreatedByFunction = function() {
  this.prop1 = "a";
  this.func1 = function() {
   alert("a");
  }
};

and then using prototype to create additional methods

myObjCreatedByFunction.prototype.func2 = function() { ... }

preferred over simple and plain creating object:

//B)
var myObj = {
  prop1: "a",
  func1: function() {
   alert("a");
  }
};

and just adding new method by

myObj.func2 = function() { ... }

as I see some skilled developers use the first approach and use prototypes even if they never create new instances later.

Furthermore, is the use of IIFE preferred over both examples and if so, why? (I see a lot of this usage lately)

var myObjIIFE = (function() {
return {
  prop1: "a",
  func1: function() {
   alert("a");
  }
}
})());

Can someone explain please when should I use first approach, second and third and why? Thank you!

See http://stackoverflow.com/questions/9772307/declaring-javascript-object-method-in-constructor-function-vs-in-prototype — PM 77-1, Feb 01 '15 at 20:07
Thank you, but that is just partial answer. There's no IIFE approach and doesn't explain the difference between A and B approach. — Dalibor, Feb 01 '15 at 20:11
"*use prototypes even if they never create new instances later*"??? No, those are not skilled developers. — Bergi, Feb 01 '15 at 21:37
Mix ins and inheritance could be a reason to use prototype and constructor even though only one instance is created, more info here: http://stackoverflow.com/a/16063711/1641941 Sometimes you can wrap (some of) your prototype declaration in an IIFE to create private functions or other private shared members like a box object to be used to simulate protected members — HMR, Feb 01 '15 at 23:59

score 2 · Accepted Answer · edited May 23 '17 at 10:26

B is useful only for a single instance. It does not offer a means to create multiple instances of that type with those methods and properties like A does. If all you want/need is a single instance, then B is just fine and perhaps simpler to express and follow.

There are long discussions about whether to use the prototype for methods or assign them in the constructor (see prior reference and there are many, many other such discussions). Using the prototype and then creating a new object using the new operator will conserve memory (since all methods are shared by all instances). Assigning them in the constructor allows access to private instance variables (the local variables in the constructor) and has slightly better performance when executing a given method.

An IIFE is a pattern some people choose to adopt. It offers no benefit for what you are doing, but does provide a scope to store "private class variables" which are shared by all instances, but not accessible to the outside world. The way you show it, it is not my favorite because there is no type information on the object all. It's just a plain object with properties. In some cases (particularly in debugging, but sometimes in coding), it can be useful to know what type of object you have.

Note that `Object.create` can be used to create new instances of object literals, but it's much slower than using `new` and a constructor. — plalx, Feb 01 '15 at 21:10

Javascript constructor function creating object vs regular object

1 Answers1