I’ve been working with Murach Publishing to revise their JavaScript book, and it’s almost ready to go to press (yay!). While I was finishing up the final Intro to jQuery chapter, though, I found myself puzzled by something. But first, let me give you some JavaScript background to explain my puzzlement.
In JavaScript, you can use constructor functions to make multiple instances of an object. When you do, you should put the object’s methods on the object prototype. This saves memory and makes the methods available to all instances of the object.
By contrast, when you’re working with a singleton, like an object literal or an object created with the module pattern, there’s only one instance of the object. In this case, you should put the methods directly on the object.
The jQuery library uses the module pattern to create a global singleton object named jQuery. That means there’s only one instance of jQuery. But when you create a jQuery plugin, you’re supposed to add your method to the jQuery.fn (or $.fn) object, which is an alias for the jQuery object’s prototype. But why? If the jQuery object is a singleton, why are we adding methods to it’s prototype?
Further puzzling me, the jQuery plugin tutorial says “Whenever you use the $ function to select elements, it returns a jQuery object”. Hmm. If jQuery is a singleton created by the module pattern, how is the $ function returning jQuery objects?
Now, you should know that you don’t need to have the answers to these questions to use jQuery effectively and write your own plugins. You don’t even need to have them to write an effective Intro to jQuery chapter in a JavaScript technical book. And so I set this all aside and went on with my work.
Yesterday, though, I couldn’t take not knowing the answers for one more second. So I read some articles online and studied the uncompressed jQuery code (luckily the library isn’t too massive), and I think I’ve figured it out. Bear with me, though – things get a little circular.
The jQuery object is indeed a singleton created with the module pattern, and the methods that jQuery uses are indeed on this singleton object’s prototype. But, crucially, one of the objects on that prototype is a constructor function named init. And, also crucially, the prototype of the init constructor function points to the prototype of the singleton jQuery object. Finally, most crucially, an instance of this init object is what is returned when you call the $ function.
Another way to look at this is that the singleton object’s $ function is a factory that creates and returns instances of the jQuery.fn.init constructor function. And both the singleton and the instances of the init object are referred to as jQuery objects. And they have the same prototype, so anything I add to the singleton’s prototype is also available to the prototype of all the instances of the init object.
Phew! No wonder I was puzzled. I’m not enough of a jQuery maven to know why this structure was chosen. It might be that there’s some really advanced JavaScript benefit to coding it this way. Or it might be that it’s a holdover from earlier versions that they wish they could change but it would cause too many problems. But at least I think I’ve got a grip on why I’d want to add my plugin code to the singleton jQuery object’s prototype.
Here are some code examples that illustrate:
TechKnowSolve Blog 