How to return an array from constructor and successfully chain the object in Javascript

Question

I've been going through the jQuery code and I have seen a few links that have this question. I am asking it again because I did not really understand any of them so please do not mark this question as duplicate. I've gone through the following stackoverflow links:

How can jQuery return an array and still have it to be a jQuery object

How does jQuery chaining work

How does jQuery return an array of the selected objects

Gone through all of those links and I do not get how it works. All I ask is a very simple example of returning an array from a constructor object and still chaining it. I have tried the following code:

(function(window, document, undefined)
{
    var lhd = function(selector)
    {
        return new Lhd(selector);
    }

    function Lhd(selector)
    {
        var elem = document.querySelectorAll(selector),
            elems = {};

        return this.makeArray(elems, elem);
    }

    Lhd.prototype = {
        makeArray: function(arr, result)
        {
            var ret = result || [];

            Array.prototype.push.apply(ret, arr);

            return ret;
        },

        click: function()
        {
            console.log('click');

            return this;
        }
    };

    window.lhd = lhd;
})(window, document);

I'm able to return an array but unable to chain it.

makeArray returns not this but something else. How are you going to chain it? — zerkms
– zerkms, Commented Jul 23, 2015 at 1:47
the makeArray is returning the same as the jQuery code returns @zerkms — Hawk
– Hawk, Commented Jul 23, 2015 at 1:51
@DanielA.White, please elaborate more. How should I go about to chain it? — Hawk
– Hawk, Commented Jul 23, 2015 at 1:51
@Hawk if it is returning the same as jquery then it should work the same as jquery. If it works - why do you ask the question? — zerkms
– zerkms, Commented Jul 23, 2015 at 1:55

Bergi · Accepted Answer · 2015-07-23 02:49:13Z

1

I'm able to return an array

You must not return an array, you must make the new instance (this) become array-like.

function lhd(selector) {
    return new Lhd(selector);
}

function Lhd(selector) {
    var elems = document.querySelectorAll(selector);

    this.length = 0; // initialise a length
    Array.prototype.push.apply(this, elems); // push onto the instance

    // don't `return` anything - it's a constructor
}

Lhd.prototype.click = function() {
    console.log('click');
    return this;
};

You can use it now like lhd('a').click().click().

answered Jul 23, 2015 at 2:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hawk Over a year ago

thanks a lot, I was frying my mind for the past 2 days. :)

Collectives™ on Stack Overflow

How to return an array from constructor and successfully chain the object in Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related