1. ホーム
  2. jquery

[解決済み] クラスメソッド内の "this "をタイプスクリプトで記述する

2022-03-13 23:07:14

質問

基本的なことだと思うのですが、なかなか理解しにくいです。

class Main
{
     constructor()
     {
         requestAnimationFrame(this.update);  //fine    
     }

     update(): void
     {
         requestAnimationFrame(this.update);  //error, because this is window
     }

}

プロキシが必要なようなので、Jqueryを使うとします。

class Main
{
     constructor()
     {
         this.updateProxy = $.proxy(this.update, this);
         requestAnimationFrame(this.updateProxy);  //fine    
     }

     updateProxy: () => void
     update(): void
     {
         requestAnimationFrame(this.updateProxy);  //fine
     }

}

しかし、ActionScript 3 のバックグラウンドを持っている私には、ここで何が起こっているのかよくわかりません。Javascriptがどこで始まり、TypeScriptがどこで終わるのか、よくわからないのです。

updateProxy: () => void

そしてまた、私はこの方法が正しいかどうか確信が持てないのです。私が一番避けたいのは、クラスのほとんどに a() 関数があり、その関数に aProxy() 同じことを2回書いているような気がするのですが?これは正常なことなのでしょうか?

解決方法は?

もし、あなたが this TypeScriptではarrow関数を用いてこれを実現する。Andersの言葉を引用します。

<ブロッククオート

その this はレキシックスコープされます。

私が好きな使い方を紹介します。

class test{
    // Use arrow functions
    func1=(arg:string)=>{
            return arg+" yeah" + this.prop;
    }
    func2=(arg:number)=>{
            return arg+10 + this.prop;
    }       

    // some property on this
    prop = 10;      
}

TypeScript Playgroundで見る

生成されたJavaScriptで this はキャプチャ 外側 関数呼び出しの

var _this = this;
this.prop = 10;
this.func1 = function (arg) {
    return arg + " yeah" + _this.prop;
};

ということで this 関数呼び出しの中の値 (これは window は使用されません。

もっと詳しく知りたい方は 「理解する this TypeScriptで」(4:05) - YouTube