jquery - Typescript "this" bên trong một phương thức lớp

Tôi biết điều này có lẽ rất cơ bản một cách đau đớn, nhưng tôi đang gặp khó khăn trong việc hiểu nó.

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

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

}

Có vẻ như tôi cần một proxy, vậy hãy nói là sử dụng Jquery

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

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

}

Nhưng xuất thân từ nền tảng Actionscript 3, tôi không thực sự chắc chuyện gì đang xảy ra ở đây. Xin lỗi, tôi không chắc nơi nào Javascript bắt đầu và TypeScript kết thúc.

updateProxy: () => void

Và cũng thế, tôi không chắc mình đang làm đúng. Điều cuối cùng tôi muốn là phần lớn lớp của tôi có một hàm a() mà cần được truy cập bằng aProxy() vì tôi cảm thấy mình đang viết cùng một thứ hai lần? Liệu điều này có bình thường không?

Câu trả lời #1

Nếu bạn muốn này được ghi lại, cách làm trong TypeScript là thông qua các hàm mũi tên. Trích dẫn Anders:

this trong các hàm mũi tên có phạm vi từ vựng

Đây là cách tôi thích sử dụng điều này để có lợi cho mình:

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;      
}

Xem cái này trong TypeScript Playground

Bạn có thể thấy rằng trong JavaScript được tạo, this được nắm bắt bên ngoài lời gọi hàm:

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

vì vậy giá trị this bên trong cuộc gọi hàm (có thể là window) sẽ không được sử dụng.

Để tìm hiểu thêm: “Hiểu this trong TypeScript” (4:05) - YouTube

Câu trả lời #2

Nếu bạn viết các phương thức của mình như thế này, 'this' sẽ được xử lý theo cách bạn mong đợi.

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

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

Một lựa chọn khác sẽ là ràng buộc 'this' với cuộc gọi hàm:

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

    update(): void
    {
        requestAnimationFrame(this.update.bind(this));
    }
}