Javascript jQuery对象如何能够像数组一样工作，即使它不是'；一个？

我一直认为jQuery

$

函数返回一个附加了jQuery方法的数组。 我想提供一些例子：

假设我们有一个数组

var arr = [1,2,3];

然后，我们可以添加自己的属性：

arr.someProp = 10;
arr.someMethod = function() { ... }

arr instanceof Array;   //true

之后，

arr

仍然是一个数组，尽管具有自定义属性：

arr.someProp = 10;
arr.someMethod = function() { ... }

arr instanceof Array;   //true

所以，直到最近的实验之前，我一直认为jQuery对象类似于

arr

（但更复杂）。 我只是运行以下代码：

$('div') instanceof Array;  //false (!!!)

但它的行为就像一个数组。它有

push

方法，

length

属性，即使在这种情况下也能正常工作：

var $jq = $('div');
$jq.length; //3
$jq.push(123);  //wrong code, I know, this is just for test
$jq.length      //4

另外，如果执行

console.log（$（'div'））

，它将输出如下内容：

[<div></div>, <div></div>, <div></div>]

我的问题是：这个东西是如何被创造出来的

如果你们能给我解释一下，并提供一些代码示例，我将非常感谢你们

所以，直到最近的实验之前，我一直认为jQuery对象类似于arr（但更复杂）。我只是运行以下代码：

$('div') instanceof Array;  //false (!!!)

但它的行为就像一个数组。它有推送方法，长度属性，可以正确工作

任何可变对象都可以像数组一样“表现”，因为内置数组方法将对其起作用，只要它具有适当的

.length

属性和预期的数字索引

以这个物体为例：

var obj = {
    "3": "buz",
    "0": "foo",
    "2": "baz",
    "1": "bar",
    length: 4
}

它不是一个数组，但我们可以将

Array.prototype.push

方法放在对象上，它就可以正常工作了

obj.push = Array.prototype.push;

obj.push("hi");

---

现在，

obj

将有一个

.length

为

5

，并且将包含

“hi”

字符串。

这是我用来提交表单的一个示例，它可能会帮助您解决问题

JS代码

 // process the form
        $('.updateClient').click(function(event) {

            // get the form data
            // there are many ways to get this data using jQuery (you can use the class or id also)
            var formData = {    
                'clientbrandid' :$("input[id=editClientBrand]").val()
            };

            // process the form
            var ajaxResponse = $.ajax({
                type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                url: 'someURL', // the url where we want to POST
                data: JSON.stringify( formData ),
                contentType :'application/json',
                error: function(data,status,error){
                            console.log(data+': '+status+': '+error);
                                            }
                    }).done(function(apiResponse) {
                            $('.someClass').append('Hello There!'); //This is what creates the <div></div> on the html side and when the function is done it appends the content between those two <div></div>
                    });

    });

//处理表单
$（'.updateClient'）。单击（函数（事件）{
//获取表单数据
//使用jQuery获取此数据的方法有很多（您也可以使用类或id）
var formData={
'clientbrandid'：$（“输入[id=editClientBrand]”）。val（）
};
//处理表格
var ajaxResponse=$.ajax({
type:'POST'，//定义要使用的HTTP谓词的类型（表单的POST）
url:'someURL'，//我们要发布的url
数据：JSON.stringify（formData），
contentType:'application/json'，
错误：功能（数据、状态、错误）{
日志（数据+'：'+状态+'：'+错误）；
}
}).完成（功能（apiResponse）{
$（'.someClass'）.append（'Hello There！'）；//这是在html端创建的函数，当函数完成时，它会在这两者之间追加内容
});
});

HTML端

..............Some form code on top of this.

    <div class='someClass'></div> <--- this is where the output will show after the code is done

………..上面有一些表单代码。
jQuery对象是一个类似数组的对象。它的某些成员与相应的数组成员具有相同的用途

Javascript中还有其他类似数组的对象，例如从返回的对象是
HTMLCollection
或
NodeList
（取决于浏览器），这些对象包含数组中的一些成员，但不是全部成员

您可以创建一个常规对象并添加您喜欢的任何成员，如果有足够多的成员像相应的数组成员一样工作，以便您可以以某种方式将其用作数组，则可以将其称为类似数组的对象

例如：

var myArrayLookAlike = {
  length: 0,
  data: [],
  push: function(value){
    this.data.push(value);
    this.length = this.data.length;
  },
  pop: function(){
    var value = this.data.pop(value);
    this.length = this.data.length;
    return value;
  }
};

jQuery库具有可用于从类数组对象创建真实数组对象的属性，当类数组对象缺少方法需要使用的特定成员时，可以使用该属性

我的问题是：这个东西是如何被创造出来的

作为更广泛的介绍，请看这是否有助于理解几行中的迷你jQuery。我已经使用jQuery很长一段时间了，它基本上都可以归结为一个原型，带有
返回这个
进行链接的方法，以及一些数组助手来处理元素集合
map
是您的“核心方法”，其他每一种操作元素的方法都以某种方式使用
map
。然后你需要
排列
，
展平
和
唯一
，然后你就完成了设置。jQuery建立在这些基本概念的基础上，但显然更为复杂，但这将让您全面了解jQuery这样的库的内部工作原理，使用现代JavaScript（例如签出）：

它是一个函数，一个对象，一个魔法，但不是一个数组！您可以随时浏览jQuery源代码。这有点曲折和混乱，但很有教育意义。仅供参考，它明确定义了大多数处理类似数组对象的数组方法：“推送
功能是有意通用的；它不要求它的
此
值必须是数组对象。因此，它可以被转移到其他类型的对象中用作方法。推送功能能否成功应用于主机对象取决于实现。“感谢您的解释，但我仍然无法理解jQuery开发人员如何让浏览器将此对象输出为
[，]
？@Zub：控制台开发人员有一个技巧来确定对象是数组。我相信他们只是测试
拼接（）
属性，该属性指向一个函数和一个
.length
属性，如果它们存在，则使用数组语法将其打印出来。如果您以我的示例执行
obj.splice=Array.prototype.splice
，您应该会得到相同的打印结果。哇！您对
splice
和
length
的看法似乎是正确的。我刚刚尝试过而且它真的是用方括号输出的！@Zub:是的，我要说清楚，这并不能使它成为一个实际的数组。我想你已经知道了这一点，因为你的
instanceof
测试。这只是对控制台开发的一个快速攻击