ActionScript2でのお仕事をいただいたときに頭が痛かったのは
・型が無い（あるんだけどデバッグに有効ではない）
・thisがわかりづらい
の２点であった。いまjavaScriptでの制作が多くなり同じような思いを抱いている（そんな方も多いのではないか？）。
特にクラス（もどき）を作成し、その中のメソッド起動時のthis参照は少々面倒である。
そこでtypeScriptである。はたして救世主となるのであろうか？
今回はアロー関数式を用いた場合のthisの挙動を検証＋覚書しておく。
以下ボタンを３つ設定
１．通常
２．proxyを用いたもの
（なおproxy関数については野中文雄先生の解説を参考にさせていただいた
野中先生は講義・書籍共わかりやすいので大変オススメである）
３．アロー関数式を用いたもの
クリック時に参照しているthisと自身のクラス名を表示させる
検証URLはこちら
//クリック時は以下のイベントを起動する
private onClickd(event: Event): void {
alert(["this=", this, "myClass=", this.myClass]);
}
//通常
//結果：button自体がthisとして認識されている。クラスは認識出来ない
this.myBtn.addEventListener(‘click’, this.onClickd);
//proxyを用いた場合(proxyにてonClickedから新たな関数を生成）
//結果：classがthisとして認識されている
function proxy(method, scope) {
var aArgs = Array.prototype.slice.call(arguments, 2);
var myFunction = function () {
aArgs.push(myFunction);
return method.apply(scope, Array.prototype.slice.call(arguments, 0).concat(aArgs));
}
return myFunction;
}
var proxyedOnClicked = proxy(this.onClickd, this);
this.myBtn.addEventListener(‘click’, proxyedOnClicked);
//アロー関数式
//結果:classがthisとして認識されている
this.myBtn.addEventListener(‘click’, this.onClickd);
private onClickd=(event: Event): void=> {
alert(["this=", this , "myClass=" , this.myClass]);
}
自動で変数「_this」を生成し、想定通りの動きをしてくれている。使いやすそう。
