What is the definition of an OO programming?
Object-oriented programming (OOP) is a method programming paradigm that uses "objects" – data structures consisting of data fields and methods together with their interactions – to design applications and computer programs. Programming techniques may include features such as data abstraction, encapsulation, modularity, polymorphism, and inheritance (Wikipedia). So what is the connection between all of that and JavaScript?
Well, let's look over, with samples, all of the OOP characteristics and see for ourselves whether or not JavaScript have what it takes.
Objects:
This is plain and simple, JavaScript allows you to create classes and objects. You can have private and public variables and functions within. For example:
var myClass = function() {
var privateVar = 'this is a private variable';
this.publicVar = 'this is a public variable';
function privateFunction() {
return;
}
this.publicFunction = function() {
return;
}
}
Data Abstraction:
Similar to Java, JavaScript allows you to create an abstract class and extend it using prototype approach. For example: an abstract class named Animal and its usage with regard to various animals.
var Animal = function(type) {
var animal;
switch (type) {
case "cat": animal = new Cat(); break;
case "dog": animal = new Dog(); break;
case "fly": animal = new Fly(); break;
}
this.eat = function() {
animal.eat();
}
this.drink = function() {
animal.drink();
}
this.speak = function() {
animal.speak();
}
}
var dog = new Animal('dog');
var cat = new Animal('cat');
dog.speak();
cat.eat();
Encapsulation:
JavaScript in its basis is encapsulated. A very simple and elegant way to demonstrate it is by using an anonymous function
(function() {
var privateVar = 'this is private';
this.publicVar = 'this is public';
})();
Another example will show a class and its usage
var Class = (function() {
//Private members
var privateVar = '';
function privateFunction() {
// Do something
}
return {
//Public members
publicFunction: function() {
privateFunction();
}
}
})();
Class.publicFunction();
Modularity:
A very simple way to explain this is by describing a small problem and its solution.
An AJAX request is needed in an application. A handler dealing with these kinds of requests is a handler that we can call AjaxHandler (module A). A request can sent by XML (SOAP) or by coma separated variables. For handling XML we use another handler that deals with XML and nodes, we can call it XmlHandler (module B).
Both modules are incorporated into the same routine in order to retrieve data from the server, although they are composed separately and can be tested separately.
Polymorphism:
In order to use polymorphism with JavaScript all you have to do is to override the appropriate function. For example:
var Dog = function() {
this.bark = function() {
alert("wuff");
};
}
var dog = new Dog();
dog.bark(); // "wuff"
function Cat() { }
Cat.prototype = new Dog();
Cat.prototype.bark = function() {
alert("miao");
}
var cat = new Cat();
cat.bark(); // "miao"
Inheritance:
Inheritance in JavaScript can be done in various ways, among which are: prototype chaining, constructor “stealing” and other methods. Here I will show a combination of the two, as presented by Nicholas C. Zakas in “Professional JavaScript® for Web Developers, 2nd Edition, 2009”
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType(name, age) {
//inherit properties
SuperType.call(this, name);
this.age = age;
}
//inherit methods
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); // red,blue,green,black
instance1.sayName(); // Nicholas;
instance1.sayAge(); // 29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); // red,blue,green
instance2.sayName(); // Greg;
instance2.sayAge(); // 27
Sunday, November 14, 2010
JavaScript as an OOP language
Labels:
Encapsulation,
Inheritance,
JavaScript,
OOP,
Polymorphism
Subscribe to:
Comments (Atom)
