JSのオブジェクト指向について

いつかは来ると思ってたFireworks終了のお知らせが
GW明けに突然やってきてちょっとブルーになった松井です。

最近ようやくオブジェクト指向とかほんの少しですが、
分かってきた気がするのでので、そのあたりを今回まとめてみました。

そもそもオブジェクトって?

キーと値とで組[連想配列]になってるのをオブジェクトと言ったりします。
値は関数にすることができ、メソッドとして使うことができます。
JSの場合すべてがオブジェクトで関数もオブジェクトです。

JSはプロトタイプベースのオブジェクト指向

JSにはクラスという概念がない代わりに、
プロトタイプ(オブジェクトの元となるオブジェクト。要はひな形)という概念が存在します。
クラスベースのオブジェクト指向漬けの人がみると「もう!」ってなるそうなんですが、
私は他言語あんまりかじってないのでよくわかりません。

オブジェクトはそれ自身がデータを保持してるので、
複数の場所から違う値をセットするとおかしなことになります。
そこで、JSではインスタンス化(オブジェクトの複製)して、
インスタンスに、値をセットします。

手順としては

  • 空のオブジェクトを作成(※)
  • 機能をオブジェクトに追加(プロパティやメソッドを設定)
  • インスタンス化

といったことをしてます。
(※本当はすべてが空というわけではなく、組み込みプロパティは用意されてます。)

ちなみに、インスタンス化することを想定した関数をコンストラクタといいます。
通常の関数か、コンストラクタ関数かを区別するために、
オブジェクトの頭文字は大文字にします。

空のオブジェクトを作成

まずは、空のオブジェクトを作成します。

var オブジェクト名 = function(){}

機能をオブジェクトに追加

プロパティを設定

this.プロパティ名 = 初期値;

thisはコンストラクタによって作成されるインスタンス(自分自身)を表します。
ちなみにインスタンス化のとき、new演算子を忘れた場合はthisはグローバルオブジェクト(ブラウザではwindow)を指します。

new演算子については過去記事参照 prototypeのお作法

メソッドを設定

JSには本来メソッドという概念は無く、
値が関数オブジェクトであるプロパティがメソッドと見なされます。

this.メソッド名 = function(){
  〜処理〜
}

インスタンス化

作ったオブジェクトを呼び出すときはnew演算子を使います。

var 変数名 = new オブジェクト名();

はじめからプロパティとメソッドを設定しておく

上記の処理をまとめて書くとこんなかんじになります。

//コンストラクタで初期化
var オブジェクト名 = function(){
  this.プロパティ名 = 初期値;  //プロパティを設定
  this.メソッド名 = function (){ //メソッドを設定
       〜処理〜
     }
};

//インスタンス化
var 変数名 = new オブジェクト名(パラメータ);

オブジェクトリテラル記法だとこんなかんじ

独自のコンストラクタ関数や、組み込みのコンストラクタ( Object()やDate()など ) を使う以外にも
リテラル記法を使ったものもあります。

//空のオブジェクトを作成
var オブジェクト名 = {};

//プロパティを追加
オブジェクト名.プロパティ名 = "初期値";

//メソッドを追加
オブジェクト名.メソッド名 = function (){
  〜処理〜
};

はじめから値をいれておきたい場合はこんなかんじ

var オブジェクト名 = {
  プロパティ名: "初期値",
  メソッド名: function(){
     〜処理〜
  }
};

もう少し踏み込んだ内容はこちら JavaScriptをもう一度:オブジェクトについて勉強してみました。

書き方が日本語表記なのでものすごく分かりづらいですね!
あとでサンプルコード書き直します。

本当はプロトタイプについてまで書こうかと思ったのですが、
長くなりそうなので次回気がむいたら書きます。