jQuery コンストラクターの簡単な説明

前回の記事では、jQuery の一般的なフレームワークについて説明しましたが、すべてのコードは自己呼び出しの匿名関数で記述され、ウィンドウ オブジェクトが渡されることがわかりました。ソース コードは次のとおりです。

(function( window, undefined ) {...})( window );

alert(jquery) を通じてそれがオブジェクトであることがわかりますが、このオブジェクトはどのように構築されるのでしょうか?通常のメソッドを直接呼び出すのと同じように、$(document) のような書き方で要素を取得します。 jQuery は通常の関数ですか?それがコンストラクターである場合、それが new $(document) の一般的な形式ではないのはなぜですか?

実際、jQuery はオブジェクト指向の js ライブラリであり、jQuery メソッドが呼び出されるたびに jQeury オブジェクトがインスタンス化されますが、jQuery の記述方法は非常に巧妙です。

まず、js のオブジェクト指向について話しましょう。js はオブジェクト指向言語ではありませんが、オブジェクト指向の記述方法が多数あります。Turing のオブジェクト指向プログラミングの部分を参照することをお勧めします。 「JavaScript 高度なプログラミング」。多くのメソッドの中で、最も一般的に使用される記述メソッドは、コンストラクション プラス プロトタイプ メソッドです。例を次に示します。

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom说你好

実際、jQuery でもこのメソッドが使用されていますが、よりスマートな記述方法が使用されています。jQuery のコンストラクターの違いを見てみましょう。

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

ソース コードから、jQuery の実際の関数は init メソッドであることがわかります。jQuery を呼び出すと、new jQuery() を直接返すのではなく、new init() の結果が返されます。

jQuery.fn とは何ですか?

このコードは後で説明します。

jQuery.fn = jQuery.prototype = {...

これは簡単に理解できますが、実際、jQuery.fn はプロトタイプ オブジェクトであり、jQuery プロトタイプに実際のコンストラクターである init メソッドがあることを意味します。この方法で記述する利点は、$().init() などの操作を記述する必要がなく、直接初期化されることです。ただし、別の問題があります。init はコンストラクターであり、メソッド インスタンスを記述します。 jQuery を呼び出すことはできません。当然、init のインスタンス化では init メソッドを呼び出すことしかできません。

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

前に jQuery.fn=jQuery.protype について触れましたが、これは jQuery のプロトタイプ オブジェクトが init のプロトタイプに代入されることを意味し、この構築メソッド S を通じて jQuery のプロトタイプ メソッドが自然に init で使用できるようになります。このメソッドは非常に単純で、new jQuery() の操作や手動の初期化を必要とせず、通常の関数を呼び出すのと同じくらい簡単です。