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);

score 8 · Accepted Answer · edited Jul 26 '12 at 09:10

8

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();

edited Jul 26 '12 at 09:10

Maibua

27
1
7

answered May 03 '11 at 20:33

Matthew Abbott

60,571
9
104
129

3

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 May 03 '11 at 20:49
1

"The code scared me" ... hahaha. This line made me giggle like anything – Nitin Bansal Apr 26 '13 at 04:14
What is Class? When I try to use the above code it shows me an error saying "Uncaught ReferenceError: Class is not defined " – Rupam Datta Mar 28 '14 at 06:19

score 5 · Answer 2 · edited Jul 26 '12 at 09:33

5

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;

edited Jul 26 '12 at 09:33

Maibua

27
1
7

answered May 03 '11 at 20:36

Eric

95,302
53
242
374

+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! – wpearse May 03 '11 at 21:08

score 2 · Answer 3 · answered May 03 '11 at 20:37

2

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

answered May 03 '11 at 20:37

Alex Wayne

178,991
47
309
337

+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 May 03 '11 at 20:57

Venus Ang · Answer 4 · 2013-07-14T20:47:21.873

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.

Simple example of JavaScript namespaces, classes and inheritance

4 Answers4