1. Computing

Object Oriented JavaScript

11. Create Method if Doesn't Exist

By

Some methods are such useful additions to the built in JavaScript objects that some browser owner'ss decide that it is worth building in support for the method into their browser. Unfortunately by itself this doesn't really help since we still need to provide the method in our own code for those browsers that haven't built it in. What we can do though is to use feature sensing to see if the method already exists before we create it.

Why would we do this when we are going to achieve the same result in less code by just using our own method rather than the built in one? Well the thing is that built in methods are compile into the browser while the methods that we write ourselves in JavaScript need to be interpreted. This makes our code slightly slower than the built in equivalent. By testing if a method exists before we add it we can take advantage of the faster speed of the built in version in those browsers that support it while still allowing the method to be used in browsers which have not yet implemented a built in version of the method.

The one problem in doing this is that we need to make sure that our method works the same way as the built in one. By works the same way I don't mean that it needs to necessarily perform identical processing though. What does need to be the same is what parameters need to be passed to the method when it is called and what gets returned from the method after it is called. It also needs to return the same result from the same data as the built in method does.

Given that a built in method like this is actually a proprietary addition rather than a part of the standards (at least until the standards are updated to include it) it may not be completely obvious what the method does with certain code and there is also the possibility that multiple browsers will build in different versions of the method that are not compatible with one another. This means that some serious testing may be required in order to ensure that your code and the built in versions in the various browsers all do exactly the same thing - at least in so far as all of the elements in your web pages that you are using the code with. A difference between your method and the built in one with regard to something that doesn't apply to your code doesn't matter so long as you are aware of the fact that your method and the built in one are only known to work the same for those combinations that you have tested and that if you copy the code to another page where a different situation applies then you may need to retest and tweak the way your method is coded so as to cover any new situation where the two return different results.

Of course you may be lucky and find an exact definition for how the built in method in a given browser works so that you can build your JavaScript code so that it works the same way. Alternatively you may decide that catering for dozens of complexities that the built in version can handle that you don't use will just make your code slower unnecessarily and may opt to write your own simpler version that works for the situations that you are using but which may not handle all the compexities that the built in version can handle. Where you decide to do this you should comment your code so as to remind yourself of what limitations you have built in so that if you ever do need to start using one of those more complex variants that when your code doesn't work in some browsers that you will know the reason why.

So having considered the pros and cons of combining your own code with that provided by a built in method in some but not all browsers all that remains is to actually implement it. So now let's take a look at a real life example. The idea of adding a getElementsByClassName method to the DOM is such a useful and popular one that some browsers have now implemented that method built into the browser even though the DOM standard does not include such a method. Of course different people have used different code to implement this method for themselves and provided that the wersion of the method you are using works the way most people would expect such a method to work (by aalogy with the way similar methods work) you should be able to modify it to not overwrite the built in method if it exists and still have everything work correctly in all browsers (just slightly faster in those where there is a built in version). Here's my getElementsByClassName method modified to not replace a built in one if such exists.


if (typeof document.getElementsByClassName !== 'function') {
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
}

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
iMovie Slideshow

©2014 About.com. All rights reserved.