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:
// .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);

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

• javascript
• inheritance
• namespaces
• subclass

4 Answers 4

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

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;

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

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.