JavaScriptの小豆：Bind

JavaScriptの小技、勝手に名付けて「JavaScriptの小豆」シリーズ（続くのか？）第一弾。

今回はBindです。

Bind()でオブジェクトとオブジェクト内の関数を結びつけることによって、setTimeout()やsetInterval()で呼び出されるような時でも「this」って何やねん！っていう問題を解消できます。たぶん…。

一般的なライブラリのパクリですが、それらのライブラリ無しでも簡単に使えるように抜き出してまとめた感じですかね。

ArgsToArray = function( pArgs )
{
	if ( !pArgs )
	{
		return [];
	}

	if ( pArgs.toArray )
	{
		return pArgs.toArray();
	}

	var	theLength = pArgs.length || 0;
	var	theResults = new Array( theLength );

	while ( theLength-- )
	{
		theResults[ theLength ] = pArgs[ theLength ];
	}

	return theResults;
};

ConcatArray = function( pArray1, pArray2 )
{
	var	theArray = [];

	var	x = 0;
	var	theLength = 0;

	for ( x = 0, theLength = pArray1.length; x < theLength; x++ )
	{
		theArray.push( pArray1[ x ] );
	}

	for ( x = 0, theLength = pArray2.length; x < theLength; x++ )
	{
		theArray.push( pArray2[ x ] );
	}

	return theArray;
};

Bind = function()
{
	var	theArgs = ArgsToArray( arguments );
	var	theObj = theArgs.shift();
	var	theFunc = theArgs.shift();

	return function()
	{
		try
		{
			var	theArgs2 = ArgsToArray( arguments );
			return theFunc.apply( theObj, ConcatArray( theArgs, theArgs2 ) );
		}
		catch( e )
		{
			return null;
		}
	}
};

Bind( obj, func [, options ] )

第一引数(obj)は結びつけたいオブジェクト。

第二引数(func)はそのオブジェクト内の関数。

第三引数以降に渡したものはその関数の引数として受け取れるようになってます。

使用例はこんな感じ。

GetByID = function( pID )
{
	return document.getElementById( pID );
};

IntervalObject = function( pName, pInterval, pSuffix )
{
	this.name = pName;

	if ( pInterval != undefined )
	{
		this.interval = pInterval;
	}

	if ( pSuffix != undefined )
	{
		this.suffix = pSuffix;
	}

	this.Start();
};

IntervalObject.prototype =
{
	name: '',

	interval: 1000,

	suffix: 'だよ',

	Start: function()
	{
		setInterval( Bind( this, this.Display, this.suffix ), this.interval );
	},

	Display: function( pSuffix )
	{
		var	theField = GetByID( this.name );
		var	theString = this.name + ': ' + (new Date()) + ' ' + pSuffix;

		theField.value = theString;
	}
};

var	theObj1 = new IntervalObject( 'field1', 500, 'だな' );
var	theObj2 = new IntervalObject( 'field2', 800, 'です' );

サンプルを表示

suffixについては、Bindに渡す第三引数の例としてあえてこんな感じの受け渡しにしてみました。

これでsetInterval等に無名関数を渡す感じの書き方がスッキリすると思いますが、いかがでしょう？

あと、スクリプト的にもっと圧縮出来ると思いますが、こういう書き方が自分のスタイルです。

ご了承下さい。