jQuery prototype and constructor function chaining

Question

How would jQuery allow its constructor to act as a function accepting arguments meanwhile its constructor also acts as a function accepting arguments?

I am a bit new to

Answer 1

It's a programming technique called function chaining.

You can see more on this here: How does basic object/function chaining work in javascript?

Answer 2

You know, this quite intrigued me. You've accepted an answer already, but let me just post mine in the event that it proves useful. There is a fiddle created here

jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context );
};

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    context: null,
    isReady: null,
    init: function( selector, context ) {
        if (selector === document){
            this.context = document;
            this.selector = document;
        }
        console.log(this);
        return this;
    },
    ready: function(func){
        var args = Array.prototype.slice.call(this, arguments),
            boundReadyFunc = func.bind(this, args.slice(1));

        if (this.isReady){
            func();
        }
        else {
            document.addEventListener( "DOMContentLoaded", this.onReady.bind(this, func), false );
        }
    },
    onReady: function(func){
        console.log("onready");
        this.isReady = true;
        func.call(this);
    },
};

jQuery.fn.init.prototype = jQuery.fn;
jQuery(document).ready(function(){
    alert("Hey, here I am");
});

Let me try to explain how this works.

Every time you call something like $(selector), a new jQuery instance is created, with the options that you have provided (see return new jQuery.fn.init( selector, context ););

For the sake of convenience, we expose the jQuery prototype as another global named, jQuery.fn. To make it truly chainable, the init function must return a new jQuery instance. Which is why, at the end, we explicitly define that the prototypes for both jQuery and jQuery.init are the same. This way, you can now chain function calls like

$(document).ready(DoSomethingHere)

Hope this helps.

Also, you can find the jQuery source on github. It's modular and quite easy to follow.