おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

jQuery Code Readingに参加

javascriptはまだいまいちわかっていないのですが、とりあえず参加してみました。
3/15(sat) - Roppongi.JS#1 jQuery Code Reading(1)のお知らせ - devlog.holy-grail.jp

最初の方はなんとかついていけたつもりなのですが、pushStackメソッドなどの各種メソッドのあたりからしんどくなってきて、
途中からサイ本を読んでました。基本的なことを全然覚えてないので、まあ当たり前の結果なのですが・・・

でも、Code Readingに参加したおかげで、自分一人でやったら理解するのに3日はかかりそうな部分がわかった!

わかったところまとめ

jquery-1.2.3 17〜27行め
var jQuery = window.jQuery = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	return new jQuery.prototype.init( selector, context );
};

// Map over the $ in case of overwrite
if ( window.$ )
	var _$ = window.$;
	
// Map the jQuery namespace to the '$' one
window.$ = jQuery;
  • $(hoge)とするとnew jQuery.prototype.init(hoge)が返ってくるように設定している。
  • $が既に設定されていたら、それを_$に退避させている。(prototype.jsなどとの共存のため)
jquery-1.2.3 36行目〜
jQuery.fn = jQuery.prototype = {
	init: function( selector, context ) { 
        // 省略
        }
        // 省略
        size: function() {
        // 省略
        }
        // 省略
        get: function( num ) {
        // 省略
        }
        // 省略・・・・
}

こんな感じで、jQuery.prototypeにいろんなメソッドがあるオブジェクトを定義している。
でも、ここまでだと、$はjQuery.prototype.initに定義されているメソッドしか使うことができない。(sizeやgetが使えない)

jquery-1.2.3 512〜513行目
// Give the init function the jQuery prototype for later instantiation
jQuery.prototype.init.prototype = jQuery.prototype;

ここで、jQuery.prototype.init.prototypeにjQuery.prototypeを代入している。これにより、initと同レベル(っていう書き方でいいのかな)のsizeやgetなどが
$.sizeや$.getで使えるようになる!

感想

javascriptって、親が子を継承するみたいなこともできるのね。面白い。これが今日一番勉強になったところでした。
次回のコードリーディングっていつなんだろう?次までには基礎を固めていろいろ発言したいと思います。
あとjQueryも一回きちんと使ってみないと。

JavaScript 第5版

JavaScript 第5版