第4回：関数の拡張と配列操作メソッド一覧 (1/2)

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の拡張（後編）

タイプ

連載

特集

第4回：関数の拡張と配列操作メソッド一覧 (1/2)

新着記事

人気記事トップ10

企画広告も役立つ情報バッチリ！ Sponsored