« 【JavaScript】 イベントリスナーの追加と削除 | トップページ | 【JavaScript】クラスを定義する »

2006年6月13日 (火)

【JavaScript】オブジェクトの機能を拡張する

JavaSciptには、オブジェクトのインスタンスに動的にメソッドを追加出来るという特徴的な機能があります。
まずは以下のコードを見てみます。
var str = new String("JavaScript");

str.left = function(n){
    return this.substr(0, n);
}

alert(str.left(4));

var str2 = new String("JavaScript");
alert(str2.left(4));
JavaScriptの文字列にはleftというメソッドはありませんが、str.left = function...の部分でstrというインスタンスに対してメソッドを追加しています。
これによって、alert(str.left(4));では"Java"と表示され、左からn文字を取り出すleftというメソッドが機能していることを確認できます。
しかし、このメソッドはあくまでも変数strに格納されているインスタンスに対して追加したものですので、その後のstr2.left(4)はエラーとなってしまいます。
これはこれで使い道はあるのですが、strだけでなくstr2でも同様に使えるようにしたい事も多いですよね。
そのような場合には、以下のようにしてStringという型(型という表現が適切かどうかわかりませんが...)に対してメソッドを追加できます。
String.prototype.left = function(n){
    return this.substr(0, n);
}

var str = new String("JavaScript");
alert(str.left(4));

var str2 = new String("JavaScript");
alert(str2.left(4));
prototypeというものが出てきましたが、prototypeというプロパティはJavaScirptのオブジェクト全てが持っていて、このprototypeプロパティに メソッドを追加することで、その型のインスタンスメソッドを定義することが出来ます。
従って、この例では、strもstr2も無事にleftメソッドを呼び出すことが出来ます。

前回のaddEventListener・removeEventListenerサンプルをこの機能を使って書き直したサンプルを作成しましたので、動作を確認してみてください。
サンプルページ

|

« 【JavaScript】 イベントリスナーの追加と削除 | トップページ | 【JavaScript】クラスを定義する »

コメント

大変参考になりました。
ありがとうございます。

投稿: prim | 2008年10月 1日 (水) 11時57分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10503407

この記事へのトラックバック一覧です: 【JavaScript】オブジェクトの機能を拡張する:

« 【JavaScript】 イベントリスナーの追加と削除 | トップページ | 【JavaScript】クラスを定義する »