How does jQuery clone its methods so quickly?

Question

I am trying to return a query like object, in my first try I try the Object.create method

var ElementArray = {
    someMethod : myMethod,
    ....
}

var addMethods = function(elements) {
    var obj = Object.create(ElementArray);
    obj[0] = elements;
    return obj;
};

var getId = function( query ) {
    return addMethods( doc.getElementById(query) );
};

(jsperf)

I immediately found that this was slower then jQuery(sizzle), especially on firefox. The issues with firefox where probably to do with cross-compartment wrappers (see bug here), but I was still quite dissatisfied.

I also tried using prototype instead

var ElementArray = function(){};
ElementArray.prototype.someMethod = someMethod;
....

var addMethods = function(elements) {
    var obj = new ElementArray();
    ....
};

Slightly better on Chome, but still very slow on firefox.

So my question is, how does jQuery(sizzle), and other libraries do it || Whats the fastest way to return a object with a 1-2 instance properties? (Everything else can just be references)

jQuery uses the `prototype` for its methods. So, there's no work to do when creating a new object other than the system setting the prototype reference. — jfriend00, Oct 11 '15 at 02:28
@jfriend00 Searching through sizzles github repo I am not finding the the prototype method (I searched for) `.prototype` ... Am I missing something? — Burdock, Oct 11 '15 at 02:35
Internally, it uses `.fn`, but that is aliased to `.prototype` and it's not actually on `jQuery`, but on a different object. — jfriend00, Oct 11 '15 at 02:36
See the jQuery function here: https://github.com/jquery/jquery/blob/master/src/core.js#L18. It's the `jQuery.init.prototype` and see here: https://github.com/jquery/jquery/blob/master/src/core.js#L38 — jfriend00, Oct 11 '15 at 02:40

jfriend00 · Accepted Answer · 2015-10-11T02:57:26.640

So my question is, how does jQuery(sizzle), and other libraries do it

jQuery uses the prototype. It kind of hides that fact by aliasing the prototype to .fn, but it is still the prototype. Here's the jQuery function.

jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
},

And, here's the aliasing:

jQuery.fn = jQuery.prototype

And, the implementation of the actual jQuery constructor:

init = jQuery.fn.init = function( selector, context, root ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    // Method init() accepts an alternate rootjQuery
    // so migrate can support jQuery.sub (gh-2101)
    root = root || rootjQuery;

   .....

And, the round-about assignment of the `.init.prototype':

// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

How does jQuery clone its methods so quickly?

1 Answers1