This is this

thisisthis

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」を生成し、想定通りの動きをしてくれている。使いやすそう。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。 またURLは投稿できません。(スパム対策)