在jQuery事件中控制“this”的值

我创build了一个使用jQuery的“控件”，并使用jQuery.extend协助将其作为OO。

在我的控制初始化期间，我会连接各种点击事件 

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

请注意，我将“this”作为bind方法中的数据参数。 我这样做，以便我可以将数据附加到控件实例，而不是触发click事件的元素。

这工作完美，但我怀疑有一个更好的办法

在过去使用Prototype的时候，我记得一个绑定语法，它允许你控制'this'的值是什么。

什么是jQuery的方式？

您可以使用jQuery.proxy()与匿名函数，只是有点尴尬，'上下文'是第二个参数。 

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

我喜欢你的方式，实际上使用类似的结构： 

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

和第一行this.onClick： 

 var self = event.data.self;

我喜欢这种方式，因为那样你就可以将单击的元素（作为this）和“this”对象作为自己，而不必使用闭包。

jQuery有jQuery.proxy方法（从1.4开始可用）。

例： 

 var Foo = { name: "foo", test: function() { alert(this.name) } } $("#test").click($.proxy(Foo.test, Foo)) // "foo" alerted

我不认为jQuery有一个内置的function。 但是你可以使用像下面这样的helper构造： 

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

这样，你就可以用createDelegate（）创builddynamic的“包装函数”，它调用给定对象的方法作为它的“this”范围。

例： 

 function foo() { alert(this); } var myfoo = foo.createDelegate("foobar"); myfoo(); // calls foo() with this = "foobar"

你可以使用这样的JavaScript 绑定方法： 

 var coolFunction = function(){ // here whatever involving this alert(this.coolValue); } var object = {coolValue: "bla"}; $("#bla").bind('click', coolFunction.bind(object));

符合HTML 5的浏览器在Function.prototype上提供了一个绑定方法 ，它可能是最干净的语法，并且不依赖于框架，尽pipe在IE 9之前它并没有被构build到IE中。（但是没有它的浏览器有一个polyfill 。 ）

根据你的例子，你可以像这样使用它： 

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

（注意：这个语句中的第一个bind是jQuery的一部分，与Function.prototype.bind无关）

或者使用更简洁和最新的jQuery（并消除来自两种不同bind的混淆）： 

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

jQuery不支持绑定，首选的方法是使用函数。

因为在Javascript中，this.availableCategoryClick并不意味着在这个对象上调用availableCategoryClick函数，jQuerybuild议使用这个首选的语法： 

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

Javascript中的OO概念很难理解，函数式编程通常更容易，更具可读性。

看到函数改变了范围，最常见的方法就是用var self = this东西手工完成。 

 var self = this $('.some_selector').each(function(){ // refer to 'self' here }
Interesting Posts