Delving into jQuery.fn: The Alias to the Prototype

Within the jQuery library, you may encounter the enigmatic jQuery.fn. What does this mysterious fn stand for and what purpose does it serve?

The Role of Prototype

In the realm of JavaScript, the prototype property is a crucial component of constructor functions. When you create an instance using a specific constructor, that instance inherits properties and methods from the constructor's prototype.

jQuery as a Constructor

Similarly, the jQuery identifier (or $) acts as a constructor function. Every jQuery object created inherits from the prototype of the jQuery constructor. This prototype is accessible through the fn property, essentially making jQuery.fn an alias for jQuery.prototype.

A Deeper Look with an Example

To illustrate this concept, let's construct a simple constructor function:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test();

In this example, the instance test inherits the property b from the prototype of the Test constructor.

jQuery Architecture and Extensions

The inner workings of jQuery resemble this constructor-prototype structure:

(function() {
  var foo = function() { // core constructor
    // ...
  };

  foo.fn = foo.prototype = {
    init: function () { /*...*/ }
    // ...
  };

  window.foo = foo;
})();

Within jQuery, extensions can be added to the prototype through the fn property, enabling you to enhance jQuery objects with custom functionality.