ActionScript2でのお仕事をいただいたときに頭が痛かったのは
・型が無い(あるんだけどデバッグに有効ではない)
・thisがわかりづらい
の2点であった。いまjavaScriptでの制作が多くなり同じような思いを抱いている(そんな方も多いのではないか?)。
特にクラス(もどき)を作成し、その中のメソッド起動時のthis参照は少々面倒である。
そこでtypeScriptである。はたして救世主となるのであろうか?
今回はアロー関数式を用いた場合のthisの挙動を検証+覚書しておく。
以下ボタンを3つ設定
1.通常
2.proxyを用いたもの
(なおproxy関数については野中文雄先生の解説を参考にさせていただいた
野中先生は講義・書籍共わかりやすいので大変オススメである)
3.アロー関数式を用いたもの
クリック時に参照している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」を生成し、想定通りの動きをしてくれている。使いやすそう。