Setting Prototype to Object Literal vs Adding Fields to Prototype

Question

Update: I've updated the question to state that the code in question is for a subclass in Google Closure.

I'm looking through some JavaScript code that defines a subclass and saw that an object literal is being used to set the prototype. Note that this code is using Google Closure Library and will be compiled in advanced mode with Google Closure Compiler. (Not sure if this matters for this question.) The code looks like this:

company.app.MyClass = function(param) {
  this.field = 0;
};

company.app.MyClass.prototype = {
  function1: function() {
    //Do stuff.
  },
  function2: function() {
    //Do more stuff.
  };
};

company.app.MySubClass = function(param) {
  company.app.MyClass.call(this, param);
};

company.app.MySubClass.prototype = {
  function3: function() {
    //Do stuff.
  },
  function4: function() {
    //Do more stuff.
  };
};

goog.inherits(company.app.MySubClass, company.app.MyClass);

All of the samples I have seen for creating classes with Google Closure add fields and functions to the prototype instead of setting it to an entirely new object with an Object literal. So the code for MySubClass would look like this:

company.app.MySubClass.prototype.function3 = function() {
    //Do stuff.
};
company.app.MySubClass.prototype.function4 = function() {
    //Do more stuff.
};

I don't know exactly what is happening when goog.inherit is called, but I was wondering if setting the prototype of the sub class to a new object literal could cause problems with the inheritance of the base class, MyClass?

possible duplicate of [Are there problems with replacing a Javascript constructor's .prototype rather than adding to it?](http://stackoverflow.com/questions/19782315/are-there-problems-with-replacing-a-javascript-constructors-prototype-rather-t) — cookie monster, Jan 21 '14 at 16:42
Just note that the first version is wrong. You should separate the functions using commas instead of semicolons!!! About the question both does the same, no difference. — ius, Jan 21 '14 at 16:44
I've updated the question to state that the class in question is a sub class. I think that makes this question different from the one you linked. Also, this involves Google Closure which might change things as well. — burnttoast11, Jan 21 '14 at 19:31

score 2 · Accepted Answer · edited May 23 '17 at 12:28

I don't know exactly what is happening when goog.inherit is called

Check the code of goog.inherits then. It should look familiar if you know the common Object.create shim and what it does.

As you can see, it completely overwrites the childCtor.prototype, not preserving any old properties on it - which can be problematic and indeed trahes the function3 and function4 methods you previously defined on it in your example. So you will need to inherit first, then extend the new prototype object.

If you still want to use an object literal, that is no problem:

company.app.MySubClass = function(param) {
  company.app.MyClass.call(this, param);
};
goog.inherits(company.app.MySubClass, company.app.MyClass);
goog.mixin(company.app.MySubClass.prototype, {
  function3: function() {
    //Do stuff.
  },
  function4: function() {
    //Do more stuff.
  }
});

Ok, thanks, that makes sense now. Just to clarify, using the object literal without using `goog.mixin` **will** cause a problem because the changes made inside the call to `goog.inherits` will be trashed. — burnttoast11, Jan 21 '14 at 21:57

Setting Prototype to Object Literal vs Adding Fields to Prototype

1 Answers1