ajsie ajsie - 1 year ago 108
Javascript Question

What does jQuery.fn mean?

What does the 'fn' here mean?


Answer Source

In jQuery, the fn property is just an alias to the prototype property.

The jQuery identifier (or $) is just a constructor function, and all instances created with it, inherit from the constructor's prototype.

A simple constructor function:

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

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

A simple structure that resembles the architecture of jQuery:

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}

  // expose the library
  window.foo = foo;

// Extension:

foo.fn.myPlugin = function () {
  return this; // return `this` for chainability

foo("bar").myPlugin(); // alerts "bar"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download