jQuery Deconstruction | JQuery object in ES 5 terms?

Question

This returns a jQuery object. what is a jQuery object. Is it an object, an array, or some combination of both?

$("#id")

I'm looking in the source here, but can not find it.

Answer 1

First, what it's not.

A jQuery object is not an Array.

In JavaScript, there are built-in native constructor functions. One of these is Array. But ultimately the Array constructor creates Objects. jQuery objects are not built from the Array constructor.

---

So how is an Object different from an Array?

Since Object and Array are built-in native constructors, the objects created from the constructors have an internal [[Class]] property. You can see its value like this.

Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call([]); // [object Array]

So you can see that these objects have that as a difference.

---

What other differences are there?

The prototype chain of the two objects are different. For a plain object, it could be visualized like this.

{} ---> Object.prototype ---> null

While for an Array, like this.

[] ---> Array.prototype ---> Object.prototype ---> null

So you can see that their inheritance distinguishes them as well.

---

So what about a jQuery object?

A jQuery object is more like a plain Object than an Array. But JavaScript lets you define custom (not built-in) constructors.

The toString value will be the same as an Object [object Object], but the prototype chain will be different.

function Foo() {

}

new Foo() ---> Foo.prototype ---> Object.prototype ---> null

So jQuery's prototype chain would be similar to this, but with the jQuery constructor instead of Foo.

---

So what does all this mean?

All objects in JavaScript are similar in that they inherit from Object.prototype *, but you can have different objects that have an extended prototype chain, and you can also have native objects that have an internal [[Class]] property that gives them distinction.

So to answer the question of "what type of object is a jQuery object", the answer is that it is an Object that inherits from Object.prototype like every object, but also inherits from the prototype of its custom constructor.

_{* Note that in ES5, you can also have an object that has no prototype chain. Its chain is terminated immediately with null.}

---

But a jQuery object stores DOM elements at numeric indices, and has a .length property. Doesn't that make it an Array?

No, that just makes it an object with properties that are numbers, and a property named length.

var myObj = {};
myObj[0] = "foo";
myObj[1] = "bar";

An Array's properties are not special. They are identical to an Object's properties.

var myArr = [];
myArr[0] = "foo";
myArr[1] = "bar";

These two code examples are doing the exact same thing.

---

They're doing exactly the same thing? Really?

Well almost. The properties themselves are no different between Array objects and Object objects, but Arrays have some special behaviors.

For example, if I add a property at a higher index than the current .length accounts for, the .length will be automatically adjusted.

myArr.length; // 2
myArr[9] = "baz";
myArr.length; // 10

On an Array, .length itself has some "magic" abilities, like being able to truncate the Array by setting .length to a lower value.

myArr.length = 1;
myArr[1]; // undefined

So while a jQuery object has numeric properties and a .length property, it doesn't behave as a native Array would behave.

Answer 2

$() return an instance of the jQuery class (new jQuery()).
It therefore inherits all standard jQuery methods, as well as all plugins, from jQuery.prototype (which is aliased to jQuery.fn)

In addition, the jQuery() constructor turns each instance into an array-like object, by adding a lengthproperty, as well as indexed properties for each element in the set.

Answer 3

The returned object (see EcmaScript §4.2.1 on what that means) is an instance of jQuery's internal constructor function (jQuery.fn.init - see this answer for detailed information on jQuery's instantiation pattern), inheriting from the $.fn prototype object.

And of course, it is an instance of Object as nearly every object in JavaScript.

And, because every jQuery element represents a collection of [DOM] elements, it looks like an Array with its numeric index properties - although the length property isn't self-updating automatically, you can apply most of the Array methods on it. It is not a real Array instance (What's an Array, and what is in JS?).

Answer 4

jquery object is a object of jquery library basically all the jquery methods and properties are attached to that jquery object that you can;t use it as a normal javascript object. it also vary from which jquery object it is.