Plongez dans jQuery.fn : l'alias du prototype

Dans la bibliothèque jQuery, vous pouvez rencontrer l'énigmatique jQuery.fn. Que représente ce mystérieux fn et à quoi sert-il ?

Le rôle du prototype

Dans le domaine de JavaScript, la propriété prototype est un composant crucial de fonctions de constructeur. Lorsque vous créez une instance à l'aide d'un constructeur spécifique, cette instance hérite des propriétés et des méthodes du prototype du constructeur.

jQuery en tant que constructeur

De même, l'identifiant jQuery (ou $) agit comme une fonction constructeur. Chaque objet jQuery créé hérite du prototype du constructeur jQuery. Ce prototype est accessible via la propriété fn, faisant essentiellement de jQuery.fn un alias pour jQuery.prototype.

Un regard plus approfondi avec un exemple

Pour illustrer ce concept, construisons une fonction constructeur simple :

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

var test = new Test();

Dans cet exemple, l'instance test hérite de la propriété b du prototype du constructeur Test.

Architecture et extensions jQuery

Le fonctionnement interne de jQuery ressemble à cette structure constructeur-prototype :

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

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

  window.foo = foo;
})();

Dans jQuery, des extensions peuvent être ajoutées au prototype via la propriété fn, vous permettant d'améliorer les objets jQuery avec des fonctionnalités personnalisées.