Sử dụng jQuery $ (điều này) với ES6 Mũi tên Chức năng (từ vựng này ràng buộc)

Question

Sử dụng chức năng mũi tên ES6 với từ vựng this ràng buộc là rất tốt.

Tuy nhiên, tôi chạy vào một vấn đề lúc nãy sử dụng nó với một jQuery điển hình ràng buộc nhấp chuột:

class Game { 
    foo() { 
    self = this; 
    this._pads.on('click', function() { 
     if (self.go) { $(this).addClass('active'); } 
    }); 
    } 
} 

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

class Game { 
    foo() { 
    this._pads.on('click',() => { 
     if (this.go) { $(this).addClass('active'); } 
    }); 
    } 
} 

Và sau đó $(this) được chuyển đổi sang ES5 (tự = này) loại đóng cửa.

Có phải cách để Traceur bỏ qua "$ (this)" này để liên kết từ vựng không?

Answer 1

Điều này không liên quan gì đến Traceur và tắt thứ gì đó, đây đơn giản là cách ES6 hoạt động. Đó là chức năng cụ thể mà bạn đang yêu cầu bằng cách sử dụng => thay vì function() { }.

Nếu bạn muốn viết ES6, bạn cần phải viết ES6 mọi lúc, bạn không thể chuyển vào và ra khỏi nó trên một số mã nhất định, và bạn chắc chắn không thể ngăn chặn hoặc thay đổi cách hoạt động của =>. Thậm chí nếu bạn có thể, bạn chỉ cần cập nhật một số phiên bản JavaScript kỳ quái mà bạn chỉ hiểu và điều đó sẽ không bao giờ hoạt động chính xác bên ngoài Traceur được tùy chỉnh của bạn, mà chắc chắn không phải là điểm của Traceur.

Cách để giải quyết vấn đề cụ thể này không phải là để sử dụng this để đạt được quyền truy cập vào các yếu tố nhấp, nhưng thay vì sử dụng event.currentTarget:

Class Game { 
    foo(){ 
    this._pads.on('click', (event) => { 
     if(this.go) { 
     $(event.currentTarget).addClass('active'); 
     } 
    }); 
    } 
} 

jQuery cung cấp event.currentTarget đặc biệt bởi vì, ngay cả trước khi ES6, nó không phải là luôn luôn có thể cho jQuery để áp đặt một this trên hàm callback (ví dụ, nếu nó được liên kết với bối cảnh khác qua bind.

Answer 2

ràng buộc tổ chức sự kiện

$button.on('click', (e) => { 
    var $this = $(e.currentTarget); 
    // ... deal with $this 
}); 

Vòng

Array.prototype.forEach.call($items, (el, index, obj) => { 
    var $this = $(el); 
    // ... deal with $this 
}); 

Answer 3

(Đây là một câu trả lời tôi đã viết cho một phiên bản khác của câu hỏi này, trước khi tìm hiểu đó là một bản sao của câu hỏi này. Tôi nghĩ câu trả lời sẽ thu thập thông tin khá rõ ràng nên tôi quyết định thêm thông tin đó làm wiki cộng đồng, mặc dù phần lớn chỉ là một câu trả lời khác.)

Bạn không thể. Đó là một nửa điểm của các chức năng mũi tên, chúng đóng trên this thay vì có riêng của chúng được thiết lập bởi cách chúng được gọi. Đối với trường hợp sử dụng trong câu hỏi, nếu bạn muốn this đặt bởi jQuery khi gọi trình xử lý, trình xử lý sẽ cần phải là hàm function.

Nhưng nếu bạn có một lý do cho việc sử dụng một mũi tên (có lẽ bạn muốn sử dụng this cho những gì nó có nghĩa là bên ngoài vào mũi tên), bạn có thể sử dụng e.currentTarget thay vì this nếu bạn thích:

class Game { 
    foo(){ 
    this._pads.on('click', e => {     // Note the `e` argument 
     if(this.go) { 
     $(e.currentTarget).addClass('active');  // Using it 
     } 
    }); 
    } 
} 

Các currentTarget trên đối tượng sự kiện giống như những gì jQuery đặt this khi gọi trình xử lý của bạn.

Answer 4

Trường hợp khác

Câu trả lời hàng đầu là chính xác và tôi đã bỏ phiếu.

Tuy nhiên, có một trường hợp khác:

$('jquery-selector').each(() => { 
    $(this).click(); 
}) 

thể được cố định như:

$('jquery-selector').each((index, element) => { 
    $(element).click(); 
})