返回 jQuery 对象数组时，jQuery 如何调用对象的方法？答案

【问题标题】：How does jQuery invoke methods of objects when an Array of jQuery objects is returned?返回 jQuery 对象数组时，jQuery 如何调用对象的方法？
【发布时间】：2013-03-17 05:44:33
【问题描述】：

将字符串“选择器”传递给 jQuery 函数后：

$('#onenode')

返回一个 jQuery 对象的数组。

这些对象的方法之一是“html”，这就是为什么：

$('#onenode').html('hello!');

工作。

不过……

这个：

$('.somenodes')

返回一个jQuery对象数组，这个数组中的每个对象都有方法“html”。

那么如何：

$('.somenodes').html('hello');

工作？ “html”方法必须是返回的数组对象的方法。

因此，我假设 Array 对象的“html”方法类似于：

html: function(value) {
   for(var i=0; i<this.length; i+=1) {
      this[i].html(value);
   }
}

这些都是假设，我很猜测。

我正在尝试创建自己的使用“选择器”的小型库，但我正在努力解决这部分问题。我知道这可能是不正确的——有人可以解释一下 jQuery 是如何做到的吗？

【问题讨论】：

两个选择器都返回一个 jQuery 对象。
与其猜测为什么不直接开源和检查呢？
可以看jQuery的开发源码。评论非常好，易于阅读：code.jquery.com/jquery-1.9.1.js
或使用这个 jQuery 源代码查看器！ james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.html
其实就在github上看看吧：github.com/jquery/jquery/blob/master/src/manipulation.js#L196

标签： javascript jquery

【解决方案1】：

jQuery 基本上是一个大的prototype，其中包含return this 的一堆方法，其中this 是您正在使用的jQuery 实例。

我正在尝试创建自己的使用“选择器”的小型库

这是一个在现代浏览器中工作的类 jQuery 模式的简化示例：

(function(win, doc) {

  var __slice = [].slice;

  function jQuery(selector) {
    this.el = this._init(selector);
    this.length = this.el.length;
  }

  function $(selector) {
    return new jQuery(selector);
  }

  jQuery.prototype = {

    _init: function(selector) {
      return __slice.call(doc.querySelectorAll(selector));
    },

    each: function(fn) {
      return this.el.some(fn), this;
    },

    map: function(fn) {
      return this.el.map(fn), this;
    }

  };

  win.$ = $;

}(window, document));

您可以使用它来构建类似 jQuery 的库。它的工作方式与 jQuery 完全一样：

$('p').each(function() {
  console.log(this);
});

只需一个柯里化函数each 和map 即可开始使用。这些是 jQuery 几乎在任何地方都使用的方法来操作 DOM 元素。 this.el 是元素数组，this 是 jQuery 实例。只是不要忘记在每个将被链接的方法中都需要return this。

【讨论】：

这很棒。这对我来说很有意义，谢谢你写它来帮助我理解

【解决方案2】：

$('.somenodes') 不返回数组，它只是一个 jquery 对象，它具有原生数组的一些功能..

前段时间我也有类似的疑问，请在我的问题上查看此答案..https://stackoverflow.com/a/11158649/1114536

jQuery 对象目前支持 3 种数组方法：

var methods = 'pop push reverse shift sort splice unshift concat join slice toString indexOf lastIndexOf filter forEach every map some reduce reduceRight'.split(' ')
var implemented = $.grep(methods, function(m) {
    return $.prototype[m] == Array.prototype[m];
});
console.log(implemented); // => ["push", "sort", "splice"]

它们也有切片，但它与数组的切片不同：

$.prototype.slice === Array.prototype.slice // => false

【讨论】：