What is the Purpose of jQuery.fn?

What lies beneath jQuery.fn?

Within the labyrinth of jQuery code, you may have stumbled upon the enigmatic jQuery.fn property. This curiosity sparks the question: What profound secrets does this "fn" hold?

The answer lies in the fundamental architecture of jQuery. The jQuery identifier, represented by the iconic "$" symbol, serves as a constructor function. When invoked, it creates instances that inherit properties from the constructor's prototype.

Envision a simple constructor function:

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

// Prototype property adds inherited property
Test.prototype.b = 'b';

// Instantiate and access properties
var test = new Test(); 

console.log(test.a); // "a", own property
console.log(test.b); // "b", inherited property

Similarly, jQuery adopts a parallel structure:

(function() {
  // Constructor accepts argument and ensures use of `new` operator
  var foo = function(arg) {
    if (!(this instanceof foo))
      return new foo(arg);
    this.myArg = arg;
  };

  // Alias `fn` property to `prototype` property
  foo.fn = foo.prototype = {
    // Define methods here
  };

  // Expose the library
  window.foo = foo;
})();

// Extension via `fn` alias
foo.fn.myPlugin = function () {
  // Access inherited argument
  alert(this.myArg);
  // Chainability requires returning `this`
  return this;
};

// Usage: extend and invoke plugin method
foo("bar").myPlugin(); // alerts "bar"

In essence, jQuery.fn is merely an alias to the jQuery prototype. It provides a convenient access point for inheriting and extending functionality, allowing you to seamlessly expand jQuery's capabilities with custom methods like myPlugin in the example above. This unveils the power of prototype inheritance, a cornerstone concept in object-oriented programming that enables code reuse, extensibility, and maintainability.

The above is the detailed content of What is the Purpose of jQuery.fn?. For more information, please follow other related articles on the PHP Chinese website!