TOP＞システム開発＞ 関数の拡張

JavaScriptを洗練させるPrototype.js 第４回：関数の拡張と配列操作メソッド一覧 著者：ガイアックス  天野 仁史   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回：関数の拡張と配列操作メソッド一覧 関数の拡張   配列の操作

JavaScriptを洗練させるPrototype.js 第1回 Prototype.jsを使う準備 第2回 JavaScriptの復習 第3回 Prototype.js流のオブジェクト指向を理解する 第4回 関数の拡張と配列操作メソッド一覧 第5回 代表的なメソッドの紹介 第6回 DOMの拡張（前編） 第7回 DOMの拡張（後編）