A simple JavaScript namespace, class, and inheritance example

Question

I was asked to port some of our PHP code to JavaScript, so most of our logic works on the client side. What I would like is a simple example that shows:

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

I do not mind the use of some existing structure, but it should be light - ideally no more than 200 LOC (without restrictions).

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

Answer 1

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

eg:.

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

Answer 2

I think this is one way to do this:

 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; 

Answer 3

CoffeeScript is pretty cool, and it has a killer class system that is much easier to handle than vanilla prototypes.

It does the same as you.

 Package = {} class Package.Master constructor: (@p) -> m: -> alert 'mmmmm' class Package.Slave extends Package.Master someSlaveMethod: -> foo 'bar' 

What JS generates here: https://gist.github.com/954177

Answer 4

I am at the point where I am going to try my hand at placing my global JavaScript functions in the namespace for the project I'm currently working on (I feel like I'm one step closer to recovery by openly acknowledging this) and I found this An article that seems to do a good job explaining the various ways Namespacing can be used:

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

He talks about five options and continues to recommend what, in his opinion, is the best approach.

Of course, the article leads to additional informative and useful articles in the namespace to take you on a wonderful journey through the rabbit Namespacing proms!

Anyway, hope this helps.