前回は、数値や文字列といった基本的なデータに関するメソッドを紹介した。今回は、より複雑な構造をもったクラスとオブジェクトに関するメソッドを紹介しよう。バージョンは引き続き1.6だ。詳細はAPIドキュメントを参照していただきたい。なお、オプション以外で省略可能な記述は[～]で表す。
これらのメソッドは、Prototype.jsのみならずJavaScriptライブラリというものの存在価値を知らしめるのに大きな役割を果たしたといえるだろう。拡張メソッドを使いたくてPrototype.jsを使うというユーザーも多いのではないだろうか。
クラス(Class)のメソッド
Class.create( [スーパークラス名, ] [ { コンストラクタやメソッド } ] );
クラスの作成を行う。スーパークラス名を指定すると、それを継承したサブクラスが作成される。このメソッドでクラスを作成するときは、コンストラクタをinitializeメソッドとして記述する必要がある。また、継承するときはinitializeメソッドの第1引数にスーパークラスを表す$superを記述する。
【例】クラスの作成
var Point = Class.create( {
initialize : function( x, y ) { // X, Y座標を初期化(コンストラクタ)
this.x = x;
this.y = y;
},
distance : function( p ) { // 2点間の距離を計算するメソッド
var dx = this.x - p.x; // 例外処理は省略
var dy = this.y - p.y;
return Math.sqrt( Math.abs( dx * dx + dy * dy ) ); // 戻り値(距離)
}
} );【例】インスタンス生成とメソッド実行
var p1 = new Point( 2, -3 ); // 1点目のインスタンス
var p2 = new Point( -4, 5 ); // 2点目のインスタンス
p1.distance( p2 ); // 戻り値 : 10【例】継承
var Vector = Class.create( Point, {
initialize : function( $super, x, y ) {
$super( x, y ); // $superはスーパークラスを表す(initializeの引数にも記述)
},
translation : function( v ) { // 引数のPointのX,Yをそれぞれに足す
this.x += v.x; // 例外処理は省略
this.y += v.y;
return this; // 戻り値はこのインスタンス
}
} );
var v1 = new Vector( 2, -3 );
var v2 = new Vector( -4, 5 );
v1.translation( v2 ); // (-2, 2)
クラス.addMethods( { メソッド, メソッド, ... } );
作成済みのクラスにメソッドを追加あるいは変更する。
【例】 メソッド追加
Point.addMethods( {
inspect : function() { // 現在の座標を出力
return ( 'Point(' + this.x + ', ' + this.y + ')' );
}
} );
var p1 = new Point( 2, -3 );
var p2 = new Point( -4, 5 );
Object.inspect( p1 ); // 'Point(2, -3)'
Object.inspect( p2 ); // 'Point(-4, 5)'
オブジェクト(Object)のメソッド
Object.extend( オブジェクト, { ... 拡張する内容 ... } )
オブジェクトに対して第2引数の内容を拡張する。特定のインスタンスを拡張する点が継承やaddMethodsとは異なる。
【例】 p1だけ拡張
var p1 = new Point( 2, -3 );
var p2 = new Point( -4, 5 );
Object.extend( p1, {
inspect : function() {
return ( 'Point(' + this.x + ', ' + this.y + ')' );
}
} );
Object.inspect( p1 ); // Point(2, -3)
Object.inspect( p2 ); // [object Object]
isArray(), isElement(), isFunction(), isHash(), isNumber(), isString(), isUndefined()
オブジェクトの種類を確認する。これらはすべて Object.isArray( オブジェクト ) などのように記述する。
【例】以下のObject.is.....()の戻り値はすべてtrue
var obj = { a : 1, b : 'cde', c : function() { return false; } };
Object.isNumber( obj.a );
Object.isString( obj.b );
Object.isFunction( obj.c );
Object.isUndefined( obj.d );
Object.isArray( [1, 2] );
Object.isHash( $H( obj ) );
Object.isElement( document.getElementsByTagName( 'body' )[0] );
keys(), values()
keys()はオブジェクトのキー(プロパティ名、メソッド名に相当)、values()はキーに対応する値(もしくは関数)を要素とする配列を生成する。
【例】
var obj = { a : 1, b : 'cde', c : function() { return false; } };
Object.keys( obj ); // 戻り値 : ['a', 'b', 'c']
Object.values( obj ); // 戻り値 : [1, 'cde', function() { ... } ]
toJSON(), toQueryString(), toHTML()
toJSON()はJSON形式に、toQueryString()はURLのGETパラメータ形式にオブジェクトを変換する。ただしtoJSON()の戻り値に関数は含まれない。
toHTML()はオブジェクトをHTML形式に変換するメソッドだが、実際にはオブジェクトのtoHTML()を実行するだけなので、オブジェクトをHTMLに変換する処理はオブジェクト自身のtoHTML()メソッドで定義しなくてはならない。
【例】
var obj = { a : 1, b : 'ＣＤＥ' };// 'ＣＤＥ'は全角
Object.toJSON( obj ); // {"a": 1, "b": "ＣＤＥ"}
Object.toQueryString( obj ); // a=1&b=%EF%BC%A3%EF%BC%A4%EF%BC%A5【例】CSS設定付きでテキストを表示
var Text = Class.create( {
initialize : function( text, css ) {
this.text = text; // テキスト
this.css = css; // CSS設定(文字列)
},
toHTML : function() { // HTML出力用メソッド
return '<span style="' + this.css + '">' + this.text + '</span>';
}
} );
var t = new Text( 'Prototype.js', 'font-size : large; font-weight : bold;' );
document.write( Object.toHTML( t ) );
// <span style="font-size: large; font-weight: bold;">Prototype.js</span>
Object.clone( オブジェクト );
Object.inspect( オブジェクト );
clone()はオブジェクトのコピーを生成する。inspect()はオブジェクトの内容がわかる文字列を出力するメソッドで、前述の通りオブジェクト自身が持つinspect()を実行する。このメソッドが存在しないときは、オブジェクトの文字列による表現をそのまま出力する。
これらの拡張メソッドは、JavaScriptプログラミングを便利にするのに欠かせない。ぜひとも使いこなしたいものだ。
