Creating classes in JavaScript

Goal:
Creating class instances in JavaScript is not available since you define "classes" in js with object literals. In order to create classical classes like you would in c#, ruby, java, etc, with inheritance and instances.

Rather than typical class definitions using object literals, js has a constructor function and the NEW operator that will allow you to new-up a class and optionally provide initial properties to initialize the new object with.

The new operator changes the function's context and behavior of the return statement.

var Person = function(name) {
   this.name = name;
};   

//Init the person
var dude= new Person("renso");

//Validate the instance
assert(dude instanceof Person);

When a constructor function is called with the new keyword, the context changes from global window to a new and empty context specific to the instance; "this" will refer in this case to the "dude" context.

Here is class pattern that you will need to define your own CLASS emulation library:

var Class = function() {
   var _class = function() {
      this.init.apply(this, arguments);
   };
   _class.prototype.init = function(){};
   return _class;
}

var Person a new Class();

Person.prototype.init = function() {
};

var person = new Person;

In order for the class emulator to support adding functions and properties to static classes as well as object instances of People, change the emulator:

var Class = function() {
   var _class = function() {
      this.init.apply(this, arguments);
   };
   _class.prototype.init = function(){};

   _class.fn = _class.prototype;

   _class.fn.parent = _class;

   //adding class properties
   _class.extend = function(obj) {
      var extended = obj.extended;
      for(var i in obj) {
         _class[i] = obj[i];
      };
      if(extended) extended(_class);
   };

   //adding new instances
   _class.include = function(obj) {
      var included = obj.included;
      for(var i in obj) {
         _class.fn[i] = obj[i];
      };
      if(included) included(_class);
   };
   return _class;
}

Now you can use it to create and extend your own object instances:

//adding static functions to the class Person
var Person = new Class();

Person.extend({
   find: function(name) {/*....*/},   
   delete: function(id) {/*....*/},
});

//calling static function find
var person = Person.find('renso');
   
//adding properties and functions to the class' prototype so that they are available on instances of the class Person
var Person = new Class;

Person.extend({
   save: function(name) {/*....*/},
   delete: function(id) {/*....*/}
});

var dude = new Person;

//calling instance function
dude.save('renso');

Print | posted @ Monday, October 1, 2012 12:40 PM

Comments on this entry:

Gravatar # re: Creating classes in JavaScript
by Matt Watson at 10/2/2012 11:14 PM

Good news is I think TypeScript simplifies all this now!
Gravatar # re: Creating classes in JavaScript
by geek at 1/23/2013 10:40 AM

Thanks, im french and not information on the javascript in my country :(
Gravatar # re: Creating classes in JavaScript
by loto 17 avril at 4/17/2013 9:25 AM

Just perfect for what I need, thanks a lot for the tip !
Gravatar # re: Creating classes in JavaScript
by Dafiti at 4/19/2013 3:21 AM

Helped me a lot. Thank you!
Gravatar # les rencontre cougars
by cliquez là at 5/26/2013 10:12 AM

This was of great help, thank you mate!

Kika, cougar beurette française
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 
Twitter