Simple example of JavaScript namespaces, classes and inheritance

Question

I've been asked to port some of our PHP code across to JavaScript, so that more of our logic runs client-side. What'd I'd like is a simple example that shows:

• a namespace ("Package") containing two classes ("Master" and "Slave")
• the "Master" class has a property "p", a function "m" and a constructor that takes a single argument to set the initial value of "p"
• the "Slave" class inherits both "p", the constructor and "m" from the "Master" class

I don't mind using some sort of existing framework, but it must be lightweight -- ideally no more than 200 LOC (un-minified).

Here's my attempt, FWIW:

var Package = {};

Package.Master = function(pValue) {
    this.p = pValue;
    this.m = function() {
        alert("mmmmm");
    }
}

Package.Slave = function(pValue) {
    // this will inherit from Package.Master
}

// one of the many online examples:
// http://kevlindev.com/tutorials/javascript/inheritance/index.htm
KevLinDev.extend = function(subClass, baseClass) {
   function inheritance() {}
   inheritance.prototype = baseClass.prototype;

   subClass.prototype = new inheritance();
   subClass.prototype.constructor = subClass;
   subClass.baseConstructor = baseClass;
   subClass.superClass = baseClass.prototype;
}

KevLinDev.extend(Package.Slave, Package.Master);

Solution 1

I'm quite a fan of John Resig's Simple Javascript Inheritance.

E.g.:

var Package = {};
Package.Master = Class.extend({
    init: function(pValue) {
        this.p = pValue;
    },
    m: function() {
        alert("mmmmm");
    }
});

Package.Slave = Package.Master.extend({
    init: function(pValue) {
        this._super(pValue);
    }
});

var slave = new Package.Slave(10);
slave.m();

Solution 2

I think this is one way to do it:

var Package = {};

Package.Master = function(pValue) {
    this.p = pValue;
    this.m = function() {
        alert("mmmmm");
    }
}

Package.Slave = function(pValue) {
    //Call constructor of super class
    Package.Master.call(this, pValue);
}

Package.Slave.prototype = new Package.Master;

Solution 3

CoffeeScript is pretty awesome, and has a killer class system that is far far easier to deal with than vanilla prototypes.

This does about the same thing as what you posted.

Package = {}
class Package.Master
  constructor: (@p) ->
  m: -> alert 'mmmmm'

class Package.Slave extends Package.Master
  someSlaveMethod: -> foo 'bar'

Which generates the JS here: https://gist.github.com/954177

Solution 4

I'm at a point where I am going to try my hand at placing my global JavaScript functions into a Namespace for a project I'm currently working on (I feel like I'm one step closer to recovery having openly admitted this) and I found this article that seems to do a pretty good job at explaining the different ways to apply Namespacing:

http://addyosmani.com/blog/essential-js-namespacing/

He talks about five options and goes on to recommend which he feels are the best approaches.

Of course, the article leads to additional informative and helpful Namespace articles to take you down a lovely Namespacing rabbit hole journey!

Anyway, hope this helps.

View more solutions

Comments

[wpearse]

Heh... yeah, came across that website yesterday and dismissed it because the code scared me. Just implemented it now using your code snippet and it works a treat! Much easier than I thought, too... thanks!

[wpearse]

+1 I love it! It's compact and works well. Unfortunately the extra compilation step makes things hard for us, otherwise this'd be perfect. Thanks for showing me something new!

[wpearse]

+1 Yup, works a treat. I'm torn between this and Matt's solution as the accepted answer. Thanks for giving me my missing two LOC though!

[Nitin Bansal]

"The code scared me" ... hahaha. This line made me giggle like anything

[Rupam Datta]

What is Class? When I try to use the above code it shows me an error saying "Uncaught ReferenceError: Class is not defined "