ボクココ

個人開発に関するテックブログ

JavaScript 〜オブジェクト 実践編〜

前回はオブジェクトとは何か、どのような構造でどう使うかという所をやりました。それでは今回からそのオブジェクト作って行きましょう〜。
オブジェクトを作る基になるのって大抵は「クラス」ですよね。ですがJavaScriptではclassなんて書きません。関数にクラスとしての役割を与えているだけなんです。※便宜上クラスの役割をしているのをJavaScriptでも「クラス」と呼ぶことにします。


var MyClass = function() {};
空の関数をMyClassに代入しています。ですが、

var ins = new MyClass();
インスタンスが作れます。ここでの[new]って何か気持ち悪いです。そう思ってネットで調べてたらJavaScriptにnew演算子はいらないに難しく書いてありましたが、newを使わないように変更することも可能だそうです。
読んでみて、初心者のうちは素直にそういうもんだと思ってnew使った方が良さそうでした。
先ほどの空のクラスからインスタンスを作って、そこからオブジェクトを作る方法が一番楽です。

ins.name='homma';
ins.getName=function(){...};
ですが、今回はコンストラクタ(初期化)をしてのサンプルを作っておきました。残りはコメントにて。

//ロードした瞬間にこの関数を呼び出す
window.onload=function(){
myObjFunc();
}

function myObjFunc(){
document.getElementById('obj_btn').onclick=function(){
var obj = new MyClass('Homma','Kiminari');
divTag=document.getElementById('show');
divTag.innerHTML+=obj.getName()+'<br/>';

//このように1つのオブジェクトに対してだけのメソッドを追加することもできる。
obj.exchange=function(){
return this.first+' '+this.last;
}
divTag.innerHTML+=obj.exchange()+'<br/>';
};
}

//コンストラクタ。初期化をしているだけなので、戻り値は不要
var MyClass = function(first,last){
this.first=first; //コンストラクタ内では「自身によって作られたオブジェクト」を表すthisキーワードを用いる
this.last=last;
myClass.prototype.getName=function(){
return this.last+' '+this.first;
}//prototypeとすることで、新しくインスタンスを作るたびにこのメソッドを作らなくなる。
//代わりに各オブジェクトは元のクラスにあるメソッドを参照することになり、メモリの節約や、変更を認識しやすくなる。
};

HTML,CSSは前回と全く同じですので省略。以下実行例
http://sw.it.aoyama.ac.jp/2009/Mashup/homma/js_study/obj_adv/object.html

以上です。お疲れさまでした!