94

これはおそらく非常に基本的なことですが、頭を悩ませています。

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

また、私はこれを正しく行っていると確信していません。aProxy()私が望む最後のことは、同じことを2回書いていると感じているので、アクセスする必要があるaa()関数を持つクラスのほとんどですか? それは正常ですか？

4

7 に答える 7

133

thisこれを行う TypeScript の方法をキャプチャしたい場合は、アロー関数を使用します。アンダースを引用するには：

インアロー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) は使用されません。

詳細については、「TypeScript を理解する」(4:05) – YouTube をご覧ください。this

于 2013-04-22T23:42:47.140 に答える
20

このようにメソッドを記述すると、「this」は期待どおりに処理されます。

class Main
{
    constructor()
    {
        requestAnimationFrame(() => this.update());
    }

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

別のオプションは、「this」を関数呼び出しにバインドすることです。

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

    update(): void
    {
        requestAnimationFrame(this.update.bind(this));
    }
}
于 2013-12-07T01:55:33.227 に答える
7

typescript 言語仕様の 72 ページを参照してください https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.pdf?raw=true

アロー関数式

例では

class Messenger {
 message = "Hello World";
 start() {
 setTimeout(() => alert(this.message), 3000);
 }
};
var messenger = new Messenger();
messenger.start();

アロー関数式を使用すると、コールバックが周囲の「開始」メソッドと同じ this を持つようになります。コールバックを標準関数式として記述すると、周囲の this へのアクセスを手動で調整する必要が生じます。たとえば、ローカル変数にコピーするなどです。

これは実際に生成された Javascript です。

class Messenger {
 message = "Hello World";
 start() {
 var _this = this;
 setTimeout(function() { alert(_this.message); }, 3000);
 }
};
于 2014-05-22T22:52:27.547 に答える
5

関数をコールバックとして渡すと、問題が発生します。コールバックが実行されるまでに、「this」の値は、ウィンドウ、コールバックを呼び出すコントロール、または他の何かに変更されている可能性があります。

コールバックされる関数への参照を渡す時点で、必ずラムダ式を使用してください。例えば

public addFile(file) {
  this.files.push(file);
}
//Not like this
someObject.doSomething(addFile);
//but instead, like this
someObject.doSomething( (file) => addFile(file) );

これは次のようにコンパイルされます

this.addFile(file) {
  this.files.push(file);
}
var _this = this;
someObject.doSomething(_this.addFile);

addFile 関数は特定のオブジェクト参照 (_this) で呼び出されるため、呼び出し側の「this」ではなく、_this の値を使用します。

于 2015-11-05T12:17:19.037 に答える
3

つまり、 this キーワードは、関数を呼び出したオブジェクトへの参照を常に持っています。

Javascript では、関数は単なる変数であるため、それらを渡すことができます。

例：

var x = {
   localvar: 5, 
   test: function(){
      alert(this.localvar);
   }
};

x.test() // outputs 5

var y;
y.somemethod = x.test; // assign the function test from x to the 'property' somemethod on y
y.test();              // outputs undefined, this now points to y and y has no localvar

y.localvar = "super dooper string";
y.test();              // outputs super dooper string

jQuery で次の操作を行う場合:

$.proxy(this.update, this);

あなたがしていることは、そのコンテキストをオーバーライドすることです。舞台裏で jQuery は次のことを教えてくれます。

$.proxy = function(fnc, scope){
  return function(){
     return fnc.apply(scope);  // apply is a method on a function that calls that function with a given this value
  }
};
于 2013-04-22T22:45:15.887 に答える