CODEWITHSUNDEEP
javascriptinheritancenamespacessubclass
wpearse
wpearse

Reputation: 2422

Simple example of JavaScript namespaces, classes and inheritance

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:

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

Upvotes: 6

Views: 16477

Answers (4)

Venus Ang
Venus Ang

Reputation: 11

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.

Upvotes: 1

Eric
Eric

Reputation: 97641

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;

Upvotes: 5

Matthew Abbott
Matthew Abbott

Reputation: 61599

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

Upvotes: 8

Alex Wayne
Alex Wayne

Reputation: 187222

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

Upvotes: 2

Related Questions