Hatena::Grouparaistudy

czk-htnの日記

2008-02-20

[] まるごとJavaScriptprototype.jsを学習中 06:42

collect, invoke

配列操作メソッドであるcollectとinvokeの違いがわからない。両方とも

  • 配列の全ての要素に対して同一処理を行う
  • 結果が配列で返る

直訳すれば

collect
集める、まとめる
invoke
発動する、引き起こす

ということらしいが。

サンプルで示されている例では明確な違いが掴めない。

//collect
var array = [1,2];
var iterator = function(e) { return e + 1 };

var newArray = array.collect(iterator);
alert(newArray.join(',')); // [2,3]
//invoke
var array = ['JavaScript','Prototype.js'];

var newArray = array.invoke('toUpperCase');
alert(newArray.join(',')); // ['JAVASCRIPT','PROTOTYPE.JS']

と、ここまで書いて改めて27ページの解説を読んだら理解できた。

  • collectは「要素を引数として」関数を実行し
  • invokeは「要素そのもののメソッド」を呼び出している

点に違いがあるわけか。toUpperCaseはStringのメソッドを呼び出しているけど、解説にあるようにString引数として関数を実行するように書き直せば

//collect
var array = ['JavaScript','Prototype.js'];
var iterator = function(e) { return e.toUpperCase() };

var newArray = array.collect(iterator);
alert(newArray.join(',')); // ['JAVASCRIPT','PROTOTYPE.JS']

なるほど。これを理解してから30ページのリスト25を読むと便利さがわかる。

<div>hoge</div>
<div>hoge</div>
<div>hoge</div>
<script type="text/javascript">
$$('div').invoke('observe', 'click',
                 function(){ alert('要素がクリックされました') });
</script>

protptype.js

  • 配列操作・走査 (Array)
  • 要素取得 ($,$$)
  • 要素操作 (Elemect)

を楽にしてくれるライブラリと認識した。

トラックバック - http://araistudy.g.hatena.ne.jp/czk-htn/20080220