1. Technology

Object Oriented JavaScript

15. Lazy Definition


There are instances where the code that you need to run in your object methods will vary depending on which browser it is running in. This if often the case where you need to make Browser Object Model references where different browsers provide access to the same information in different ways.

The least efficient way of performing such processing is to test for which way the browser supports each time the processing is called. For example:

myobject.addEvent = function(eType, fn, uC) {
if (this.addEventListener) {
this.addEventListener(eType, fn, uC);
return true;
} else if (this.attachEvent) {
return this.attachEvent('on' + eType, fn);
} else {
this['on' + eType] = fn;

With this code every time the addEvent method is called the code then has to check whether either of the two preferred methods of attaching event listeners is supported in order to run the correct code. The thing is that the same path within the method will be followed every time it is called and so we are performing the same if tests multiple times when we already know the result from the first time it was called.

A more efficient way to do this processing is to perform the test only once at the start of our code and set the method so that it runs whichever of the ways that the browser supports.

myobject.addEvent = null;
if (this.addEventListener)
   myobject.addEvent = function(eType, fn, uC) {
   this.addEventListener(eType, fn, uC); return true;}
else if (this.attachEvent)
   myobject.addEvent = function(eType, fn, uC) {
   return this.attachEvent('on' + eType, fn);}
else myobject.addEvent = function(eType, fn, uC) {
this['on' + eType] = fn;}

Using this code we now have one of three different methods created depending on which way the browser supports. When the method is called the approriate code runs that the browser supports without it needing to perform the test over again.

Where this code is still slightly ineficient is that it runs once to initialise the method regardless of whether the method will ever get called or not. While this may not make much difference for one small method it might make a significant difference if we have a library where there are lots of methods where such code is needed.

We can improve on this code slightly further to come up with the most efficient version where not only is the test only performed once but it is only performed if the code is actually going to be called. We do this by changing the code so that the function only actually acquires its final definition when the method itself runs for the first time. In other words the method appears the way it did in our first example the first time it is run but changes itself to look like the different versions of the method from our second example for when it is called subsequently.

myobject.addEvent = function(eType, fn, uC) {
if (this.addEventListener)
   this.addEvent = function(eType, fn, uC) {
   this.addEventListener(eType, fn, uC); return true;}
else if (this.attachEvent)
   this.addEvent = function(eType, fn, uC) {
   return this.attachEvent('on' + eType, fn);}
else this.addEvent = function(eType, fn, uC) {
this['on' + eType] = fn;}
this.addEvent(eType, fn, uC);

So now our method is really lazy in performing the test that determines which version of the code it needs to run. If the method isn't called then it does nothing. The first time it is called the method replaces itself with whichever short version of the code that the browser supports and then calls that method to perform the required processing. Subsequent calls if any only see the short version of the code and the test as to which version of the method to use is run at most once.

All the Object Oriented JavaScript Tutorials

  1. What is Object Oriented JavaScript?
  2. The Benefits of OO JavaScript
  3. JavaScript's Built in Objects
  4. Extending Built In Objects
  5. Creating Objects from Existing Objects
  6. Creating New Objects Without Copying Existing Ones
  7. Dot Notation and "this"
  8. prototype
  9. Inheritance and "constructor"
  10. Associative Array Notation
  11. Create Method if Doesn't Exist
  12. "self" and Multiple Objects
  13. Defining Objects with JSON
  14. Namespaces
  15. Lazy Definition
  16. Extending Methods
  17. Copying Objects
  18. Private Properties and Privileged Methods
  19. Public Access to Private Methods
  20. Chaining Methods
  21. Singletons
Related Video
Create Bullet, Number, and Definition Lists in HTML
Make a PowerPoint Multiple Choice Quiz
  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Object Oriented JavaScript
  6. Lazy Definition

©2014 About.com. All rights reserved.