jQuery.extend和jQuery.fn.extend

Question

我正在用extend做一些测试，在我做了一些观察之后，我有点困惑。第一个观察结果：

console.log($.extend === $.fn.extend); // trure
// and since $ === jQuery then ...
console.log(jQuery.extend === jQuery.fn.extend); // true

到目前为止一切都很好，不是吗？考虑到上面的结果，我认为这样做：

// SNIPPET 1
$.extend({
   log: function(m) {
      console.log(m);
   }
});

还有这个：

// SNIPPET 2
$.fn.extend({
   log: function(m) {
      console.log(m);
   }
});

都是一回事。但事实上，事情的情况却截然不同。实际上，如果您运行SNIPPET 1，然后执行以下操作：

$("body").log("whatever");

您会得到一个错误(未定义日志)。但是你可以这样做：

$.log("whatever");

如果你运行SNIPPET 2，你会得到相反的结果，也就是说：

$("body").log("whatever"); // this will work
$.log("whatever"); // this won't

什么鬼东西？我很欣赏.extend扩展了它被执行的对象($和$.prototype)，但我不明白它是如何做到的！特别是考虑到这样的事实：

$.extend === $.fn.extend // true

函数是一样的！它如何产生两种不同的结果？

Answer 1

在函数内部，this会有所不同。在第一种情况下，它将是$，在第二个$.fn中。

看一看source code：

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // ...

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
         --i;
    }

    // ...
};

Learn more about this。