昔、JavaScript を本格的に使おうとしたときに、僕はjsをこういうふうにとらえていました。今でもそうなんだけど。
別のサイトで書いたものですが、せっかくプログラミングブログ立ち上げてるので、もう一度このブログにも書いておこうっと
はじめに
このページはタイトルにあるとおり、JavaScriptを使おうとしてるんだけど、
クラスの概念が頭から離れなくて、JavaScriptにおけるオブジェクトをうまく扱えなくて
困っている僕みたいな人のために書きました。
だから、ぶっちゃけそれ以外の人には役に立たないですｗ
JavaScriptのオブジェクト指向についての解説は、他の優秀でわかりやすいサイトがたくさんありますが、
僕は、情けないことにそれでも理解できなくて数日間格闘しましたｗ
とりあえずは、オブジェクト指向で書いて動くレベルでの書き方は理解したのですが、
未だにクラスの概念が頭から離れず、多分JavaScriptならではの書き方ではないような気がしますｗ
よって、ここではクラスの概念を捨てきれない人向けに「とりあえず動くコードはこうだ！！」
という解説をしています。なのでJavaScriptに精通されてる方は怒らないで大目に見てくださいねｗ
また、基本的でセオリーなことや、コンストラクタとかプロトタイプとかプロトタイプチェーンとかスコープチェーンとか、
そういうのは、ここでは特に説明しません。ググってくださいｗ 他の優秀でわかりやすいサイトがたくさんあります。
あくまでも、クラスの概念を持ったままでもとりあえず動くコードを(ry
それでは解説いってみましょう。
その1 クラスみたいなのを作ってみよう
JavaScriptにクラスはありません。でもきっとクラスの概念を捨てきれない人は、次のソースがクラスのように見えてしまうはず。
//まるでクラスのよう。
function hogeCls() {
// まるでプロパティ(メンバ変数)のよう。
// 必ず「this.プロパティ名」とする。
// var hogeProp = ''; とするとうまくいかないよ。
this.hogeProp = '';
// まるでメソッド(メンバ関数)のよう。
// 必ず「this.メソッド名 = function(){}」とする
// 「function メソッド名(){}」とか
// 「var メソッド名 = function(){}」とするとうまくいかないよ。
this.hogeFunc = function() {
//プロパティへのアクセスは「this.プロパティ名」で。
alert(this.hogeProp);
}
}
クラスベースの言語だと (本当はJavaで書きたいけど、ぼくはPHPerなので)
//クラス
class hoge_cls {
//プロパティ
public $hoge_prop = "";
//メソッド
function hoge_func() {
echo $this->hoge_prop;
}
}
ですね。
その2 インスタンス化みたいなのをしてみよう
JavaScriptではインスタンス化じゃなく、なぜかコンストラクタと言うみたいです。まあ細かいことは置いといてｗ
//インスタンス化みたいなやつ(コンストラクタ)
hogeObj = new hogeCls();
//クラスみたいなやつ
function hogeCls() {
this.hogeProp = '';
this.hogeFunc = function() {
alert(this.hogeProp);
}
}
クラスベースの言語だと
//インスタンス化
$hoge_obj = new hoge_cls();
//クラス
class hoge_cls {
public $hoge_prop = "";
function hoge_func() {
echo $this->hoge_prop;
}
}
ですね。
その3 プロパティにアクセスしたり、メソッドを呼びだそう
プロパティとメソッドの使い方は、クラスベースの言語と違いはありません。
//インスタンス化みたいなやつ(コンストラクタ)
hogeObj = new hogeCls();
//プロパティに値をセット
hogeObj.hogeProp = '働いたら負けかなと思ってる';
//メソッドを呼ぶ
hogeObj.hogeFunc();
//クラスみたいなやつ
function hogeCls() {
this.hogeProp = '';
this.hogeFunc = function() {
alert(this.hogeProp);
}
}
クラスベースの言語だと
//インスタンス化
$hoge_obj = new hoge_cls();
//プロパティに値をセット
$hoge_obj->hoge_prop = '働いたら負けかなと思ってる';
//メソッドを呼ぶ
$hoge_obj->hoge_func();
//クラス
class hoge_cls {
public $hoge_prop = "";
function hoge_func() {
echo $this->hoge_prop;
}
}
ですね。
その4 継承みたいなのをしてみよう
JavaScriptでは継承はありませんが、プロトタイプというのがあります。でもきっとクラスの概念を捨てきれない人は、継承じゃん！！と思うはずｗ
//継承みたいなやつ(プロトタイプ)
hogeCls.prototype = new fugaCls();
//インスタンス化みたいなやつ(コンストラクタ)
hogeObj = new hogeCls();
//fugaClsオブジェクトのプロパティに値をセットしてみる。
hogeObj.fugaProp = '働いたら負けかなと思ってる';
//fugaClsオブジェクトのメソッドを呼んでみる。
hogeObj.fugaFunc();
//クラスみたいなやつ
function hogeCls() {
this.hogeProp = '';
this.hogeFunc = function() {
alert(this.hogeProp);
}
}
//もう一個クラスみたいなやつ
function fugaCls() {
this.fugaProp = '';
this.fugaFunc = function() {
alert(this.fugaProp);
}
}
クラスベースの言語だと
//インスタンス化
$hoge_obj = new hoge_cls();
//継承元のプロパティに値をセット
$hoge_obj->fuga_prop = '働いたら負けかなと思ってる';
//継承元のメソッドを呼ぶ
$hoge_obj->fuga_func();
//クラス
class hoge_cls extends fuga_cls {
public $hoge_prop = "";
function hoge_func() {
echo $this->hoge_prop;
}
}
//もう一個クラス
class fuga_cls {
public $fuga_prop = "";
function fuga_func() {
echo $this->fuga_prop;
}
}
ですね。
その5 おまけ 関数の中に複数の関数を定義する
関数の中に複数の関数を定義して使います。うーん。何かに役立つかも知れませんｗ
僕はテーブルタグを生成するための一連のオブジェクトをこの方法で一つにまとめました。
//インスタンス化みたいなやつ(コンストラクタ)
wrapObj = new wrap();
//fugaClsオブジェクトのプロパティに値をセットしてみる。
wrapObj.hogeObj.fugaProp = '働いたら負けかなと思ってる';
//fugaClsオブジェクトのメソッドを呼んでみる。
wrapObj.hogeObj.fugaFunc();
//複数の関数を一つにまとめる
function wrap() {
//継承みたいなやつ(プロトタイプ)
hogeCls.prototype = new fugaCls();
//インスタンス化みたいなやつ(コンストラクタ)
this.hogeObj = new hogeCls();
//クラスみたいなやつ
function hogeCls() {
this.hogeProp = '';
this.hogeFunc = function() {
alert(this.hogeProp);
}
}
//もう一個クラスみたいなやつ
function fugaCls() {
this.fugaProp = '';
this.fugaFunc = function() {
alert(this.fugaProp);
}
}
}
終わりです。
ご感想や「JavaScriptとしてのオブジェクト指向の解釈はこれじゃ…」ではなく「こういう場合やばいよ。動き変になるよ。」
レベルのご指摘がございましたら以下までお願いします。
最近のコメント