How does jQuery achieve making $ an alias for the jQuery function?

I’m having a little troub开发者_运维技巧le wrapping my head around the $ sign being an alias for the jQuery function, particularly in a plugin. Can you explain how jQuery achieves this aliasing: how does it define '$' to be an alias for the jQuery function? That's the first question.

Secondly, can you explain how/why the following code works to map '$' to the jQuery function in a plugin's definition and why if you don't do this, your plugin could collide with other libraries that might use the dollar sign?

(function( $ ){
    $.fn.myPlugin = function() {
        // Do your awesome plugin stuff here
    };
})(jQuery);

It simply declares a variable. See here

jQuery itself is a large self executing function. This means that it declares a function and then runs it. Inside the function it declares the local jQuery object which is a function.

It will then right at the end of it set window.jQuery = window.$ = jQuery

This is setting both window.jQuery and window.$ to the local jQuery object. We can set global variables by making them properties of the window object.

Now both window.jQuery and window.$ both point at jQuery since objects are passed by reference.

var jQuery = (function() {

    var jQuery = function( selector, context ) {
        ...
    };

    ...

    return (window.jQuery = window.$ = jQuery);

}());

it actaully declares jQuery twice for a small efficiency gain since the when looking for the variable it doesn't have to look upwards into an extra outer function.

You can use two assignments like that because (var a = b) === b

As others have mentioned the fact that $ is a legimate variable name and that functions are first class objects, thus we can treat them as objects also helps to make this possible.

A function, like any object in javascript, can be assigned to a variable. This variable can have any name (that follows the JS variable naming rules). "$" satisfies the naming rules, so the jQuery function is aliased to "$" for brevity. Consider the following example:

var myFn = function() { alert('myFunc'); };
var $ = myFn;

$();
// alerts 'myFunc'

Exact code (from jquery-1.4.1-vsdoc.js):

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

Objects in JavaScript, and thus jQuery, are functions. You could define your own JS library by creating a function with other functions assigned to attributes of this single function:

myLibrary = function() {
    this.myLibraryFunction = function() {
        ...
    };
};

new myLibrary().myLibraryFunction();

In a similar way jQuery does this with a function named jQuery, instead of myLibrary in the above example.

Creating Aliases

Creating aliases (or references) is possible because JavaScript allows references to functions to be passed around without having to actually call the function. For example:

new myLibrary().myLibraryFunction();

calls your library function, however omitting the parentheses allows you to deal with a reference to that function:

var f = new myLibrary().myLibraryFunction;

You can then call the references you have stored, rather than the original by putting the parentheses back:

var f = new myLibrary().myLibraryFunction;
f();

In the same way jQuery can store a reference to the jQuery function in another variable named $:

var $ = jQuery;

You can see this concept used in the jQuery source code on github.