Làm thế nào để vượt qua "này" để cửa sổ setInterval

Question

Giả sử tôi có một chức năng một:

function a() { 
    this.b = 1; 
    this.set = setInterval(function() {console.log(this.b);}, 200); 
} 

Vì vậy, khi a.set() được gọi là chức năng ẩn danh sẽ được gọi. Nhưng điều này sẽ không hoạt động như lúc này khi hàm được kích hoạt trỏ tới đối tượng cửa sổ. Ngoài ra, không nên sử dụng a.b vì có thể có nhiều phiên bản của a.

Giải pháp tốt cho vấn đề này là gì?

Answer 1

Lưu trữ một tham chiếu đến this:

function a() { 
    var self = this; 
    self.b = 1; 
    self.set = setInterval(function() {console.log(self.b);}, 200); 
} 

Chức năng vô danh mà bạn vượt qua để setInterval có quyền truy cập vào bất kỳ biến trong phạm vi chứa nó, nghĩa là, bất kỳ biến địa phương của function a(). Sự kỳ diệu của việc đóng cửa JS giữ cho các biến này còn sống ngay cả sau khi a() đã hoàn thành và mỗi yêu cầu a() bị đóng cửa riêng.

Answer 2

Chỉ cần lưu this tài liệu tham khảo của bạn trong một số biến khác, đó không phải là ghi đè bởi các window -call sau này. Sau đó, bạn có thể sử dụng biến đó để tham chiếu đến đối tượng mà bạn đã bắt đầu.

function a() { 
    this.b = 1; 
    var that = this; 
    this.set = setInterval(function() {console.log(that.b);}, 200); 
} 

Answer 3

Trong trường hợp của bạn, bạn có thể chỉ đơn giản là:

function a() { 
    var _this = this; 
    this.b = 1; 
    this.set = setInterval(function() { 
     console.log(_this.b); 
    }, 200); 
} 

Thông thường, chúng ta cũng có thể có một phương pháp helper Function.prototype.bind để sửa chữa các this tham khảo.

Answer 4

này sẽ là giải pháp sạch nhất, vì hầu hết thời gian bạn thực sự muốn chuyển sang bối cảnh này cho phương pháp liên tiếp của bạn gọi:

// store scope reference for our delegating method 
    var that = this; 
    setInterval(function() { 
     // this would be changed here because of method scope, 
     // but we still have a reference to that 
     OURMETHODNAME.call(that); 
    }, 200); 

Answer 5

Kể từ khi chúng tôi có ES6 bây giờ, tôi nghĩ rằng chúng ta cần câu trả lời khác ở đây :

Sử dụng chức năng mũi tên:

function a() { 
    this.b = 1; 
    this.set = setInterval(() => {console.log(this.b);}, 200); 
} 

chức năng mũi tên, đối diện với các chức năng bình thường, không có một bối cảnh this trên của họ sở hữu. Điều này có nghĩa là bạn có quyền truy cập vào bên ngoài this.