2

我正在做一些测试,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我很欣赏扩展执行它的对象($vs )的事实,$.prototype但我没有得到的是它是如何做到的!特别是考虑到以下事实:

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

功能是一样的!!它如何产生两种不同的结果?

4

1 回答 1

1

里面的功能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.

于 2013-01-12T15:44:35.667 回答