javascript - 扩展 jQuery 时，this 和 $(this) 如何最终相同？

Question

我正在尝试使用一个扩展 jQuery 的插件，如下所示:

  $.extend({
    StatelessDeferred: function () {
        var doneList = $.Callbacks("memory"),
            promise = {
            done: doneList.add,

                // Get a promise for this deferred
                // If obj is provided, the promise aspect is added to the object
                promise: function (obj) {
                  var i,
                    keys = ['done', 'promise'];
                  if (obj === undefined) {
                    obj = promise;
                  } else {
                    for (i = 0; i < keys.length; i += 1) {
                      obj[keys[i]] = promise[keys[i]];
                    }
                  }
                  return obj;
              }
            },
            deferred = promise.promise({});

          deferred.resolveWith = doneList.fireWith;

      return deferred;
      }
    });

问题是(我什至不确定它是在这里引起的)，在回调加载之后，在 done 回调中， this 和 $( this) 是相同的，所以我最终得到的示例是: this === $(this) === $(document)。

我不太确定我是否理解正在扩展的内容。除了错误的分配之外，该插件可以正常工作。

问题:
上述扩展是否会导致 this === $(this) === $(document)？

编辑: 完整插件(120行):

"use strict";

(function (window, $) {
  $.extend({
      StatelessDeferred: function () {
        var doneList = $.Callbacks("memory"),
          promise = {
            done: doneList.add,

            // Get a promise for this deferred
            // If obj is provided, the promise aspect is added to the object
            promise: function (obj) {
              var i,
                keys = ['done', 'promise'];
              if (obj === undefined) {
                obj = promise;
              } else {
                for (i = 0; i < keys.length; i += 1) {
                  obj[keys[i]] = promise[keys[i]];
                }
              }
              return obj;
            }
          },
          deferred = promise.promise({});

        deferred.resolveWith = doneList.fireWith;

        // All done!
        return deferred;
      }
    });

  var routes = [],
    current_priority = 0,
    methods = {
      add: function (pattern, priority) {
        var i = 0,
          inserted = false,
          length = routes.length,
          dfr = $.StatelessDeferred(),
          context = $(this),
          escapepattern,
          matchingpattern;
        if (priority === undefined) {
          priority = 0;
        }
        if (pattern !== undefined) {
          // http://simonwillison.net/2006/Jan/20/escape/
          escapepattern = pattern.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
          matchingpattern = escapepattern
                          .replace(/<int:\w+>/g, "(\\d+)")
                          .replace(/<path:\w+>/g, "(.+)")
                          .replace(/<\w+>/g, "([^/]+)");
          while (!inserted) {
            if ((i === length) || (priority >= routes[i][2])) {
              routes.splice(i, 0, [new RegExp('^' + matchingpattern + '$'), dfr, priority, context]);
              inserted = true;
            } else {
              i += 1;
            }
          }
        }
        return dfr.promise();
      },
      go: function (path, min_priority) {
        var dfr = $.Deferred(),
          context = $(this),
          result;

        if (min_priority === undefined) {
          min_priority = 0;
        }
        setTimeout(function () {
          var i = 0,
            found = false,
            slice_index = -1,
            slice_priority = -1;
          for (i = 0; i < routes.length; i += 1) {
            if (slice_priority !== routes[i][2]) {
              slice_priority = routes[i][2];
              slice_index = i;
            }
            if (routes[i][2] < min_priority) {
              break;
            } else if (routes[i][0].test(path)) {
              result = routes[i][0].exec(path);
              dfr = routes[i][1];
              context = routes[i][3];
              current_priority = routes[i][2];
              found = true;
              break;
            }
          }
          if (i === routes.length) {
            slice_index = i;
          }
          if (slice_index > -1) {
            routes = routes.slice(slice_index);
          }
          if (found) {
            dfr.resolveWith(
              context,
              result.slice(1)
            );
          } else {
            dfr.rejectWith(context);
          }
        });
        return dfr.promise();
      },
    };


  $.routereset = function () {
    routes = [];
    current_priority = 0;
  };

  $.routepriority = function () {
    return current_priority;
  };

  $.fn.route = function (method) {
    var result;
    if (methods.hasOwnProperty(method)) {
      result = methods[method].apply(
        this,
        Array.prototype.slice.call(arguments, 1)
      );
    } else {
      $.error('Method ' + method +
          ' does not exist on jQuery.route');
    }
    return result;
  };

}(window, jQuery));

所以我可以使用它作为路由器并设置如下路由:

 $(".element").add("route", "/foo/bar/<path:params>", 2).done(function(params){
     // do something, for example
     console.log(this);
     console.log($(this));
     console.log("which will be the same = $('.element'));
 });

希望现在更清楚了。

感谢您的浏览。

Answer 1

来自文档:

If only one argument is supplied to $.extend(), this means the target argument was omitted. In this case, the jQuery object itself is assumed to be the target.

大多数情况下，jQuery 通过以下方式附加到您的文档:$(document).ready()

我认为发生的情况是 jQuery 对象被包装到文档中。然后将其与 $.extend(myObject) 合并。这将返回一个既是 jQuery 对象又是 myObject 的对象。