The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Create a Model Base Class

Create a Model Base Class

3:12
You're going to test drive the creation of a robust model layer for an AngularJS application. To get started, we need a solid base class to encapsulate common functionality. In this lesson you'll use Javascript's prototypical inheritance to create the model base class.
Watch this lesson now
Avatar
egghead.io

You're going to test drive the creation of a robust model layer for an AngularJS application. To get started, we need a solid base class to encapsulate common functionality. In this lesson you'll use Javascript's prototypical inheritance to create the model base class.

Avatar
Andrew

I've enjoyed the thought you have put into this approach, and have returned several times to these videos. I do have a few comments about your approach to subclassing:

  • the resulting instances are not terribly lightweight. When you
    define a method function in the constructor, that function is
    duplicated across each instance.

    • The more functions added and inherited the more heavyweight each instance will be.
    • Defining methods on the prototype outside of the constructor uses prototypal inheritance of a single instance of the method function object.
    • Changes to the prototype are immediately reflected in existing objects, although such monkey-patching is unhealthy.
    • You can demonstrate the space-inefficiency simply by testing the methods for equality with a single mock function, rather than existence.
  • I'm not sanguine about monkey patching this functionality on
    Function. I would far prefer to see it defined on Object, much
    as we have seen for Object.create.

You might consider a solution along the lines of:

Object.prototype.subclass = function(baseclass, initializer){
  var S = function(){
    baseclass.call(this, arguments);
    initializer.call(this, arguments);
  };
  angular.extend(S, baseclass);
  S.prototype = Object.create(baseclass.prototype);
  S.prototype.constructor = S.constructor;
  return S;
};

so that you might write something like var Post = Object.subclass(Base, function(){... initializer for Post ...} This would pass not only corresponding tests, but there would be an identicality, not only an existence relationship for existing and inherited instance and class variables and methods.

Further, the attachment would be dynamic, not static upon creation, with the exception of course of Class methods and variables in the baseclass, which are only copied over upon creation.

In reply to egghead.io
Avatar
Kevin

Can Brett Shollenberger follow-up on how he would've done this using ES6's class syntax, particularly any steps he would've done drastically in a different way?

Avatar
Shaun

Extending native objects is generally a bad practice and I don't see a compelling reason to make an exception here.

Avatar
Nolan

Shaun, I'm interested to know why in JavaScript this is bad practice? I'm fairly new to JS, but in backend programming decorating native classes would be the right approach. Is there something in JS that causes this to be a bad practice?

In reply to Shaun
Avatar
Nolan

Brett, first, humbled by your JS knowledge. A lot of this type of model functionality can be found in server MVC frameworks like RoR or Laravel Eloquent, etc. whereas this series and the ActiveSupport provides very similar syntax and functionality for Angular / JS. I'm assuming that if you already using a rich MVC backend model framework, that you would not find much value in implementing this model approach? Other than maybe the local features ActiveSupport. Is that a fair assessment or am I missing the point? Again, great content!

Avatar
Francois

Hi, I understand everything in this video except for the attributes parameter that is being passed to the base class and it's new function. It seems that it is never used and creates a lot of confusion for me. Why would they be there and if there is implementation missing for it where can I see the implementation?

Avatar
Evan Gillogley

Where do I get the code for this?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?