Geeks With Blogs

News

Renso Hollhumer
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');

Posted on Monday, October 1, 2012 12:40 PM | Back to top


Comments on this post: Creating classes in JavaScript

# re: Creating classes in JavaScript
Requesting Gravatar...
Good news is I think TypeScript simplifies all this now!
Left by Matt Watson on Oct 02, 2012 11:14 PM

# re: Creating classes in JavaScript
Requesting Gravatar...
Thanks, im french and not information on the javascript in my country :(
Left by geek on Jan 23, 2013 10:40 AM

# re: Creating classes in JavaScript
Requesting Gravatar...
Just perfect for what I need, thanks a lot for the tip !
Left by loto 17 avril on Apr 17, 2013 9:25 AM

# re: Creating classes in JavaScript
Requesting Gravatar...
Helped me a lot. Thank you!
Left by Dafiti on Apr 19, 2013 3:21 AM

# les rencontre cougars
Requesting Gravatar...
This was of great help, thank you mate!

Kika, cougar beurette française
Left by cliquez là on May 26, 2013 10:12 AM

Your comment:
 (will show your gravatar)


Copyright © Renso | Powered by: GeeksWithBlogs.net | Join free