Unveiling jQuery’s Object Architecture: How $ and init Work

Several years ago, many front‑end developers were fascinated by studying the jQuery source code, often exclaiming, “JavaScript can do this?” Although newer frameworks have reduced jQuery’s necessity, the techniques learned from it remain valuable for deeper JavaScript comprehension.

The purpose of this article is to share how the jQuery object is encapsulated, providing a stepping stone for further source‑code exploration.

Typical usage of a jQuery object looks like:

Initially, questions arise such as “What is $?” and “Why can we declare an object without new?”. The answer lies in the clever construction of the jQuery object.

Object Encapsulation Analysis

The simplified implementation demonstrates the overall framework of jQuery. Understanding this framework makes reading the actual source much easier.

Key prototype tricks include: jQuery.fn = jQuery.prototype, jQuery.fn.init.prototype = jQuery.fn These lines are crucial to the jQuery object. The following diagram illustrates the logic:

In the implementation, the constructor declares a fn property pointing to jQuery.prototype and adds an init method to the prototype.

Then the prototype of init is set to jQuery.prototype:

Finally, the public entry point maps the characters $ and jQuery to the same function, returning an instance of init:

Thus, using $('#test') actually creates an init instance, whose real constructor resides in the prototype.

Note on Overusing $()

Many developers indiscriminately call $() for the same element, which repeatedly creates new init instances and leads to unnecessary memory consumption. The proper approach is to store the jQuery object in a variable and reuse it.

Extension Method Analysis

The simplified code also implements two extension methods. Understanding this binding is essential; the options argument follows a key: value pattern, and a for...in loop adds each key as a new jQuery method.

When using jQuery.extend, methods are added to the jQuery constructor (static or utility methods). When using jQuery.fn.extend, methods are added to jQuery.prototype (instance methods).

Most internal jQuery methods are built via these two extension mechanisms.

Grasping jQuery’s overall framework makes learning specific methods such as css , val , or attr much easier and saves time when diving into the source.

Static vs. Instance Methods

Static (utility) methods, like $.each, can be called without creating an instance, offering higher performance but not reducing memory usage. Instance methods require an object created via $(...), incurring a higher usage cost but saving memory.

Popular utility libraries such as lodash.js are worth studying.

Implementing a jQuery Plugin

Creating a jQuery plugin is not as daunting as it seems; by extending jQuery with custom methods (e.g., a drag‑and‑drop feature), you can turn it into a reusable plugin.

Future Topics Preview

Upcoming articles will cover:

Event loop mechanism

Promise

ES6 basic syntax

Common design patterns in ES6

ES6 modules

Practical ES6 examples

React basics

React components

Higher‑order components

React projects

Redux

These posts aim to provide concrete, actionable guidance for mastering modern front‑end development.