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 JavaScript, so excuse me if this is a noob question, (I have looked at the source but it's hard to try to dissect).

Anyway, as an example $(document).ready(<args>); Both the constructor $() and the prototype ready() act as a function. How? Because if I try this:

var $ = function( selector ) {
    if(selector == document) {
        return document;
    }
};

$.prototype = {
    constructor: $,
    ready: function( args ) {
        if( isDomReady ) {
            args.apply( document );
        } else {
            window.onload = args;
        }
    }
};

var isDomReady = ( document.addEventListener || document.readyState == ("complete"|"loaded"|true|4) || document.onreadystatechange() ) ? true : false;

$(document).ready(function() { alert("Wibbles!") });

I get an error Uncaught TypeError: Object[object global] has no method 'ready'

You're not chaining the methods by returning `this` from `ready`. — Jared Farrish, Mar 09 '13 at 05:03
I know why you're getting the error message. The $(document) is just returning the HTMLDocument, which doesn't have a .ready function. If $ had an "element" property, which stored the document element when you run the constructor, then you could check it's ready state by accessing the stored element in the ready function. — MattDiamant, Mar 09 '13 at 05:04
@MattDiamant Ahh... I think I'll re-read that comment a few times for study. Lol. But I think I understand. Thanks. — Jace Cotton, Mar 09 '13 at 05:08
Basically all the methods return the object they were called from. — Erik Reppen, Mar 09 '13 at 05:10

score 8 · Answer 1 · answered Mar 09 '13 at 05:35

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.

Thank you! This is more of the direction I was looking for, but it came a little late, I already got into function chaining. Thanks, though! — Jace Cotton, Mar 09 '13 at 17:35

score 3 · Accepted Answer · edited May 23 '17 at 12:08

3

It's a programming technique called function chaining.

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

edited May 23 '17 at 12:08

Community

1
1

answered Mar 09 '13 at 05:03

roydukkey

3,149
2
27
43

jQuery prototype and constructor function chaining

2 Answers2

Linked