投稿者「HEXADRIVE001」のアーカイブ

JavaScriptとクラスとクロージャー

当面はJavaScriptに関するネタでblogを書こうと決めているgood sun晴れこと山口です。
今回は前回と同じく素材が用意出来なかった為、
第一回で書いたスクリプトの構文について説明していきたいと思います。
素材を用意する時間がなくてFINAL FANTASY XIII-2 とPSVitaは遊ぶ時間があるのが不思議ですわーい（嬉しい顔）。
このJavaScriptシリーズ第一回では何気なく記述をしていますが、
JavaScriptは俗に言うオブジェクト指向な言語なので、
C++等で使われている”クラス”のようなものが書けます。

function Node(){
～
}
Node.prototype.update = function(){
～
}

この辺等がそうですね。
一見すると関数を定義しているだけのようですが、
JavaScriptでのクラスのようなものはこの関数の定義を利用して作成します。
C++での

Class MyClass{
public:
MyClass(value):myValue{
}
~MyClass(){
}
int addValue(value){
return myValue + value;
}
protected:
private:
int myValue;
};
...
MyClass* pMyClass = new MyClass(3);
int v = pMyClass->addValue(5);

といった記述は
JavaScriptでは

function MyClass(value){
this.myValue = value;
}
MyClass.prototype.addValue = function(value){
return this.myValue + value;
}
val myClass = new MyClass(3);
val v = myClass.addValue(8);

といった感じに書けます。
如何でしょうか、結構好感の持てる書式だと思います。
最後にJavaScriptで気をつけなければいけないthisからはじまるクロージャー入門をしたいと思います。
第一回で記述した以下の処理に注目して下さい。

Frame.prototype.run = function(lastTime){
～
var _this = this;
setTimeout(function(){_this.run(nowTime);}, nextTime);
}

Frameクラスのrun関数は
最後に実行した時間を引数にとって、
一定時間後に再度自分自身のrun関数を呼び出す事を続ける処理です。
setTimeout関数に渡す第一引数ですが、
C,C++で言うところの関数ポインタのようなものになります。
関数内に無名関数定義を書けるのはとてもいい感じです。
この無名関数内の処理ですが、
自分自身のrun関数を呼び出したいので、
this.run(nowTime);
と記述しても良さそうではありますが
thisという予約語が関数を持つオブジェクトのインスタンスを挿すキーワードなので、
このthisは登録された無名関数を呼び出す関数を持つオブジェクトのインスタンスを挿してしまい、
Frameオブジェクトのインスタンスを指してくれません。
正しくFrameオブジェクトのインスタンスthisを使う為に、
直前で_this変数にthisを代入して_this経由でFrame.prototypeのrun関数を呼び出しています。
この関数の引数にない変数を堂々と使えるのは、
クロージャーという仕組みらしいです。
関数内関数とそれを取り巻く変数との紐付けみたいな感じでしょうか。
よく見ると例としてあげた関数の引数にとっているnowTimeも引数に無い変数ですね。
これを利用するとJavaScriptでもprivate変数パスワードのようなものを作成する事が出来ます。

function MyClass(){
var _this = this;
function privateActivate(){
var value;
_this.__proto__.getFunc = function(){return value;}
_this.__proto__.setFunc = function(argv){value = argv;}
}
privateActivate();
}
var myClass = new MyClass;
myClass.setFunc(3);
myClass.getFunc() + 5;

なんとも不思議な感じです。
普段使わない言語を使うと頭の体操になっていい感じです。
来年こそは素材を準備してスマートフォン用のダイナミックなページ作成に挑戦しますパンチ。