Углубляясь в jQuery.fn: псевдоним прототипа

В библиотеке jQuery вы можете встретить загадочный jQuery.fn. Что означает эта загадочная fn и какой цели она служит?

Роль прототипа

В сфере JavaScript свойство прототипа является важнейшим компонентом функции конструктора. Когда вы создаете экземпляр с использованием определенного конструктора, этот экземпляр наследует свойства и методы из прототипа конструктора.

jQuery как конструктор

Аналогично, идентификатор jQuery (или $) действует как функция-конструктор. Каждый созданный объект jQuery наследуется от прототипа конструктора jQuery. Этот прототип доступен через свойство fn, что фактически делает jQuery.fn псевдонимом для jQuery.prototype.

Более глубокий взгляд на примере

Чтобы проиллюстрировать эту концепцию, давайте создадим простую функцию-конструктор:

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

var test = new Test();

В этом примере тест экземпляра наследует свойство b от прототипа конструктора теста.

Архитектура и расширения jQuery

Внутренняя работа jQuery напоминает структуру прототипа конструктора:

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

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

  window.foo = foo;
})();

В jQuery к прототипу можно добавлять расширения через свойство fn, что позволяет расширять объекты jQuery с помощью пользовательских функций.