DQNEO日記

今日も明日も上昇気流

jQueryオブジェクトの裏側をのぞいてみよう！

jQueryオブジェクトとは何か？

最初に答えを言います。
jQueryオブジェクとは、jQuery.fn.jQuery.initクラスのインスタンスである
下記の式を評価してみればわかります。 
var obj = $('div');
alert(obj instanceof jQuery.fn.init); //  => true
Google Chrome Developper Toolsで変数を見てみると、確かにそのように表示されます。



次に、jQueryのソースコードを見てみましょう。
冒頭にこのように書かれています。 
var jQuery = function( selector, context ) {
		return new jQuery.fn.init( selector, context, rootjQuery );
	},
(ここでrootjQueryとは$(document)のことです)
つまり、 
$('div')
という式は、 
new jQuery.fn.init('div', undefined, $(document));
と書くのと同じなのです。
よって、「jQueryオブジェクトはjQuery.fn.initクラスのインスタンス」なのです。

「$」と「jQueryオブジェクト」は別物か？

答え
「$」と「jQueryオブジェクト」は別物です。

「$」と「jQueryオブジェクト」を混同している人は多いと思います。
一番の違いは、「関数であるかどうか」です。

「$」は関数です。したがって()をつけて関数呼び出しをすることができます。 
$()
一方、jQueryオブジェクトは関数ではありません。
よって、()をつけて呼び出すとエラーになります。 
var obj = $('div');
obj(); // => TypeError: object is not a function

「$」がクラスで、「jQueryオブジェクト」はそのインスタンスか？

これは、難しい問題です。

まず「jQueryオブジェクト」というのは上でも書いたように, 
new jQuery.fn.init('div', undefined, $(document));
と言う式によって生み出されるオブジェクトです。
よって、jQueryオブジェクトを生んだクラスはjQuery.fn.initです。

一方、「$」はクラスかというと、Noです。
なぜかというと、 
new $('div')
とか 
new jQuery('div');
のようには普通は書かないからです。

ただ、jQueryとjQuery.fn.initはprototypeを共有していますので、 
jQuery.prototype === jQuery.fn.init.prototype
という等式が成り立ちます。
よって、下記の式は両方trueになります。 
$('div') instanceof jQuery.fn.init // => true

$('div') instanceof $              // => true
よって、「jQueryオブジェクト」は「$」のインスタンスであると言っても間違いではないかもしれません。

厳密に言うとJavaScriptにはクラスという概念がないので、
「$」と 「jQueryオブジェクト」 はプロトタイプチェーンを共有している
というのが正しいのだと思います。

まとめ

  • jQueryオブジェクとは、jQuery.fn.jQuery.initクラスのインスタンスである
  • 「$」と「jQueryオブジェクト」は別物である。
  • 「$」と「jQueryオブジェクト」はプロトタイプチェーンを共有している
参考
jQueryのソースコードを読むための参考サイト２０選 - DQNEO起業日記

カテゴリ: jQuery JavaScript