learn.jquery.com

ふつうのオブジェクト指向なプログラミング言語に馴染んだ人間にとって、次のコードは直感に反します。

// This doesn't work; text() returns a string, not the jQuery object:
$( this ).find( "li a" ).eq( 2 ).text().replace( "foo", "bar" );
// This works:
var thirdLink = $( this ).find( "li a" ).eq( 2 );
var linkText = thirdLink.text().replace( "foo", "bar" );
thirdLink.text( linkText );

1行目のコードが動かないことはまあわかります。問題は4, 5行目です。

thirdLink.text();
がgetterで、”li a” でセレクトされる要素の3番目に入っている文字列を返す。

thirdLink.text( linkText );
はsetterで、”li a”でセレクトされる要素の3番目、にlinkTextの内容をセットする。戻り値は謎。

ややこしい。なんで引数の数によって動作を変えるの！！？？すっごく不自然です。

var str = thirdLink.text;
str.replace( "foo", "bar" )
thirdLink.text = str;

のような書き方ならとても分かりやすいけれど、javascriptの仕様でそれはできません。javascriptではgetter, setterの中身を定義することができないので、textオブジェクトの内容を書き換えてしまうだけで終わりです。ならば

var str = thirdLink.text.get();
str.replace( "foo", "bar" );
thirdLink.text.set(str);

としてくれた方が曖昧さが無くてうれしいです。これなら実装も可能です。

しかしjQueryの思想は “Write Less, Do More.” です。開発陣はget() や set()という冗長な記法を許さなかったわけです。
なので、極限まで記述を切り詰めた方法――それが『getter→引数なし、setter→引数あり』という記法に繋がったとのだと理解しました。
jQueryを使うなら暗記は必須です。

Tweet