37

As an example, copied from jQuery 1.2.6:

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {
        // Make sure that a selection was provided
        selector = selector || document;
        ..........
    },
};

I have read some posts here like JavaScript: What are .extend and .prototype used for? and know a prototype can be used in a subclass to extend some methods.

But I cannot understand the usage in the above snippet from jQuery.

Are there any canonical documents describing the prototype?

Thanks.

Community
  • 1
  • 1
liam xu
  • 2,892
  • 10
  • 42
  • 65
  • Have a look at the tag info references. In particular I suggest you [this article](http://eloquentjavascript.net/chapter8.html) from Eloquent JavaScript, and [this one](http://www.ecma-international.org/ecma-262/5.1/#sec-4.2.1) from the ECMAScript language specification. – Alberto De Caro Oct 30 '12 at 13:44

1 Answers1

66

All objects have a prototype property. It is simply an object from which other objects can inherit properties. The snippet you have posted simply assigns an object with some properties (such as init) to the prototype of jQuery, and aliases jQuery.prototype to jQuery.fn because fn is shorter and quicker to type. If you forget about jQuery temporarily, consider this simple example:

function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function () {
    alert(this.name + " says hello");
};

var james = new Person("James");
james.sayHello(); // Alerts "James says hello"

In this example, Person is a constructor function. It can be instantiated by calling it with the new operator. Inside the constructor, the this keyword refers to the instance, so every instance has its own name property.

The prototype of Person is shared between all instances. So all instances of Person have a sayHello method that they inherit from Person.prototype. By defining the sayHello method as a property of Person.prototype we are saving memory. We could just as easily give every instance of Person its own copy of the method (by assigning it to this.sayHello inside the constructor), but that's not as efficient.

In jQuery, when you call the $ method, you're really creating an instance of jQuery.prototype.init (remember that jQuery.fn === jQuery.prototype):

return new jQuery.fn.init(selector, context, rootjQuery);

And if you look at jQuery.fn.init:

jQuery.fn.init.prototype = jQuery.fn;

So really, you're creating an instance of jQuery which has access to all the methods declared on jQuery.prototype. As discussed previously, this is much more efficient than declaring those methods on each instance of jQuery.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • Is **jQuery.fn** only a name?Does it have relation to so-called **namespace**? – liam xu Oct 30 '12 at 14:28
  • 5
    `fn` is a property of the `jQuery` object (just like `prototype` is just a property of the `jQuery` object). The value of both the `fn` property and the `prototype` property is a reference to a single object. – James Allardice Oct 30 '12 at 14:30
  • thanks! What is **jQuery.fn.init.prototype = jQuery.fn;** for? – liam xu Oct 31 '12 at 15:10
  • 2
    @liamxu - You're welcome :) That line causes `jQuery.fn.init` to inherit all of the methods declared as properties of `jQuery.fn`. So when you get an instance of `jQuery.fn.init` (which is what you get by calling `jQuery`), it has access to all the usual jQuery methods that you would expect it to. Does that make sense? – James Allardice Oct 31 '12 at 15:17
  • I saw **new jQuery.fn.init( selector, context, rootjQuery )**, why it can call the *init* method of jQuery.prototype? You said **jQuery.fn.init** is a class?In my opinion, **new jQuery.fn.init( selector, context, rootjQuery )** should call its constructor. – liam xu Oct 31 '12 at 15:29
  • 5
    `jQuery.fn.init` is a class (as far as "classes" go in JavaScript anyway). When you call it with the `new` operator, it creates a new instance of `jQuery.fn.init`. It's quite confusing, because `jQuery.fn.init.prototype` is `jQuery.fn`, so there's an infinite cyclical reference. – James Allardice Oct 31 '12 at 15:42
  • @JamesAllardice Great answer and follow up. Thanks! – Andreas May 16 '13 at 08:32
  • Mmmmm, The JQuery force is strong in this one. – Dylan Hayes Sep 23 '14 at 15:13