ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery でのインスタンス作成とプロトタイプ継承の秘密

jQuery_jquery でのインスタンス作成とプロトタイプ継承の秘密

WBOY
WBOYオリジナル
2016-05-16 17:57:581009ブラウズ

new Object()、new Date() などです。 (オブジェクトには{}があり、配列には[]などのショートカットがあります。主にnewメソッドについて説明します。)

jQueryを使用する場合、newを使用したことはありません。毛織物のインスタンスを生成するのに他のメソッドが使用されますか?プロトタイプ属性を使用していませんか?実際にどれも使ったことがあるが、内部処理が非常に巧妙で使いやすさが向上している。彼のソースコードを見てみましょう。

コードをコピー コードは次のとおりです。

function jQuery(selector, context){
return new jQuery.fn.init( selector, context );
}

ここで、jQuery にはコンストラクターがあり、インスタンスの作成に new が使用されていることがわかります。では、jQuery.fn とは何でしょうか?後ろにそのようなプロセスがあります:
コードをコピーします コードは次のとおりです:

jQuery.fn = jQuery .prototype={
init: function (){}
}

したがって、jQuery のコンストラクターは関数 jQuery ではなく、そのプロトタイプの init メソッドであることがわかります。 。この場合、$() が呼び出されるたびに、jQuery プロトタイプの init を使用してインスタンスが作成され、新たな問題が発生します。 init を使用してインスタンスを作成すると、このオブジェクトは init のプロトタイプのメソッドを継承しますが、jQuery プロトタイプのメソッドは継承しません。では、プロトタイプの継承はどのように実装されるのでしょうか。

jQuery.fn.init.prototype = jQuery.fn;
ここでは、jQuery.fn を jQuery.fn.init.prototype に割り当てるプロセスがあります。このステップは非常に重要です。これらが何であるかを見てみましょう。

jQuery.fn は jQuery.prototype

jQuery.fn.init.prototype は jQuery.prototype.init.prototype

この処理は
jQuery.prototype = jQuery.prototype.init.prototype

その後、$() を呼び出すたびに、jQuery は new 演算子を使用してプロトタイプ上で init を呼び出し、init によって作成されたこのインスタンスを継承します。 jQuery プロトタイプのすべてのメソッド、およびこのインスタンスの __proto__ 内部プロパティは jQuery のプロトタイプ プロパティを指します。

さらに、次の処理があることに気付きました:

jQuery.fn = jQuery.prototype

これは、jQuery.prototype に対する頻繁な操作を避けるためであり、そのため jQuery.fn はキャッシュされます。 jQuery.プロトタイプ。

これらの処理は非常に賢明で、ユーザーが new を使用してインスタンスを生成する必要がなく、プロトタイプも非常に美しく処理され、リソースの消費が削減されます。 。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。