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

jQueryオブジェクトとは何か、説明できますか?

はじめに。
$('div')
この式が返す値は、「jQueryオブジェクト」と呼ばれています。
みなさん毎日のように使っていますよね。

では、これの正体が一体何なのか、ちゃんと説明できるでしょうか?
「グローバル変数 $」 と「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のソースコードを読むための参考サイト20選 - DQNEO起業日記

カテゴリ:

人気記事