Object Oriented Programming or OOP with jQuery: there's a plugin that does much of the heavy-lifting for you when dealing with objects. I said objects, not classes, because JavaScript is a class-free language, at least if we think of classes using the traditional approach of Java, C++ and C#. To add an extra level of confusion, some developers use terms such as super-class instead of parent class to refer to a particular JavaScript pattern used to handle inheritance. It's better not to use the term class at all to avoid any possible confusion. In JavaScript there are only objects, such as arrays, functions, numbers and so on. Objects not classes.
This is not an academic discussion on the proper nomenclature to be used with JavaScript and OOP. Simply put, using the term object simplifies your life because you don't have to constantly make comparisons with other programming languages just to find out whether there are similarities or not. JavaScript is JavaScript: period. When it comes to OOP in JavaScript you have to get rid of all your previous concepts on OOP that you can learn from other languages. For example, I've already accepted the fact that JavaScript can actually implement only a limited number of all the design patterns described by the Gang of Four. This is because JavaScript is different from other languages, but not inferior. JavaScript is JavaScript: not PHP or C#, but simply JavaScript. Period? No, now it comes jQuery.
All the JavaScript frameworks that came before jQuery provided (and provide) some extended features for handling OOP. For example, Prototype provides a basic mechanism to instantiate an object:
var o = Class.create();
This is different from:
var o = new Object();
because Prototype uses a particular object creation pattern that takes care of the prototype chain before creating a new object. Also inheritance is treated carefully: Prototype uses the extend() method that simply makes object B to inherit all properties and methods of object A, while preserving the correct sequence in the prototypical chain.
By doing so, objects are extended using prototype. This is completely different from the traditional way of handling inheritance in other languages. In fact, inheritance is treated internally by languages such as PHP or Java:
class B extends A
{
public function __construct()
{
parent::__construct();
}
}
This is the only way by which PHP tries to make explicit something that is not explicit, that is, inheritance. Instead, JavaScript uses the prototype object as a live tool to make inheritance live:
B.prototype = new A();
This is live, because you can access and augment this object whenever you want:
B.prototype.method = function() {
// method's body
};
Due to its nature, prototypical inheritance has its flaws, for example a certain looseness. For that reason, jQuery provides the $.extend() method that handles inheritance for us. This method accepts two or more objects as its parameters. The first one is the parent object and the subsequent are the child objects:
var A = {// methods and properties};
var B = {// methods and properties};
var C = $.extend(A, B);
In this case, we've created a third object which inherits from the previous ones. This method makes a deep copy of the objects passed as its parameters. This is very important when handling inheritance in JavaScript.
This method is incredibly flexible. You can even pass an empty object as its second parameter. In this case, this will be the object that inherits from the first:
var myGMaps = $.extend(google.maps, {});
With this method, you can include external namespaces into your main namespace:
var A = {...};
var B = {...};
var C = new function() {
var _D = $.extend(A, B);
};
When you deal with an object created with the constructor pattern, this methods works on the instance of the object:
function A() {...}
var a = new A();
var B = $.extend(a, {});
However, a typical case use for this method is plugin development, though I'd like to say that limiting this method only to this use is quite reducing.