JavaScriptはプロトタイプベースのオブジェクト指向言語で、
PHPやJava、C++などのクラスベースのオブジェクトとは
特徴や書き方が大きく異なります。
今回は、PHPでオブジェクト指向開発の経験がある人向けに、
JavaScriptでのオブジェクト指向プログラミングの書き方を解説します。
サンプルはすべてそのまま実行できるので、
FirebugなどのJavaScriptコンソールで実行して
挙動を確かめながら読み進めるとわかりやすいかと思います。
JavaScript の特徴
すべてがオブジェクト
JavaScriptは完全なオブジェクト指向言語であり、
すべての型の変数、関数はオブジェクトです。
(プロパティやメソッドを持つ)
-
var test = "文字列";
-
-
alert(test.length); //3
下記の変数1と変数2の二つの書き方は同じ意味です。
(厳密にはtypeof関数の返り値などが違うが、実用上ほぼ同じ)
-
//数値型
-
var num1 = 123;
-
var num2 = Number(123);
-
-
//文字列型
-
var str1 = "ABC";
-
var str2 = new String("ABC");
-
-
//配列型
-
var arr1 = [1,2,3]
-
var arr2 = new Array();
-
arr2[0] = 1;
-
arr2[1] = 2;
-
arr2[2] = 3;
-
-
//オブジェクト型
-
var obj1 = {name:"Masaki"}
-
var obj2 = new Object();
-
obj2.name = "Masaki";
この様に、数値、文字列、配列などもオブジェクトとして表現できます。
関数もオブジェクト
実は、関数も変数と同じで、
-
function func1(){
-
alert('A');
-
}
-
-
var func2 = function(){
-
alert('A');
-
}
-
-
func1(); //A
-
func2(); //A
と変数に代入する形で表現できます。
(関数は、"定義"ではなく実体を持つ"変数")
function(){} の様な、関数名を書かない関数の定義方法を
無名関数(またはラムダ関数)といいます。
変数に代入するときには無名関数を使用します。
また、PHPでは可能なこういった構文はエラーになります
-
function test(){
-
alert('A');
-
}
-
-
test = 'ABC'; //ここで関数を上書きしている！
-
-
test(); //エラー
この例でもわかる通りJavaScriptでは
関数の定義後に上書き(再定義)や書き換え、削除などが可能です。
さらに、変数と同じなのでこんなこともできます。
-
function test(){
-
alert('A');
-
}
-
-
function do_func(func){
-
func();
-
}
-
-
//test関数を引数に
-
do_func(test);
-
-
//その場で無名関数を作って引数に
-
do_func(function(){
-
alert('B');
-
});
オブジェクトと同じように引数として渡すことも、返り値として返すこともできます。
内部構造を持ったオブジェクトのコピーは参照渡し
JavaScriptではPHPとは違い、配列に対しても
参照渡しでのコピー(シャローコピー)になります。
-
var arr1 = [0,1,2];
-
var arr2 = arr1;
-
-
arr2[0] = 5;
-
-
//コピー元の配列も書き換わる！
-
alert(arr1[0]); //5
-
-
var obj = {name:"Masaki"};
-
var obj2 = obj;
-
-
obj2.name = "Yamamoto";
-
-
//コピー元のオブジェクトも書き換わる！
-
alert(obj.name); //Yamamoto
メソッドのないオブジェクト(PHPの連想配列)でも
シャローコピーになるので注意しましょう。
完全なコピー(ディープコピー)をするには
-
var arr1 = [0,1,2];
-
var arr2 = [];
-
for (var i in arr1){
-
arr2[i] = arr1[i];
-
}
-
-
var obj1 = {name:"Masaki"};
-
var obj2 = {};
-
for (var i in obj1){
-
obj2[i] = obj1[i];
-
}
の様に、forなどでコピーすればOK。
※ただし、多次元配列の様なものは再帰的に処理する必要あり
※for (X in OBJ) の構文はPHPのforeach同様に使えてとても便利です！
関数とスコープ
PHPと同様に、JavaScriptでも関数内を別スコープにすることができますが、
スコープの扱い方が大きく異なるので注意が必要です。
グローバル変数は、関数内でもそのまま参照できます。
-
//グローバル変数
-
var test = "Masaki";
-
-
function myfunc(){
-
alert(test);
-
}
-
-
myfunc(); //Masaki
関数スコープ内でグローバル変数の内容を変更した場合も、
グローバル変数が書き変わります。
ローカル変数を作成したい場合は、 var を使います。
-
//グローバル変数
-
var test = "Masaki";
-
-
function myfunc(){
-
var test = 'Yamamoto';
-
alert(test);
-
}
-
-
myfunc(); //Yamamoto
-
-
alert(test); //Masaki
var で宣言された変数は、宣言されたスコープのローカル変数となります。
var で宣言しない変数はグローバル変数になります。
ただ、関数の引数は例外で、varをつけなくてもローカル変数扱いになります。
JavaScriptにおけるクラス
オブジェクト指向におけるクラスの基本的な機能は
* プロパティ
* メソッド
* コンストラクタ
* アクセス修飾子 (public/private)
* 継承
などですが、JavaScriptでもすべてできます。
JavaScriptにはクラスは存在せず、オブジェクトと
関数を組み合わせて同様の機能を実装します。
通常PHPなどクラスベースのオブジェクト指向言語では、
クラス → インスタンス
と、クラスという"型"からインスタンスという"実体"を生成しますが、
プロトタイプベースのオブジェクト指向言語には"クラス"という
考え方は存在せず、定義＝実体となります。(インスタンスしかない)
JavaScriptでは new という構文があり、クラスからインスタンス化している
ように見えますが、実際の処理は元となるオブジェクトを
コピー(+継承)して作られます。
インスタンスしか存在しないのにどう継承などを実装するのかなどは、
追って説明していきます。
プロパティ
JavaScriptでのプロパティ定義は、PHPの様に宣言は必要ありません。
-
var object = new Object();
-
-
object.name = 'Masaki';
-
object.company = "EC studio";
インスタンス化した後で追加することもできますし、
-
var object = {
-
name:"Masaki",
-
company:"EC studio"
-
};
と、シンタックスシュガー(簡易記法)を使って簡単に定義することもできます。
メソッド
メソッドもプロパティとほぼ同様に記述できます。
-
var object = new Object();
-
-
object.hello = function(){
-
alert('Hello!');
-
}
-
-
object.hello();
シンタックスシュガーを使うと
-
var object = {
-
hello:function(){
-
alert('Hello');
-
}
-
};
-
-
object.hello();
こう書けます。
プロパティと組み合わせると、
-
var object = {
-
name:"Masaki",
-
company:"EC studio",
-
hello:function(){
-
alert('Hello');
-
}
-
};
-
-
object.hello(); //Hello
こう書けます。
メソッド内で自分自身のプロパティやメソッドを参照するには、this を使います。
-
var object = {
-
name:"Masaki",
-
company:"EC studio",
-
hello:function(){
-
alert('Hello ' + this.name);
-
}
-
};
-
-
object.hello(); //Hello Masaki
これでかなりクラスに近くなりましたね。
コンストラクタ
オブジェクトをインスタンス化する時に実行されるメソッドであるコンストラクタは、
下記の様に実装できます。(厳密には、インスタンス化ではなくコピー+継承)
-
function MyObject(message){
-
alert(message);
-
}
-
-
var object = new MyObject('Hello'); //Hello
new Object() ではなく、関数をnewの対象にすることで
その関数の中身をnew実行時に実行できます。
コンストラクタに返り値を指定してもオブジェクト型以外は無視されます。
コンストラクタの返り値がオブジェクト型の場合はそのオブジェクトが
newで生成されるオブジェクトになります。
このコンストラクタの仕組みを使うと、newした時に
自動的にプロパティやメソッドを定義できる、
とても PHPのクラスに近い書き方ができます。
-
function MyObject(message){
-
this.name = 'Masaki';
-
this.company = 'EC studio';
-
-
this.hello = function(message){
-
alert(message + ' ' + this.name);
-
}
-
-
//helloを実行
-
this.hello(message);
-
}
-
-
var object = new MyObject('Hello'); //Hello Masaki
-
-
object.hello('Good morning'); //Good morning Masaki
関数はObjectでもあるので、this が使えます。
コンストラクタの処理の中に thisへの代入を含めることで、
初期の定義を関数内に入れてしまうことができます。
※コンストラクタの引数である messageと、helloメソッドの引数のmessageが
同じ変数名になっていますが、helloメソッドのものは関数定義の中での
引数名なので、別のものと認識されます。
アクセス修飾子(public/private)
JavaScriptにはアクセス修飾子はありませんが、コンストラクタの例で挙げた
関数でのオブジェクト定義を使えば、プロパティやメソッドにアクセス制限を
かけることができます。
-
function MyObject(){
-
var self = this;
-
-
//public
-
this.name = 'Masaki';
-
this.company = 'EC studio';
-
//private
-
var separator = ',';
-
-
//public
-
this.hello = function(message){
-
alert(message + separator + getName());
-
}
-
-
//private
-
var getName = function(){
-
return self.name;
-
}
-
}
-
-
var object = new MyObject();
-
-
alert(object.separator); //undefined
-
object.getName(); //エラー
関数内にvarを使ってローカル変数による変数や関数にすることで、
外からは参照出来ない privateなプロパティ、メソッドを作ることができます。
(protectedなプロパティ、メソッドは作成できません)
private なプロパティ、メソッドは this を使わず
var を使ってローカル変数として参照します。
privateなメソッドを作るときの注意として、
メソッドのfunction定義内では this は使えません。
その場合の対策として、this を self というローカル変数にコピーして使用しています。
※privateなメソッドのfunction内のthisは、その関数自体を指すため。
この様に、this はそのメソッドの呼び出し元の主体に応じて変わってしまうので、
その場合に対応するためにvar self = this をコンストラクタで
あらかじめ定義しておくと便利です。
※privateなメソッドの場合の他に、イベントハンドラによって
メソッドが実行された場合でも this が変わってしまいます。
(クリック処理や、Ajax処理など)
これでプロパティ、メソッド、コンストラクタを実現できました。
JavaScriptには他にも様々なオブジェクトの書き方があり、
それぞれにメリット・デメリットがありますが、
クラスベースに文法が比較的近いこの記述方法が私のおすすめです。
継承
JavaScriptのオブジェクトには prototype という予約語のプロパティがあり、
そのprototypeに親となるオブジェクトを代入することで継承を実現できます。
prototype = 型 という意味。元となる型のオブジェクトを指定できます。
-
//親オブジェクト
-
function MyObject(){
-
var self = this;
-
-
//public
-
this.name = 'Masaki';
-
this.company = 'EC studio';
-
//private
-
var separator = ',';
-
-
//public
-
this.hello = function(message){
-
alert(message + separator + getName());
-
}
-
-
//private
-
var getName = function(){
-
return self.name;
-
}
-
}
-
-
//子オブジェクト
-
function MyObjectChild(){
-
//プロパティをオーバーライド
-
this.name = 'Yamamoto';
-
//privateはオーバーライドできない
-
var separator = '|';
-
-
//メソッドを追加
-
this.thankyou = function(){
-
this.hello('Thank you');
-
}
-
};
-
-
//プロトタイプ(継承元)を指定
-
MyObjectChild.prototype = new MyObject();
-
-
var mychild = new MyObjectChild();
-
-
//子オブジェクトの中で、親オブジェクトのhelloメソッドが実行できる
-
mychild.thankyou(); //Thank you,Yamamoto
privateなメンバ(var で定義したもの)はオーバーライドできません。
これは、JavaScriptにおける var の挙動を理解していれば
何が起きているかがわかるかと思います。
(親の関数のローカル変数なので上書きできない)
JavaScriptのオブジェクト指向はPHPと比較すると複雑に見えますが、
その挙動や書き方を理解してしまえば、とても柔軟かつシンプルに記述でき、
大規模なシステム開発も十分可能なものだと思います。
オブジェクト指向でのJavaScript開発の参考になれば幸いです。
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
ページの先頭に戻る
配列のコピーは
newArray=Array.apply(null,oldArray)
でいいのでは？