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




まるごとJavaScript&Ajax!
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  次のページ
書籍紹介
まるごとJavaScript&Ajax!

 まるごとJavaScript&Ajax! Vol.1 JavaScriptの一人者たちが教える最新ノウハウ
Ajaxの登場により、JavaScriptは最もホットなプログラミング言語になりました。そのJavaScriptとAjaxについて、最新ノウハウをまるごと解説します。
今や欠かせない、Prototype.jsをはじめとするJavaScriptライブラリを紹介します。IE 7やFirefox 2などの最新ブラウザーの新機能と、来るべきJavaScript 2についてもわかります。Web以外でのJavaScriptの利用テクニックも読めます。
JavaScriptを知り尽くした第一人者たちに学ぼう！

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

IT戦記
http://d.hatena.ne.jp/amachang/
この記事の評価をお聞かせください
 ボタンをクリックしますとウインドウが開きます。
 ご意見、ご要望にお応えします！ インプレスIT INSIDE
INDEX
第4回：関数の拡張と配列操作メソッド一覧
関数の拡張
  配列の操作
JavaScriptを洗練させるPrototype.js
第1回 Prototype.jsを使う準備
第2回 JavaScriptの復習
第3回 Prototype.js流のオブジェクト指向を理解する
第4回 関数の拡張と配列操作メソッド一覧
第5回 代表的なメソッドの紹介
第6回 DOMの拡張（前編）
第7回 DOMの拡張（後編）

Think IT 過去人気記事

Think IT
注目おすすめ情報

Think IT人気ライター BEST 5

People
IT製品/サービス資料ダウンロード
    おすすめのホワイトペーパー情報を準備中です