jQuery.extend and jQuery.fn.extend

jQuery.extend and jQuery.fn.extend

本文关键字：jQuery extend fn and      更新时间：2023-09-26

我正在与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");

如果你运行代码片段2，你会得到相反的结果，也就是说:

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

搞什么鬼?我欣赏.extend扩展其执行对象的事实($ vs $.prototype)，但我不明白的是它是如何做到的!特别是考虑到以下事实:

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

函数是一样的!!怎么会产生两种不同的结果呢?

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

查看源代码:

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;
    }
    // ...
};

了解this

相关文章：