Từ khóa "này" trong các phương thức sự kiện khi sử dụng đối tượng nguyên mẫu JavaScript

Question

Tôi đang cố gắng truy cập các biến thành viên của một lớp mẫu trong JavaScript trong trình xử lý sự kiện - thứ mà tôi thường sử dụng từ khóa "này" (hoặc "đó" [bản sao của điều này] trong trường hợp xử lý sự kiện). Không cần phải nói, tôi đang gặp rắc rối.

Lấy ví dụ, đoạn mã này HTML:

<a id="myLink" href="#">My Link</a> 

Và mã JavaScript này:

function MyClass() 
{ 
    this.field = "value" 
    this.link = document.getElementById("myLink"); 
    this.link.onclick = this.EventMethod; 
} 

MyClass.prototype.NormalMethod = function() 
{ 
    alert(this.field); 
} 

MyClass.prototype.EventMethod = function(e) 
{ 
    alert(this.field); 
} 

Instantiating một đối tượng MyClass và gọi NormalMethod hoạt động chính xác như tôi mong đợi nó (cảnh báo nói rằng " giá trị "), nhưng nhấp vào liên kết dẫn đến giá trị không xác định vì từ khóa" này "hiện tham chiếu đến mục tiêu sự kiện (phần tử HTML anchor).

Tôi mới đến nguyên mẫu JavaScript phong cách, nhưng trong quá khứ, với đóng cửa, tôi đã chỉ đơn giản là tạo ra một bản sao của "này" trong constructor:

var that = this; 

Và sau đó tôi có thể truy cập vào các thành viên các biến trong các phương thức sự kiện thông qua đối tượng "đó". Điều đó dường như không hoạt động với mã nguyên mẫu. Có cách nào khác để đạt được điều này không?

Cảm ơn.

Answer 1

bạn "that=this" đóng thành ngữ vẫn còn áp dụng:

function MyClass() 
{ 
    ... 

    var that = this; 
    this.link.onclick = function() { 
     return that.EventMethod.apply(that, arguments); 

     // that.EventMethod() works too here, however 
     // the above ensures that the function closure 
     // operates exactly as EventMethod itself does. 

    }; 
} 

Answer 2

Bạn nên cố gắng

this.link.onclick = this.EventMethod.bind(this); 

Answer 3

Bạn cần:

this.link.onclick = this.EventMethod.bind(this); 

... 'ràng buộc' là một phần của Prototype, và trả về một hàm gọi phương thức của bạn bằng 'this' được đặt chính xác.

Answer 4

Như đã nêu ở trên, việc sử dụng liên kết là một phần của thư viện Prototype là một cách rõ ràng để giải quyết vấn đề này. Câu hỏi này là một bản sao của người khác SO câu hỏi được trả lời ở đây với việc thực hiện các phương pháp ràng buộc mà không bao gồm toàn bộ thư viện mẫu:

https://stackoverflow.com/a/2025839/1180286