もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

プロトタイプベースのjavascript設計 (1)

一ヶ月に最低一本なんか書こうという目標のこのはてぶ。いきなり4月すっぽかしましたけど。


さて、人に説明出来る程度には理解してないとねということで、JavaScriptオブジェクト指向的な設計をする場合について適当につらつら。
長そうなので何回かに分けて書きます。間違ってたら指摘してくださいな。

まず、オブジェクト指向プログラミング言語というとJavaが太古からの代表格ですが、JavaJavaScriptは名前は似ているけど言語的には全く異なるものです。
Javaはいわゆるクラスベースのオブジェクト指向言語と言われているもので、属性と振る舞いをきっちり定義したクラスを作ってインスタンスを生成します。世の中のオブジェクト指向プログラミング言語と言えばだいたいこちらに当てはまるかと思います。

対してJavaScriptはプロトタイプベースのオブジェクト指向言語で、静的なクラスを持たず、オブジェクトは既存のオブジェクト(プロトタイプ)を複製して生成します。

と、書いただけでは知らない人にはなんのこっちゃという話なので実際にコードを見てみます。

// コンストラクタ
function Bar(_arg1){
  this.id=_arg1;
}
// オブジェクト生成
var obj = new Bar(2);
// 値確認
console.log(obj.id);
// 引数で設定した2が出力される

JavaScriptではオブジェクトを作るときは、まずfunctionでコンストラクタを定義します。ぱっと見、関数じゃん!と思いますが、functionで定義されたオブジェクトは関数でもありコンストラクタでもあるのです。

次にnew 演算子でオブジェクトを作ります。
おそらくJavaを知っている人で混乱するのはこいつだと思います。Javaでもnew演算子インスタンスを生成します(僕は設計図=クラスから製品=インスタンスを作るなんて習ったりしました)がJavaScriptでは意味が異なります。

JavaScriptにおけるnewは複製元のオブジェクトのprototypeを受け継いで新しいオブジェクトを作るという挙動をします。
prototypeを受け継ぐというのがnewの本質かなと思います。

※prototypeについてはこちらの記事が分かりやすいかと。
http://d.hatena.ne.jp/maeharin/20130215/javascript_prototype_chain

次回に続く