35783


「デザイナーにも分かりやすいjQuery入門講座」サイト（<http://www.jquerystudy.info/reference/css/cssHooks.html>）などにおける、

> jQuery

と

> jQo

の違いはなんですか？  
例えば以下の２つのようなメソッドの書式に書かれているものです。

（A）

[code]

    jQuery.cssHooks["新規cssプロパティ名"] 
    
[/code]

（B）

[code]

    jQo.addClass( クラス名 )
    
[/code]

例えば、  
（A）

[code]

    $.getJSON('data.json',function(numbers){
    
    　　　//処理
    });
    
[/code]

と書く場合と、  
（B）

[code]

    $('#sample').hide()
    
[/code]

と書く場合の違いはなんですか？

（＊Swiftにおける  
クラスメソッドとインスタンスメソッドの違いのようなものでしょうか？）


CC BY-SA 3.0
2017-06-21T15:27:40.330
35782
2017-06-21T17:18:26.010
2017-06-21T15:34:43.713
12297
12297
question
jquery
jQueryとjQueryオブジェクトの違いは？


> （＊Swiftにおける クラスメソッドとインスタンスメソッドの違いのようなものでしょうか？）

概ねそのようなイメージです。

`$()`というのが`hide()`のようなメソッドを持ったオブジェクトを作るコンストラクタへつながっていく関数になっています。  
戻り値としてそのオブジェクトを返すので`$('#sample').hide()`のように書くことができるわけです。

つまり上の例ですと`jQo`は`$('hoge')`などとして作られたjQueryオブジェクトです。

また`$`や`jQuery`についているものは結局のところjQueryオブジェクトのクラスメソッドのようなものですが、プロトタイプというもので表現されていてSwiftなどクラスの言語と比べてややこしいかもしれません。  
上の`hide()`のようなメソッドを持ったオブジェクトはどれ(`jQuery`、`jQuery.fn`、`jQuery.fn.init`)のインスタンスと呼べばいいのか?ってなると思います。  
このあたりの話はJavaScript、prototypeなどで調べていただくと詳しい説明が出てくるかと思います。


CC BY-SA 3.0
2017-06-21T16:48:19.267
35783
2017-06-21T16:54:32.103
2017-06-21T16:54:32.103
14222
14222
35782
answer


jsのクラス的な部分はあまり理解できてなくても使えてしまうので、今回はそのあたりも含めて基礎的な内容を説明してみます。内容は最新のリリース（v.3.2.1）に基づきますので、もしかしたら過去/未来のバージョンではちがうかもしれません。

## jQuery

オブジェクト`jQuery`は _jQuery.js_ からエクスポートされたjQueryライブラリ本体で、具体的にはFunctionオブジェクトです。

[code]

    // $はjQueryのaliasです
    console.assert(window.$ === window.jQuery);
    
    // jQueryは関数オブジェクトです
    console.assert(jQuery instanceof Function);
    
[/code]

一般にjsにおいてクラスベース言語のような「クラス」を実装するため、Functionオブジェクトの関数それ自身をコンストラクタ関数に、またそのprototypeオブジェクトにプロパティやメソッドを実装する方法があります。[jQueryのprototypeは関数オブジェクトjQueryのプロパティfnと同一のオブジェクトです](https://github.com/jquery/jquery/blob/3.2.1/dist/jquery.js#L114)ので、よくあるjQueryの拡張プラグインではこのjQuery.fnオブジェクトに独自の関数を実装したりしますね。

[code]

    console.assert(jQuery.prototype === jQuery.fn);
    
[/code]

## jQueryオブジェクト

一般にjsにおける「なんとかオブジェクト」というのは、クラスベースでいう「なんとか（クラス名）のインスタンス」に相当します。具体的には、そのオブジェクトがあるprototypeオブジェクトをプロトタイプにもつことを指します。「jQueryオブジェクト」というのはすなわちjQueryのprototypeをプロトタイプにもつオブジェクトです。かんたんに言えば、クラスjQueryのインスタンスのようなものです。

[code]

    // 適当なjQueryオブジェクト
    const $jQo = $(window);
    
    // jQueryオブジェクトはjQueryクラスのインスタンスのようなものです
    console.assert($jQo instanceof jQuery);
    
    // jQueryのprototypeをプロトタイプ（__proto__）に持ちます
    console.assert(Object.getPrototypeOf($jQo) === jQuery.prototype);
    
    // インスタンスのメソッドは、jQuery.prototypeに由来します
    console.assert($jQo.addClass === jQuery.prototype.addClass);
    
[/code]

このように、「jQueryオブジェクト」のインスタンスメソッド/プロパティは、jQuery.prototypeから継承されたものです。クラスベース言語との比較でいえば、静的でないメソッド/プロパティにあたります。

## jQueryの静的メソッド/プロパティ

他方、クラスベース言語でいう _static_
なメソッドに該当するものも、jQueryには定義されています。具体的には関数オブジェクトjQueryのプロパティとして定義されているものがこれにあたります。たとえば、[jQuery.getJSON](http://api.jquery.com/jquery.getjson/)です。また、プロパティについても同様に静的なものがあります。たとえば、[jQuery.cssHooks](https://api.jquery.com/jQuery.cssHooks/)です。これらについてはクラスベース言語でいうstaticなものと同様に考えてまったく問題ありません。

[code]

    // 静的なメソッドとして、関数オブジェクトjQueryに直接定義されています
    //（prototypeに実装されているわけではない）
    console.assert('getJSON' in jQuery);
    console.assert(jQuery.getJSON instanceof Function);
    
    // 静的なプロパティ
    console.assert('cssHooks' in jQuery);
    
[/code]

基本的にこちらはutilityやjQueryの共通な設定に用いられ、やはりstaticな実装をされている意味が理解されます。

以上、不明な点があればコメントでお知らせください。


CC BY-SA 3.0
2017-06-21T16:55:48.677
35785
2017-06-21T17:18:26.010
2017-06-21T17:18:26.010
35782
answer