Section 2.2. Object-Oriented Programming (OOP)


2.2. Object-Oriented Programming (OOP)

JavaScript is a so-called object-based language, but not an object-oriented one. There are aspects of JavaScript that are OOP-like, but support for 33onventional OOP techniques is limited. For instance, visibility of class members (public, private, protected, etc.) can be implemented only in a limited way. Nevertheless, it is possible to create classes in JavaScript and even to provide rudimentary support for class inheritance.

A class in JavaScript is implemented by creating a function. The code within this function is the class constructor and getter and setter methods for the class properties, which are also defined in the constructor. All class properties and methods are defined within the class code. The this keyword provides access to the properties of the current class, making it possible to set properties and define methods.

Example 2-9 shows a simple class that implements a book. Note that access to the class's properties is via explicit getter and setter methods instead of the more familiar dot notation (such as book.title).

Example 2-9. Using JavaScript's OOP features

 JavaScript-class.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>JavaScript</title> </head> <body>   <script language="JavaScript" type="text/javascript">   function Book(isbn, author, title) {     var _isbn = isbn;     var _author = author;     var _title = title;     this.get_isbn = function() {       return _isbn;     }     this.set_isbn = function(value) {       _isbn = value;     }     this.get_author = function() {       return _author;     }     this.set_author = function(value) {       _author = value;     }     this.get_title = function() {       return _title;     }     this.set_title = function(value) {       _title = value;     }     this.toString = function() {       return _author + ": " + _title + " (" + _isbn + ")";     }   }   var atlas = new Book("0792275438", "National Geographic");   atlas.set_title("Atlas of the World");   document.write(atlas.toString());   </script> </body> </html> 

This code in this example outputs the following text:

 National Geographic: Atlas of the World (0792275438) 

Without the this keyword, variables can be used only from within the class and are not exposed for use by others. This is the only way to implement data hiding and create something similar to private methods and properties.

Inheritance is possible in JavaScript to a certain extent. The prototype property can be used to define a method or property that is available to all inherited objects. For instance, the following code would add a new method to all arrays:

 Array.prototype.empty = function() {   this.length = 0; } 

To let one class inherit from another one, you use an expression like the following:

 DerivedClass.prototype = new BaseClass(); 

Example 2-10 extends the Book class with a DigitalBook class, adding one more private field (exposed as a property, _size) and overriding the toString() method. Note that in JavaScript there are no protected properties (properties that can be accessed from subclasses (in a JavaScript sensesince JavaScript does not support "real" OOP inheritance, there is no such thing as subclasses, but you can create a similar behavior, as in this example), so all field variables from the base class must be defined again. However, the existing get and set methods are still available. In the example, however, they cannot be used. The variables they are accessing are not "real" class members but private properties. Therefore, the getter and setter methods can access the variables, but these variables are not accessible as class properties.

Example 2-10. Using inheritance with JavaScript

 JavaScript-class-prototype.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>JavaScript</title> </head> <body>   <script language="JavaScript" type="text/javascript">   function Book(isbn, author, title) {     var _isbn = isbn;     var _author = author;     var _title = title;     this.get_isbn = function() {       return _isbn;     }     this.set_isbn = function(value) {       _isbn = value;     }     this.get_author = function() {       return _author;     }     this.set_author = function(value) {       _author = value;     }     this.get_title = function() {       return _title;     }     this.set_title = function(value) {       _title = value;     }     this.toString = function() {       return _author + ": " + _title + " (" + _isbn + ")";     }   }   //class to derive from Book   function DigitalBook(isbn, author, title, size) {     var _isbn = isbn;     var _author = author;     var _title = title;     var _size = (size != null) ? size : 0;     this.get_size = function() {       return _size;     }     this.set_size = function(value) {       _size = value;     }     this.toString = function() {       return _author + ": " + _title + " (" + _isbn + ")" +        " - " + _size + " KB";     }   }   DigitalBook.prototype = new Book(); //Derive from book   var atlas = new DigitalBook("0123456789", "International Graphics", "Atlas of the City");   atlas.set_size(1024);   document.write(atlas.toString());   </script> </body> </html> 

Figure 2-5 shows the results displayed when you execute Example 2-10.

Figure 2-5. The toString() method of the derived object





Programming Atlas
Programming Atlas
ISBN: 0596526725
EAN: 2147483647
Year: 2006
Pages: 146

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net