Chaining function calls jQuery style

Question

Hi I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour.

Note: I don't want to chain functions with jQuery, I want to chain them like jQuery.

So based on the jQuery code what I have so far is (doesn't work in IE):

var x = function(string) {
    return new x.fn.init(string);
};

x.fn = x.prototype = {

    message: '',

    init: function(string) {
        x.fn.message = string;
    },

    log: function() {
       console.log(x.fn.message);    
    }
};

x.fn.init.prototype = x.fn;

var start = function() {    
    x('hello world').log();
};

document.addEventListener('DOMContentLoaded', start, false);

The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely...

I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless loop.

To be honest I'm struggling to get my head around this stuff as well so if anyone has a link to some good reading around this that would be much appreciated too.

Answer 1

All you should need to do is return this; from the method invocations that you want to be able to chain from. Of course - that's dependent on this correctly referencing the appropriate target.