alt
Advertisement
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow Microsoft AJAX arrow Microsoft AJAX Library - Inheritance using Closures
Site Search


Microsoft AJAX Library - Inheritance using Closures

Inheritance using Closures and Prototypes

There are two significant techniques for implementing the OOP concept of inheritance with JavaScript code. The first technique uses closures, and the other technique makes use of a feature of the language named prototyping. Early implementations of the Microsoft AJAX library made use of closures-based inheritance, and in the final stage the code was rewritten to use prototypes. In the following few pages we'll quickly discuss both techniques.

Inheritance Using Closures

In classic OOP languages such as C#, C++, or Java, you can extend classes through inheritance. Closure-based inheritance is implemented by creating a member in the derived class that references the base class, and calling that member. This causes the derived class to inherit all the base class members, effectively implementing the concept of inheritance.

To demonstrate this technique, we'll implement two classes: Car and SuperCar. The Car class constructor receives a car name as parameter, and it has a method named Drive(). The class SuperCar inherits the functionality of Car, and adds a new method named Fly(), reflecting the additional functionality it has in addition to what Car has to offer. The diagram in Figure 3-6 describes these two classes.

Figure 3-6. Car and SuperCar class diagram

Remember that in JavaScript the implementation of a class diagram can be achieved in multiple ways. The code reflects the concept of the diagram, but not also the implementation details, as the C# code would. Here's a possible implementation of Car and SuperCar:

  1. <script type="text/javascript">
  2.  
  3. // to be used as the Drive method of Car
  4.  
  5. function Drive()
  6.  
  7. {
  8.  
  9. document.write("My name is " + this.Name +
  10.  
  11. " and I'm driving.
  12. ");
  13.  
  14. }
  15.  
  16. // class Car
  17.  
  18. function Car(name)
  19.  
  20. {
  21.  
  22. // create the Name property
  23.  
  24. this.Name = name;
  25.  
  26. // Car knows how to drive
  27.  
  28. this.Drive = Drive;
  29.  
  30. }
  31.  
  32. // to be used as the Fly method of SuperCar
  33.  
  34. this.Fly = function()
  35.  
  36. {
  37.  
  38. document.write("My name is " + this.Name + " and I'm flying!
  39. ");
  40.  
  41. }
  42.  
  43. // class SuperCar
  44.  
  45. function SuperCar(name)
  46.  
  47. {
  48.  
  49. // implement closure inheritance
  50.  
  51. this.inheritsFrom = Car;
  52.  
  53. this.inheritsFrom(name);
  54.  
  55. // SuperCar knows how to fly
  56.  
  57. this.Fly = Fly;
  58.  
  59. }
  60.  
  61. // create a new Car and then Drive
  62.  
  63. var myCar = new Car("Car");
  64.  
  65. myCar.Drive();
  66.  
  67. // create SuperCar object
  68.  
  69. var mySuperCar = new SuperCar("SuperCar");
  70.  
  71. // SuperCar knows how to drive
  72.  
  73. mySuperCar.Drive();
  74.  
  75. // SuperCar knows how to fly
  76.  
  77. mySuperCar.Fly();
  78.  
  79. </script>
 

Loading this script in a browser would generate the results shown in Figure 3-7. It can be tested online at http://www.cristiandarie.ro/asp-ajax/JavaScriptClosureInheritance.html.

Figure 3-7. JavaScript Inheritance

The exercise demonstrates that inheritance really works. SuperCar only defines the capability to Fly(), yet it can Drive() as well. The capability to Drive() and the Name property are inherited from Car.

At the first sight the code can look a bit complicated, especially if you're a C# veteran. The Drive() and Fly() functions aren't defi ned inside Car and SuperCar, as you'd do in a C# class. Instead, we stored these methods/functions in the global context, and referenced them in Car and SuperCar, to avoid the memory leaks that were discussed earlier in this chapter. You can, however, define Drive() inside Car, and Fly() inside SuperCar, without losing any functionality.

If you comment the execution of this.inheritsFrom(name) from SuperCar, it won't inherit the capabilities of Car any more. If you make this test in FireFox, you'll see the following eloquent error message in the Error Console window of Firefox:

Figure 3-8. Signs of failed inheritance

The problem with the presented inheritance solution is that it's not very elegant. Writing all functions and classes in the global context can quickly degenerate into chaos; and things get even more complicated if you want to have classes that have functions with the same name. Needless to say, this isn't something you need to be dealing with when writing your code. Luckily, JavaScript has a very neat feature that allows us implement inheritance in a much cleaner way: prototyping.


Trackback(0)
Comments (0)add comment

Write comment

busy
 
< Prev   Next >
Exforsys Offers
© 2008 Exforsys.com
Joomla! is Free Software released under the GNU/GPL License.
Page copy protected against web site content infringement by Copyscape