Decoding jQuery – OOP and jQuery part 2

As a smaller series within Decoding jQuery series, OOP and jQuery will focus on jQuery internals and OOP concepts around it.

In part 1, concepts like the variables (data) and functions are explained in jQuery. In part two, we will take a look at object in jQuery.

1. An object is just an object, like a person or a chair
Since we are talking about object-oriented programming, so what is an object? An object is just an object, like I am an object -a human. A dog is an object, an animal object. So object-oriented programming is just an expression of an object in programming language.

As mentioned above, I could be an object. So in OOP, I could be expressed using an object like:

var shichuan = {};

For each object, there can be properties and methods (action). So for example, I have black hair, and it’s my property. It’s not a method because I don’t have to consciously paint it black. It’s black just the way it is. So I can add this property to shichuan object.

var shichuan = {
  hair: "black"
};

Now one of my hobby is to ride unicorn, so riding unicorn is a method of mine. To put it in OOP way, it will be like:

var shichuan = {
  hair: "black",
  ridingUnicorn: function() {
    // how I ride unicorn
  }
};

To sum up the idea of an object:
1. The name of the variable that contains the object is shichuan
2. It’s wrapped within { and }
3. The elements (properties, methods) contained in the object are separated with commas
4. The key/value pairs are divided by colons, as key: value (in the above example, hair: “black”)
5. methods are actually just functions, like ridingUnicorn is a method (function) of shichuan object.

2. object in jQuery
So how is object related to jQuery, remember we talked about local copy of jQuery function in part 1? Let’s see what’s inside the jQuery function (at around line 4), it’s just one line of code and explained in plain English: The jQuery object is actually just the init constructor ‘enhanced’. So what is this init

var jQuery = function( selector, context ) {
  // The jQuery object is actually just the init constructor 'enhanced'
  return new jQuery.fn.init( selector, context, rootjQuery );
}

If you do a search for ‘jQuery.fn’, you should be able to locate it around line 73, it looks like:

jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function( selector, context, rootjQuery ) {
  ...
  },
  ...
}

jQuery prototype (we will talk about prototype in a later post) is an object, a big one. It has many many properties and methods. There are properties like: constructor, selector, jquery, length etc. There are methods like: init, size, toArray, get, pushStack etc.

3. function is data, but it’s also object!
In part 1, we talked about function is just data, and the following two ways of constructing a function are the same:

// local jQuery
function jQuery( selector, context ){
  //...
}
// local jQuery
var jQuery = function( selector, context ){
  //...
}

There is actually a third way:

// local jQuery
var jQuery = new Function('selector', 'context', '//...');

Although this works, BUT it’s generally not recommended to define a function this way, because like eval, JavaScript will evaluate the source code you pass.

Coming up next…
In part 3 of OOP and jQuery internals, we will look into prototype.

References
Object-Oriented JavaScript – one of the easiest to read, best OOP JavaScript book ever by Sir Stoyan Stefanov.