JavaScript OOP Techniques

Posted on July 7th, 2008, by Cristian in Javascript & jQuery

Although JavaScript is classless, we can still create an instantiate objects using a few different techniques. To demonstrate how to construct a JavaScript ‘class’, here are three examples below which are all essentially equivalent.

var test = new App();
var test2 = new App2();
var test3 = new App3();

Function object technique 1, returning an object containing function members.

function App() {
     // Constructor
     return {
          a : function(){
               console.log('a');
          },
          b : function(){
               console.log('b');
          }
     };
};

Function object technique 2, returning an object containing function members.

var App2 = function() {
     // Constructor
     return {
          a : function(){
               console.log('a');
          },
          b : function(){
               console.log('b');
          }
     };
};

Function object technique 3 using prototyping.

var App3 = function() {
     // Constructor
};

App3.prototype.a = function() {
     console.log('a');
};

App3.prototype.b = function() {
     console.log('b');
};

One comment

  1. Ionut Popa on April 14th, 2009 at 3:03 pm

Leave a comment

Comments RSS Feed

Recent Comments

  • luciano: Is there any way to fit the submenu elements to the widthest element in each one? I donĀ“t know if I make...
  • g25: I agree that Apple should implement a homescreen like this. Personally though the lock screen should be like...
  • wildspirit: C++ : http://wallpaper.wallpedia.org /24__boat_destroyer.htm
  • tom: Hello, this menue is great, but i noticed that it does not work in Opera perfectly. The “hover”...
  • medbrooro: adam ant shoes http://topcitystyle.com/dark-b rown-women-color29.html graphic designer gucci purses...