JQuery Deconstruction | JQuery object in ES 5 terms?

Question

Returns a jQuery object. what is jQuery object. Is this an object, an array, or some combination of both?

$("#id") 

I look at the source here , but can not find it.

Answer 1

Firstly, that is not the case.

The jQuery object is not an array.

JavaScript has built-in design functions. One of them is Array . But ultimately, the Array constructor creates objects. JQuery objects are not built from the Array constructor.

---

So how does an object differ from an array?

Since Object and Array are built-in built-in constructors, objects created from constructors have an internal [[Class]] property. You can see its meaning as follows.

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

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

---

What other differences exist?

The prototype chain of the two objects is different. For a simple object, this could be visualized as follows.

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

So far for an array like this.

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

So you can see that their inheritance sets them apart.

---

What about a jQuery object?

A jQuery object is more like a simple object than an array. But JavaScript allows you to define custom (not built-in) constructors.

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

 function Foo() { } new Foo() ---> Foo.prototype ---> Object.prototype ---> null 

So, the jQuery prototype chain will look like this, but with a jQuery constructor instead of Foo .

---

What does all this mean?

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

So, to answer the question “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 its custom constructor from prototype .

_{* Please note that in ES5 you can also have an object that does not have a prototype chain. Its chain immediately ends in null .}

---

But the jQuery object stores DOM elements in numeric indexes and has the .length property. Doesn't that make it an array?

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

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

Array properties are not special. They are identical to the properties of the object.

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

These two code examples do the same.

---

Do they do the same? Indeed?

Almost. The properties themselves do not differ between Array objects and Object objects, but arrays have some special behaviors.

For example, if I add a property with a higher index than the current accounts .length , .length will be automatically configured.

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

In the .length array, .length itself has some “magic” abilities, such as the ability to truncate the array by setting .length to a smaller value.

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

Therefore, when a jQuery object has numeric properties and a .length property, it does not behave the way its own array behaves.

Answer 2

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

In addition, the jQuery() constructor turns each instance into an object of type type by adding the length property, as well as indexed properties for each element in the set.

Answer 3

The returned object (see EcmaScript §4.2.1 about what this means) is an instance of the jQuery constructor internal function ( jQuery.fn.init - see this answer for details on the jQuery creation template), inheriting from the $.fn prototype .

And of course, this is an instance of Object like almost every object in JavaScript.

And since each jQuery element is a collection of [DOM] elements, it looks like an Array with its numeric index properties, although the length property is not self-updating, you can apply most of the array methods on it. This is not a real Array instance ( What is an array, and what is in JS? ).

Answer 4

The jquery object is a jquery library object, basically all jquery methods and properties are tied to this jquery object, which you can use as a regular javascript object. it also depends on which jquery object it is from.