Delivering Quality » OOP http://www.markdeepwell.com A Software Developers View of the World Thu, 29 Jul 2010 16:44:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Intro to Objects in JavaScript http://www.markdeepwell.com/2009/10/intro-to-objects-in-javascript/ http://www.markdeepwell.com/2009/10/intro-to-objects-in-javascript/#comments Wed, 21 Oct 2009 06:23:03 +0000 Mark http://www.markdeepwell.com/?p=317 Despite what you might think, JavaScript supports programming in full object oriented style including inheritance, encapsulation and polymorphism. But before we dive into all those topics I'm going to start with the basics and demonstrate how to create and use a simple JavaScript object.

Lets say you have a web application that needs to track how long an AJAX request took. If you were writing it in Ruby, PHP or Python you'd have a timer object that you can start() and stop() and a seconds() method to get the number of seconds that passed between calling the first two methods.

To build this in JavaScript we first create our constructor:

PLAIN TEXT
JAVASCRIPT:
  1. Timer = function() {
  2.   var seconds_passed = 0;
  3. }

Here we are creating a Timer object with a private seconds_passed variable. To create this object we we simply create a new timer:

PLAIN TEXT
JAVASCRIPT:
  1. var elapsed_timer = new Timer();

This timer object now needs some public methods. We can attach a public method by using this.method_name:

PLAIN TEXT
JAVASCRIPT:
  1. Timer = function() {
  2.   var seconds_passed = 0;
  3.  
  4.   this.start = function() {
  5.     // implementation here
  6.   }
  7. }

Our Timer class now has a start() function. Additional public methods can be added in the same way.

To add a private method, don't define it with the this keyword but instead create a regular function inside the class:

PLAIN TEXT
JAVASCRIPT:
  1. Timer = function() {
  2.   function increment() {
  3.     // implementation of private method here
  4.   }
  5. }

Now we have a Timer object with a public start method and a private increment method. The rest of the class is fairly simple, so lets jump to the finished solution.

Complete Example

PLAIN TEXT
JAVASCRIPT:
  1. Timer = function() {
  2.   var timeout_id = null;
  3.   var seconds_passed = 0;
  4.  
  5.   this.start = function() {
  6.     increment();
  7.   }
  8.  
  9.   this.stop = function() {
  10.     clearTimeout(timeout_id);
  11.     timeout_id = null;
  12.   }
  13.  
  14.   this.seconds = function() {
  15.     return seconds_passed;
  16.   }
  17.  
  18.   function increment() {
  19.     seconds_passed++;
  20.  
  21.     timeout_id = window.setTimeout(
  22.       function() {
  23.         increment();
  24.       }
  25.       , 1000
  26.     );
  27.   }
  28. }
  29.  
  30. var elapsed_timer = new Timer();
  31. elapsed_timer.start();
  32.  
  33. // do some stuff
  34.  
  35. elapsed_timer.stop();
  36. alert(elapsed_timer.seconds());

There you have it. A simple JavaScript timer to keep track of time.

]]> http://www.markdeepwell.com/2009/10/intro-to-objects-in-javascript/feed/ 0