prototypeをつなげてみた

 JavaScriptはprototypeというものでオブジェクトをつなげているということは知っていたのですが、実際に使ったことはなかったのでとりあえず使ってみました。

 prototypeやらnewやらをいろいろいじっているうちになんとなくこういう感じのものができました。正直、これをつくるためにprototypeが必要だったのかと考えるとかなり疑わしいですが、まあ良しとしましょう。良しとしてください!

function colorCodeMaker(){
    this.index = new Array();
    var mojicode_a = 97;
    for(var i = 0;i < 10;i++){
	this.index[i] = i;
    }
    for(var j = 10;j < 16;j++){
	this.index[j] = String.fromCharCode(mojicode_a);
	mojicode_a++;
    }
  /*このあたり、0から15までの数字をカラーコードに
      変換するための配列を作成しています。
   ex.index[12] -> 'c'*/
}

colorCodeMaker.prototype.makeCode = function(){
    var _result = "#";
    var num;
    for(var i = 0;i<6;i++){
	num = Math.floor(Math.random() * 16);
	_result = _result+this.index[num];
    }
    //文字列に一文字ずつ追加していきます。
    
    return _result;
};

$(function(){
    var ccm = new colorCodeMaker();
    var colorCode;
    $('#btn').click(function(){
	colorCode = ccm.makeCode();
	$('#result').val(colorCode);
	$('#color').css({
	    backgroundColor:colorCode
	});
    });
});

 今日コード書いたり調べたりしてわかったことは、

  • newを使ってオブジェクトを初期化した時だけprototypeがつながる(初期化されたオブジェクトからprototypeのメンバが参照できる)。
  • オブジェクトを初期化し、prototypeメンバのメソッドを呼び出したとき、thisは初期化されたオブジェクトそのものを指す。

 の二点でした。

ランダムカラーコード - jsdo.it - share JavaScript, HTML5 and CSS