views:

126

answers:

2

Hi Everyone,

I am wondering how to simulate Class Inheritance in JavaScript. I know class doesn't apply to JavaScript, the way we use is Functions to create objects and do the inheritance things through Prototype object.

For example, how do you convert this structure into JavaScript :

public class Mankind {
    public string name;
    public string lastname;
}

public class Person: Mankind {
    public void Run(string fromWhat) {
        //write the run logic
    }
}

What is the equivalent of this piece of code in JavaScript.

Edit:

I've also found another link where Douglas Crockford explains different inheritance models as CMS does

http://javascript.crockford.com/inheritance.html

Hope it helps others as well.

A: 

check out mooTools

http://mootools.net/docs/core/Class/Class

George
I do wanna make it w/o using Libraries. Can you provide pure javascript example instead of Abstracted one.
Braveyard
+6  A: 

There are plenty ways of implementing inheritance and behavior reuse in JavaScript, perhaps the way that is more similar to your class-based OOP example would be the pseudo-classical inheritance:

function Mankind (name, lastname) {
  this.name = name;
  this.lastname = lastname;
}

function Person (name, lastname) {
  this.name = name;
  this.lastname = lastname;

  this.run = function() {
    // run logic
  };
}
Person.prototype = new Mankind();
Person.prototype.walk = function () {
  // walk logic
};

The difference between run and walk is that the first will exist on every object instance of Person, and the second method, walk, will exist only in Person.prototype and will be accessed through the prototype chain.

In this pattern you see a bit of code duplication, we need the logic to initialize the fields also on the inherited constructor, another pattern that avoids this, is Constructor Function application:

function Mankind (name, lastname) {
  this.name = name;
  this.lastname = lastname;
}

function Person (name, lastname) {
  Mankind.apply(this, arguments);
  this.run = function() {
    // run logic
  };
}

More info:

CMS
Thanks, you are very generous as always :)
Braveyard
You're welcome Aaron, if you have any doubts, don't hesitate to comment!
CMS