Javascript lấy tham chiếu đến đối tượng/lớp cha từ trình xử lý sự kiện

Question

Tôi có một lớp (hoặc đối tượng chứa hàm; tôi đã nghe nói rằng không có lớp nào như lớp Javascript) được gọi là Foo, với trình xử lý sự kiện được đính kèm cho sự kiện nhấp chuột. Khi xử lý sự kiện được gọi, tôi muốn sửa đổi một thuộc tính của lớp Foo của tôi. Thông thường, tôi sẽ sử dụng từ khóa this, nhưng trong trình xử lý sự kiện, tham chiếu this được đặt thành tham chiếu đến phần tử html. Đây là mã của tôi:

function Foo() { 

    this.num=0; 
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element. 

    this.eventHandler=function() { 
     this.num++;// This doesn't work. 
     // Normally, "this" would refer to my instance of Foo, 
     // but as an event handler, "this" refers to the html element. 
    } 
} 

Vì vậy, câu hỏi của tôi là: làm thế nào để tôi nhận được một tài liệu tham khảo để dụ của tôi về Foo vào xử lý sự kiện của tôi để tôi có thể sửa đổi thuộc tính của nó (như num)?

Answer 1

function Foo() { 
    var _self = this; 
    this.num=0; 

    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element. 

    this.eventHandler=function() { 
     _self.num++; 
    } 
} 

sử dụng một tài liệu tham khảo _self = this định nghĩa trong phạm vi bên ngoài

Answer 2

Bạn có thể lưu trữ một tham chiếu đến this trong constructor mà bạn có thể truy cập trong xử lý sự kiện của bạn.

function Foo() { 

    this.num=0; 
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element. 

    var that = this; 
    this.eventHandler=function() { 
     that.num++;// This doesn't work. 
    } 
} 

Answer 3

Bạn cần ràng buộc ngữ cảnh của hàm; khác this sẽ là đối tượng toàn cầu:

$('element').click($.proxy(this.eventHandler, this)); 

Trong một trình duyệt hiện đại, bạn cũng có thể sử dụng Function.prototype.bind:

$('element').click(this.eventHandler.bind(this)) 

Answer 4

function Foo() { 
    this.num=0; 
    $(document).on('click', 'element', this, this.eventHandler); 
    this.eventHandler=function(e) { 
     var _this = e.data; 
     _this.num++; 
    } 
} 

1) Sử dụng JQuery trên phương pháp() để đính kèm nghe sự kiện. 2) Sử dụng tham chiếu _this để truy cập lớp cha.