jQuery 如何返回一个数组并让它仍然是一个 jQuery 对象？答案

【问题标题】：How can jQuery return an array and still have it be a jQuery object?jQuery 如何返回一个数组并让它仍然是一个 jQuery 对象？
【发布时间】：2012-02-22 08:40:21
【问题描述】：

我正在尝试重现 jQuery (1.7.1) 的对象结构，以便更好地理解它是如何工作的。我有以下代码：

(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);

我的控制台如下所示：

> myclass().test();
  test1
< __con.fn.__con.init
> myclass.test();
  test2
< function () {

            return new __con.fn.init();

        }

我的困惑是 jQuery 如何能够返回一个数组并且仍然让它成为一个 jQuery 对象？从控制台执行的 jQuery 可能类似于：

> $(document.body)
  [<body>…</body>]
> $(document.body).css('width');
  "1263px"

事实上，我绝对注意到的一件事是返回对象缺少<。那么这里到底发生了什么？我在 Google 上搜索了所有解释 jQuery 的工作原理，但无济于事。也许我只是弄错了术语，我不确定。我似乎找不到任何详细的资料来解释这一点。

也许我的代码只是不完整，但到目前为止我所拥有的基本结构是我迄今为止能够提取的。如果有错误、不完整或效率低下，请更正我到目前为止的内容，并且请随时提供关于以下内容的良好阅读：

Javascript 最佳实践
jQuery 的工作原理
高效的 Javascript 类
关于 Javascript 对象结构的一切
- 单身人士
- 原型
- 与这种类型的结构相关的任何其他内容

【问题讨论】：

我不确定我是否完全理解你的问题，但是看看我不久前发布的这个答案，看看它是否有帮助：stackoverflow.com/questions/7651404/…
我发现这些谈话非常有帮助：yuiblog.com/crockford
不太清楚社区 wiki 的工作方式。我知道我将不再能够从中获得声誉，据我所知，你需要的只是结束问题。如果这是正确的，请投票关闭它。由于我无法使用 Google 成功回答我自己的问题，我希望这里是学习所有关于 jquery-internals 的地方。是还是不成立社区维基？
也许我还没有完全理解社区 wiki 的概念。到目前为止，我可能误解了我所读到的内容。
社区 wiki 是一种工具，可让您让拥有 100 名以上声誉的用户编辑帖子，门槛低得多。它旨在使更多的受众可以访问帖子。 CW 的副作用之一是没有声誉收益或损失，但这不应该是使用它的主要动机。见Community wiki is dead, long live community wiki!

标签： javascript jquery class design-patterns

【解决方案1】：

jQuery 对象类似于数组，因此外观和行为很像数组，但实际上只是自定义对象，大致等同于 DOM 节点的集合（添加功能除外）。所有类似数组的功能——length、slice() 等等——实际上都是手动添加到 jQuery 原型中的（jQuery.fn 是它的别名），有时是通过以 jQuery 对象作为上下文调用数组函数

  slice = Array.prototype.slice,
  ...
  slice: function() {
    return this.pushStack( slice.apply( this, arguments ),
      "slice", slice.call(arguments).join(",") );
  },

有时是从头开始编写。查看annotated code（可能对您来说是一个非常有用的资源——它涵盖了v1.6.2，但我认为从那以后没有任何太大的变化，除了可能添加了$.callbacks）看到this.length是手动设置，例如

if ( selector === "body" && !context && document.body ) {
  this.context = document;
  this[0] = document.body;
  this.selector = selector;
  this.length = 1;
  return this;
}

jQuery.buildFragment() 方法也是构建包含更大 DOM 节点集合的 jQuery 对象的基础。

总而言之，jQuery 不使用数组，只是看起来确实如此，因为许多原生数组功能已被复制为 jQuery 原型的属性。

【讨论】：

真的是手动添加的吗？我见过的其他框架（ender）只是创建一个数组并为其添加属性。