类方法中的打字稿“this”

Question

我知道这可能是非常基本的，但我很难理解它。

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() 访问的 a() 函数，因为我觉得我正在写两次相同的东西？正常吗？

Answer 1

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

Answer 2

如果你想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;      
}

View this in the TypeScript Playground

可以看到，在生成的 JavaScript this 被捕获在函数调用之外：

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

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

了解更多：“Understanding this in TypeScript” (4:05) – YouTube

Answer 3

如果你这样写你的方法，'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));
    }
}

Answer 4

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

Answer 5

当您将函数作为回调传递时，就会出现问题。到回调执行时，“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 的值。

Answer 6

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

其他答案，包括接受的答案，错过了一个关键点：

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

Answer 7

这样做怎么样？ 声明一个“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();

注意：重要的是不要使用“自我”，因为它已经具有特殊含义。