jQuery如何返回一个数组，仍然是一个jQuery对象？ [英] How can jQuery return an array and still have it be a jQuery object?
问题描述
（function（window，undefined）{
var document = window .document，
navigator = window.navigator，
location = window.location;
window.myclass =（function（）{
var __con = function {
return new __con.fn.init（）;
}
__con.fn = __con.prototype = {
'init'：function（）{
return this;
}，
'test'：function（）{
console.log（'test1'）;
return this;
}
}
__con.fn.init.prototype = __con.fn;
__con.test = function（）{
console.log（'test2 '）;
return this;
}
return __con;
}）（）;
}）（窗口）
我的控制台如下所示：
> 。MyClass的（）试验（）;
test1
< __con.fn .__ con.init
> myclass.test（）;
test2
< function（）{
return new __con.fn.init（）;
}
我的困惑是jQuery如何返回数组，仍然有一个jQuery对象？从控制台执行的jQuery可能看起来像：
> $（document.body）
[< body> ...< / body>]
> $（document.body的）的CSS（宽度）;
1263px
其实有一件我绝对注意到的是缺少< 。那么这里究竟发生了什么呢？我已经在Google上搜索了解jQuery如何工作，无济于事。也许我只是把术语弄错了，我不知道。看来我找不到任何详细的解释这个原因。
也许我的代码是不完整的，但是我到目前为止的基本结构是我一直在能够提取到目前为止。如果错误，不全面或低效，请更正我迄今为止所做的一切，并且请随时提供有关以下内容的良好阅读：
- Javascript最佳做法
- jQuery如何工作
- 高效的Javascript课程
- 关于Javascript对象结构
- 单身人士
- 原型
- 任何其他与此类型的结构相关的其他内容都称为
jQuery对象是数组类，所以看起来和行为很像数组，但实际上只是自定义对象大致相当于DOM节点的集合（除了添加的功能）。所有类似数组的功能 - 长度，切片（）等..实际上是手动添加到jQuery原型（其中 jQuery.fn 是一个别名），有时通过调用jQuery对象的数组函数作为上下文
slice = Array.prototype.slice，
...
slice：function（）{
return this.pushStack（slice.apply（this，arguments），
slice，slice.call（arguments）.join（，）） ;
}，
，有时从头开始写。看看注释代码（可能是非常有用的资源为你 - 它涵盖了v1.6.2，但我不认为任何东西从那以后剧烈变化，除了可能添加$ .callbacks）看到 this.length 被手动设置，例如
if（selector ===body&！context&&身体）{
this.context = document;
this [0] = document.body;
this.selector = selector;
this.length = 1;
返回这个;
}
jQuery.buildFragment（）方法也是构建包含更大的DOM节点集合的jQuery对象的基础。
所以总结一下，jQuery不使用数组，只是看起来就像这样做，因为很多本机数组功能已被复制为jQuery原型的属性。
I am attempting to reproduce jQuery's (1.7.1) object structure, to better understand how it it works. I have the following code:
(function (window, undefined) {
var document = window.document,
navigator = window.navigator,
location = window.location;
window.myclass = (function () {
var __con = function () {
return new __con.fn.init();
}
__con.fn = __con.prototype = {
'init' : function () {
return this;
},
'test' : function () {
console.log('test1');
return this;
}
}
__con.fn.init.prototype = __con.fn;
__con.test = function () {
console.log('test2');
return this;
}
return __con;
})();
})(window);
My console looks like this:
> myclass().test();
test1
< __con.fn.__con.init
> myclass.test();
test2
< function () {
return new __con.fn.init();
}
My confusion is how jQuery is able to return an array and still have it be a jQuery object? jQuery being executed from the console might look something like:
> $(document.body)
[<body>…</body>]
> $(document.body).css('width');
"1263px"
In fact, one thing that I definitely noticed is the lack of < for the return object. So what exactly is going on here? I've searched all over Google to explain how jQuery works, to no avail. Maybe I'm just getting the terminology wrong, I'm not sure. It seems I can't find any detailed source explaining this.
Perhaps my code is just incomplete, but the basic structure that I have so far is what I've been able to extract so far. Please correct what I have so far if it is wrong, incomplete, or inefficient, and by all means please feel free to provide good reading about:
- Javascript best practices
- How jQuery works
- Efficient Javascript classes
- Things all about Javascript object structures
- Singletons
- Prototypes
- Anything else related to whatever this type of structure is called
jQuery objects are array-like, so look and behave a lot like arrays, but are in fact just custom objects made to roughly equate to a collection of DOM nodes (except with added functionality). All the array-like functionality - length, slice() etc.. - is in fact added manually to the jQuery prototype (for which jQuery.fn is an alias), sometimes by calling an array function with the jQuery object as context
slice = Array.prototype.slice,
...
slice: function() {
return this.pushStack( slice.apply( this, arguments ),
"slice", slice.call(arguments).join(",") );
},
and sometimes by writing it from scratch. Look at the annotated code (probably a very useful resource for you - it covers v1.6.2 but I don't think anything too drastic has changed since then, except maybe the addition of $.callbacks) to see that this.length is set manually e.g.
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
the jQuery.buildFragment() method is also fundamental to how jQuery objects containing larger collections of DOM nodes are constructed.
So to sum up, jQuery doesn't use arrays, it just looks like it does because much native array functionality has been replicated as properties of the jQuery prototype.
这篇关于jQuery如何返回一个数组，仍然是一个jQuery对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
