Kiểm soát giá trị của 'this' trong một sự kiện jQuery

Question

Tôi đã tạo ra một 'điều khiển' bằng cách sử dụng jQuery và sử dụng jQuery.extend để hỗ trợ làm cho nó thành OO nhất có thể.

Trong initialisation tầm kiểm soát của tôi, tôi dây lên các sự kiện nhấp chuột khác nhau như vậy

jQuery('#available input', 
      this.controlDiv).bind('click', this, this.availableCategoryClick); 

Chú ý rằng tôi đang Pasing 'này' như là đối số dữ liệu trong phương pháp ràng buộc. Tôi làm điều này để tôi có thể lấy dữ liệu được gắn vào cá thể điều khiển thay vì từ phần tử kích hoạt sự kiện nhấn.

này hoạt động hoàn hảo, tuy nhiên tôi nghi ngờ có một cách tốt hơn

Sau khi sử dụng thử nghiệm trong quá khứ, tôi nhớ một cú pháp ràng buộc cho phép bạn kiểm soát những gì giá trị của 'này' là trong sự kiện này.

Cách jQuery là gì?

Answer 1

Bạn có thể sử dụng jQuery.proxy() với chức năng ẩn danh, chỉ là một chút vụng về đó là bối cảnh 'là tham số thứ hai.

$("#button").click($.proxy(function() { 
    //use original 'this' 
},this)); 

Answer 2

Tôi không nghĩ jQuery có tính năng tích hợp cho điều đó. Nhưng bạn có thể sử dụng một helper xây dựng như sau:

Function.prototype.createDelegate = function(scope) { 
    var fn = this; 
    return function() { 
     // Forward to the original function using 'scope' as 'this'. 
     return fn.apply(scope, arguments); 
    } 
} 

// Then: 
$(...).bind(..., obj.method.createDelegate(obj)); 

Bằng cách này, bạn có thể tạo 'chức năng wrapper' năng động với createDelegate() mà gọi phương thức với một đối tượng nhất định như phạm vi 'này' của nó.

Ví dụ:

function foo() { 
    alert(this); 
} 

var myfoo = foo.createDelegate("foobar"); 
myfoo(); // calls foo() with this = "foobar" 

Answer 3

jQuery không hỗ trợ với phím tắt và cách ưa thích là sử dụng chức năng này.

Bởi vì trong Javascript, this.availableCategoryClick không có nghĩa là gọi hàm availableCategoryClick trên đối tượng này, jQuery tư vấn để sử dụng cú pháp ưa thích này:

var self = this; 
jQuery('#available input', self.controlDiv).bind('click', function(event) 
{ 
    self.availableCategoryClick(event); 
}); 

khái niệm OO trong Javascript là khó hiểu, lập trình functionnal thường dễ dàng hơn và dễ đọc hơn.

Answer 4

Thấy rằng chức năng thay đổi phạm vi, cách phổ biến nhất là làm điều đó bằng tay, với một cái gì đó như var self = this.

var self = this 

$('.some_selector').each(function(){ 
    // refer to 'self' here 
} 

Answer 5

Tôi thích theo cách của bạn, trên thực tế sử dụng một cấu trúc tương tự:

$('#available_input').bind('click', {self:this}, this.onClick); 

và dòng đầu tiên của this.onClick:

var self = event.data.self; 

Tôi thích cách này bởi vì sau đó bạn sẽ có được cả phần tử được nhấp (như thế này) và đối tượng "này" là tự mà không phải sử dụng các bao đóng.

Answer 6

jQuery có phương thức jQuery.proxy (có sẵn từ 1.4).

Ví dụ:

var Foo = { 
    name: "foo", 

    test: function() { 
    alert(this.name) 
    } 
} 

$("#test").click($.proxy(Foo.test, Foo)) 
// "foo" alerted 

Answer 7

bạn có thể sử dụng phương pháp javascript bind như thế này:

var coolFunction = function(){ 
    // here whatever involving this 
    alert(this.coolValue); 
} 

var object = {coolValue: "bla"}; 


$("#bla").bind('click', coolFunction.bind(object)); 

Answer 8

HTML trình duyệt 5-compliant cung cấp một bind method trên Function.prototype đó là, có lẽ là cú pháp sạch và không phải là khuôn khổ phụ thuộc, mặc dù nó không được tích hợp vào IE cho đến IE 9. (Tuy nhiên, có polyfill đối với các trình duyệt không có nó.)

Dựa trên ví dụ của bạn, bạn có thể sử dụng nó như sau:

jQuery('#available input', 
     this.controlDiv).bind('click', this.availableCategoryClick.bind(this)); 

(phụ lưu ý: bind đầu tiên trong bản Tuyên Bố này là một phần của jQuery và không có gì để làm với Function.prototype.bind)

Hoặc sử dụng hơi ngắn gọn hơn và to-date up-jQuery (và tránh nhầm lẫn từ hai loại khác nhau của bind s):

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));