类方法中的打字稿“ this”

我知道这可能是非常痛苦的基本工作，但是我很难缠着它。

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

而且，我不确信自己在做这件事。我想要的最后一件事是我的班级中大多数都具有aa（）函数，aProxy()因为我感觉自己在写两次相同的东西，所以需要使用该函数进行访问？正常吗

如果要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游乐场中查看

您可以看到在生成的JavaScriptthis中捕获了函数调用之外的内容：

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

因此不会使用this函数调用中的值（可能是window）。

要了解更多信息，请访问：“ thisTypeScript理解”（4:05）– YouTube

如果您这样编写方法，则将按您期望的方式对待“ 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));
    }
}

参见打字稿语言规范的第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();

使用箭头函数表达式会使回调与周围的“开始”方法具有相同的含义。将回调写为标准函数表达式，必须手动安排对其周围环境的访问，例如，将其复制到局部变量中：

这是实际生成的Javascript：

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

当您将函数作为回调传递时，就会出现问题。到回调执行时，“ this”的值可能已更改为Window，调用回调的控件或其他内容。

确保在传递对要回调的函数的引用时始终使用lambda表达式。例如

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的值。

简而言之，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
  }
};

晚会晚了，但我认为对于这个问题的未来访问者来说，考虑以下几点非常重要：

其他答案（包括已接受的答案）缺少关键点：

myFunction() { ... }

和

myFunction = () => { ... }

是不一样的东西“不同的是后者捕获this”。

第一种语法在原型上创建一个方法，而第二种语法在其值是一个函数的对象上创建一个属性（也恰好捕获this）。您可以在转译的JavaScript中清楚地看到这一点。

要完成：

myFunction = function() { ... }

第二种语法将相同，但不进行捕获。

因此，在大多数情况下使用箭头语法可以解决与对象绑定的问题，但这并不相同，并且在许多情况下，您确实希望在原型上具有适当的功能而不是属性。

在这些情况下，使用代理或.bind()实际上是正确的解决方案。（尽管具有可读性。）

在这里有更多的阅读内容（主要不是关于TypeScript的知识，而是原则）：

https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1

https://ponyfoo.com/articles/binding-methods-to-class-instance-objects

这样做怎么样？声明类型为“ myClass”的全局变量，并在类的构造函数中对其进行初始化：

var _self: myClass;

class myClass {
    classScopeVar: string = "hello";

    constructor() {
        _self = this;
    }

    alerter() {
        setTimeout(function () {
            alert(_self.classScopeVar)
        }, 500);
    }
}

var classInstance = new myClass();
classInstance.alerter();

注意：重要的是，不要已经使用“ self”作为特殊含义。