39300


タイトルの通りですが、jQueryの `data()` 関数で値を保存したものはどこに格納されているでしょうか？  


CC BY-SA 3.0
2017-11-04T13:29:21.073
39293
2017-11-04T16:47:47.230
19687
question
javascript jquery
jQueryのdata()関数で保存した値の場所


この回答はjQuery v3.2.1に基づくものですので、ほかのバージョンでは異なるかもしれません。  
結論から述べれば **DOMオブジェクトそのもの** に保存しています。

[ソース](https://code.jquery.com/jquery-3.2.1.js)でいうと4271行目あたりが[.data()](https://api.jquery.com/data/)
APIを実装していますが、

[code]

    jQuery.fn.extend( {
        data: function( key, value ) {
        // ...
            elem = this[ 0 ], // elemはDOMオブジェクト
        // ...
                data = dataUser.get( elem, key );
                if ( data !== undefined ) {
                    return data;
                }
                // ...
    
[/code]

ここで、変数`dataUser`はすぐ上に定義されている`Data`型のオブジェクトですが、これは定義が4029行目にあります。

[code]

    Data.prototype = {
        // ...
        get: function( owner, key ) {
            return
            // ...
                owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];
    
[/code]

この`this.expando`という名前でDOMオブジェクトのプロパティに値を紐付けていることがわかります。具体的にこの`this.expando`というのは`"jQuery32105369902605330256"`みたいな文字列で、デバッガ等で値をセットしたDOMオブジェクトを見てみれば、こんなような名前のプロパティにデータがセットされているはずです。あるいは、jQueryのソースのこのあたりにブレークポイントをつけてから`.data()`を使ったコードを実行すると、より理解が深まるかもしれません。

* * *

蛇足ですが、DOMオブジェクトそのものを使っていることがわかるといろいろ注意が必要ですね。  
たとえば、`innerHTML`プロパティでDOMを再構成すると、このAPIで設定した値が飛ぶことが予想されます。また、DOMはjQueryからしか触れないわけではなく、むしろこれらの値が好き勝手に書き換えられてしまうこともまったく正当にあり得ます。そのデータの性質や重要性によっては使うのを控えるべき場合もありそうです。


CC BY-SA 3.0
2017-11-04T16:47:47.230
39300
2017-11-04T16:47:47.230
39293
answer