riina-k.net

音楽・小説・プログラミングを手がけるリイナの拠点。

タグ ‘ オブジェクト指向

Javascript の prototype を学び始めた

既に存在するオブジェクトの振る舞いを変えてしまう prototype。
どう上手く扱えばいいのか、少しずつ勉強を始めてみた。

まず書いてみたのが、textarea から入力文字列を受け取る際、改行コードを統一する関数。

String.prototype.replaceAll = function (org, dest)
{
	return this.split(org).join(dest);
}

String.prototype.uniformLF = function()
{
	return this.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
}

正規表現を必要としない簡単な全置換が定義されていないため、replaceAll 関数を定義したのち、それを利用して改行コードを全置換。

これがうまく行ったので、以前の記事個人的に「これは組込み関数として必要だろ」っていうjavascript関数で作った関数を改造してみた。

Object.prototype.merge = function(arg)
{
	for ( var idx in arg ) {
		if ( arg.hasOwnProperty(idx) && typeof arg[idx] != 'undefined' && typeof arg[idx] != 'function' ) {
			this[idx] = arg[idx];
		}
	}
	return this;
}

Object.prototype.sliceKeys = function(keys)
{
	var result = {};
	for ( var idx in keys ) {
		var key = keys[idx];
		var item = this[key];
		if ( typeof item != 'undefined' && typeof item != 'function' ) {
			result[key] = ( this.hasOwnProperty(key) ? item : null );
		}
	}
	return result;
}

Object.prototype.walk = function(cb, param)
{
	if ( !cb ) {
		return;
	}
	for ( var idx in this ) {
		if ( this.hasOwnProperty(idx) ) {
			var item = this[idx];
			if ( typeof item != 'undefined' && typeof item != 'function' ) {
				cb(item, idx, param);
			}
		}
	}
}

for( … in …… ) の構文だと、プロパティやメソッド、prototype で指定したメソッドまで現れてしまうので、this.hasOwnProperty() 関数を多用するハメに。

しかしこれのおかげで、前の記事で書いたサンプルコードがこんな感じに豹変。

// 元のデータを保持するオブジェクトを生成
var obj = {
	id: 123,
	title: 'rk.tv',
	link: [
		'http://riina-k.net/',
		'http://riina-k.tv'
	]
};

function printHTML(item, key, jq)
{
	alert( '<dt>' + key + '</dt>' + '<dd>' + item + '</dd>' );
}
$('body').append('<dl id="output"/>');
	
// そこにプロパティを追加、切り出したプロパティそれぞれにコールバック関数を適用し、dlタグを出力
obj.merge({ author: 'Riina K.', param: 'foooo' }).sliceKeys(['title', 'author']).walk( printHTML, $('dl#output') );

追加したメソッドの戻り値のおかげで、メソッドチェーンを使って複雑な処理も1行で書けるようになった! これは便利。

return top