Bir jQuery etkinliğinde 'this' değerini denetleme

Question

jQuery'yi kullanarak bir 'control' oluşturdum ve mümkün olduğunca OO yapmasına yardımcı olmak için jQuery.extend'i kullandım. Ben pasing ediyorum bu yüzden

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

Bildirimi gibi çeşitli tıklama olayları kadar Tel benim kontrolüm açılışı sırasında

'bu' bağlamak yöntemindeki verilerin bağımsız değişken olarak. Bunu, tıklatma olayını tetikleyen öğeden ziyade denetim örneğine bağlı verilere ulaşabilmem için yapıyorum.

Ancak bu i sana değeri 'bu' olay oldu denetlemek için izin verilen bir bağlama sözdizimi hatırlamak, geçmişte Prototype kullanmış daha iyi bir yolu

yoktur şüpheli mükemmel çalışıyor.

jQuery yolu nedir?

Answer 1

Sen 'bağlam' İkinci parametre olduğunu sadece biraz garip, anonim fonksiyonu ile jQuery.proxy() kullanabilirsiniz.

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

Answer 2

jQuery'nin bunun için yerleşik bir özelliği olduğunu sanmıyorum. Ama eğer bir yardımcı aşağıdaki gibi inşa kullanabilirsiniz:

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)); 

Bu şekilde, onun 'bu' kapsamı gibi belirli bir nesne ile yöntemini çağırın CreateDelegate() ile dinamik 'sarıcı işlevleri' oluşturabilir.

Örnek:

function foo() { 
    alert(this); 
} 

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

Answer 3

jQuery desteklemez bağlanır ve tercih edilen bir yol fonksiyonlarını kullanmaktır.

JavaScript, this.availableCategoryClick bu nesne üzerinde availableCategoryClick işlevini çağırarak anlamına gelmez, çünkü jQuery bu tercih sözdizimi kullanmayı tavsiye: JavaScript

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

OO kavramları anlamak zordur, functionnal programlama genellikle daha kolay ve okunabilir.

Answer 4

İşlevlerin kapsamı değiştirdiğini görmenin en yaygın yolu, var self = this gibi bir şeyle el ile yapmaktır. Ben senin gibi seviyorum

var self = this 

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

Answer 5

aslında benzer bir yapıya kullanın: o zaman olsun çünkü bu şekilde gibi

var self = event.data.self; 

:

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

ve this.onClick ilk satırı her iki öğe de (bu şekilde) ve "bu" nesneyi tıklamaları kullanmadan kendiliğinden tıklattı.

Answer 6

jQuery, jQuery.proxy yöntemine sahiptir (1.4'ten beri kullanılabilir).

Örnek:

var Foo = { 
    name: "foo", 

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

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

Answer 7

böyle javascript bind yöntemi kullanabilirsiniz: 5 uyumlu tarayıcılar sağlamak

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

var object = {coolValue: "bla"}; 


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

Answer 8

HTML bir bind method, muhtemelen en temiz sözdizimi ve onunla birlikte, çerçeve bağımlı olmadığı Function.prototype üzerinde IE 9. kadar IE yerleşik değildir (gerçi, o olmadan tarayıcılar için bir polyfill yoktur.) sizin örnek dayanarak

, bu gibi kullanabilirsiniz:

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

(yan not: bu açıklamada ilk bind jQuery bir parçasıdır ve Function.prototype.bind ile ilgisi yoktur)

Veya biraz daha özlü ve en güncel jQuery kullanmak (ve gelen karışıklığı ortadan kaldırmak için bind s iki farklı türde): jQuery OO daha işlevsel beri jQuery OO yapmaya çalışıyoruz neden

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