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

機能はそのまま!! どうすれば2つの異なる結果を生み出すことができますか?

4

1 に答える 1

1

関数の内部はthis異なります。最初のケースでは$、2 番目のケースでは になります$.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 に答える