jQuery.fn の詳細: プロトタイプのエイリアス

jQuery ライブラリ内で、謎めいた jQuery.fn に遭遇することがあります。この謎の fn は何を表し、どのような目的を果たしますか?

プロトタイプの役割

JavaScript の領域では、プロトタイプ プロパティは重要なコンポーネントです。コンストラクター関数。特定のコンストラクターを使用してインスタンスを作成すると、そのインスタンスはコンストラクターのプロトタイプからプロパティとメソッドを継承します。

コンストラクターとしての jQuery

同様に、jQuery 識別子 (または$) はコンストラクター関数として機能します。作成されたすべての jQuery オブジェクトは、jQuery コンストラクターのプロトタイプを継承します。このプロトタイプは fn プロパティを通じてアクセスでき、基本的に jQuery.fn を jQuery.prototype のエイリアスにします。

例による詳細な説明

この概念を説明するには、次のようにします。単純なコンストラクター関数を構築しましょう:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test();

この例では、インスタンス テストは、Test コンストラクターのプロトタイプからプロパティ b を継承します。

jQuery Architecture and Extensions

jQuery の内部動作は、次のコンストラクター プロトタイプ構造に似ています。

(function() {
  var foo = function() { // core constructor
    // ...
  };

  foo.fn = foo.prototype = {
    init: function () { /*...*/ }
    // ...
  };

  window.foo = foo;
})();

jQuery 内では、fn プロパティを通じて拡張機能をプロトタイプに追加でき、カスタム機能で jQuery オブジェクトを拡張できます。