TOPシステム開発> 関数の拡張
まるごとJavaScript&Ajax!
JavaScriptを洗練させるPrototype.js

第4回:関数の拡張と配列操作メソッド一覧
著者:ガイアックス  天野 仁史   2007/3/5
1   2  次のページ
関数の拡張

   前回解説したオブジェクト指向はこのくらいにして、次は少し不思議な、関数オブジェクトを拡張する関数を紹介します。
bindメソッド

   bindメソッドは関数オブジェクトのメソッドです。このメソッドを使うとどのようなことができるのでしょうか。

   JavaScriptでは非同期処理の結果をコールバックするために、関数オブジェクトを使うことが多々あります。しかし、関数オブジェクトは、実行するときにオブジェクトに格納された状態でなければthisを解決できません(「第2回:JavaScriptの復習」の「関数オブジェクト」の項を参照)。

   例えば、リスト12のようにamachang.sayMyNameをsetTimeoutに渡した場合、渡されるのは関数オブジェクトだけで、amachangオブジェクトとは切り離されてしまいます。

リスト12:this.nameがundefinedになる
// リスト8のHumanクラス
var amachang = new Human('天野');

setTimeout(amachang.sayMyName, 1000);

   ですので、thisを解決できません。その結果、this.nameはundefinedと表示されてしまうのです。

   せっかくPrototype.jsを使ってオブジェクト指向で書いているのに、メソッドをコールバックを渡せないのでは、困ってしまいます。そこでbindメソッドを使います。bindメソッドを使うとthisを束縛することができます。使い方は、引数としてthisにしたいオブジェクトを渡します。たった、それだけです。

   リスト13の例を見てください。

リスト13:bindメソッドでthisを束縛する
// リスト9のHumanクラス
var amachang = new Human('天野');

setTimeout(amachang.sayMyName.bind(amachang), 1000);

   このようにsayMyNameにamachangを束縛したものを、setTimeoutに渡してあげることによって、ちゃんと「天野」という文字列が表示されるようになります。


bindAsEventListenerメソッド

   bindメソッドの拡張としてbindAsEventListenerというメソッドもあります。このメソッドは基本的にはbindメソッドと同じ機能を持っていますが、このメソッドによって生成された関数の第1引数にはイベントオブジェクトが渡されます。

   これによって、イベントオブジェクトを扱うイベントハンドラ(イベントに対するコールバック関数)を簡単に作りだすことができます。

1   2  次のページ

株式会社ガイアックス 天野 仁史
著者プロフィール
株式会社ガイアックス   天野 仁史
渋谷で働くWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い、IT戦士になることを決意。それからというもの、寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。

IT戦記
http://d.hatena.ne.jp/amachang/


INDEX
第4回:関数の拡張と配列操作メソッド一覧
関数の拡張
  配列の操作