Question

I am not able to understand how jQuery chaining works.

jQuery("div").attr("id", "_id")
    .hide()
    .show();

I did something like chaining, but I’m not sure if it’s the same logic that jQuery uses.

var fun = (function (parma) {
return function () {
    return {
        start: function () {
            console.log("start");
            return this;
        },

        mid: function () {
            console.log("mid");
            return this;
        },

        last: function () {
            console.log("last");
            return this;
        }
    }
}

})();

// Working
fun().start()
    .mid()
    .last();

Answer 1

If the return value of a function is an object that has a method, you can call that method immediately. Simple as that.

Since you’re returning this, you’re returning the same object that the previous method was called on. That means you’re returning an object with all the same methods.

---

Think of it this way:

var f = {
    foo: function() {
             console.log("foo");
             return b;
         }
};

var b = {
    bar: function() {
             console.log("bar");
             return f;
         } 
};

Here we have two objects.

• The f object has a method called foo that returns the b object.
• The b object has a method called bar that returns the f object.

Because of this, after calling foo, we can call bar, and vice versa.

f.foo().bar().foo().bar(); // etc

But because f doesn’t have bar and b doesn’t have foo, we can never call the same method twice.

---

But what if we only had one object, that had both methods, and both methods always returned the same original object?

var fb = {
    foo: function() {
             console.log("foo");
             return fb;
         },
    bar: function() {
             console.log("bar");
             return fb;
         }
};

Now we’re always returning an object that has both the foo and bar methods, so we can call either method.

fb.foo().bar().bar().bar().foo().foo().bar();

So now the only real difference is that we are returning fb instead of this, but it doesn’t matter since they’re the same object. The code above could do return this; and it would behave the same.

It would matter if you wanted to create several instances of the object, but that’s a question of object orientation techniques, not method chaining.