在 jQuery 事件中控制“this”的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/520019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Controlling the value of 'this' in a jQuery event
提问by Pat Long - Munkii Yebee
I have created a 'control' using jQuery and used jQuery.extend to assist in making it as OO as possible.
我已经使用 jQuery 创建了一个“控件”，并使用 jQuery.extend 来帮助它尽可能地面向对象。
During the initialisation of my control I wire up various click events like so
在我的控件初始化期间，我像这样连接了各种点击事件
jQuery('#available input',
this.controlDiv).bind('click', this, this.availableCategoryClick);
Notice that I am pasing 'this' as the data argument in the bind method. I do this so that I can get at data attached to the control instance rather from the element that fires the click event.
请注意，我将“this”作为绑定方法中的数据参数传递。我这样做是为了我可以获取附加到控件实例的数据，而不是来自触发单击事件的元素。
This works perfectly, however i suspect there is a better way
这很完美，但是我怀疑有更好的方法
Having used Prototype in the past, I remember a bind syntax that allowed you to control what the value of 'this' was in the event.
过去使用过 Prototype，我记得有一个绑定语法，它允许您控制事件中 'this' 的值。
What is the jQuery way?
什么是jQuery方式？
回答by Torbj?rn Nomell
You can use jQuery.proxy()with anonymous function, just a little awkward that 'context' is the second parameter.
您可以使用jQuery.proxy()匿名函数，只是有点尴尬，'context' 是第二个参数。
$("#button").click($.proxy(function () {
//use original 'this'
},this));
回答by davidfurber
I like your way, in fact use a similar construction:
我喜欢你的方式，实际上使用类似的结构：
$('#available_input').bind('click', {self:this}, this.onClick);
and the first line of this.onClick:
和 this.onClick 的第一行：
var self = event.data.self;
I like this way because then you get both the element clicked (as this) and the "this" object as self without having to use closures.
我喜欢这种方式，因为这样你就可以同时点击元素（作为这个）和“这个”对象作为 self 而不必使用闭包。
回答by benpickles
jQuery has the jQuery.proxymethod (available since 1.4).
jQuery 有jQuery.proxy方法（从 1.4 开始可用）。
Example:
例子：
var Foo = {
name: "foo",
test: function() {
alert(this.name)
}
}
$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
回答by Ferdinand Beyer
I don't think jQuery has a built-in feature for that. But you could use a helper construct like the following:
我不认为 jQuery 有一个内置的功能。但是您可以使用如下所示的辅助结构：
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));
This way, you can create dynamic 'wrapper functions' with createDelegate() that call the method with a given object as its 'this' scope.
通过这种方式，您可以使用 createDelegate() 创建动态的“包装函数”，这些函数使用给定的对象作为其“this”作用域调用方法。
Example:
例子：
function foo() {
alert(this);
}
var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"
回答by JLRishe
HTML 5-compliant browsers provide a bind methodon Function.prototypewhich is, probably the cleanest syntax and is not framework-dependent, though it is not built into IE until IE 9. (There is a polyfillfor browsers without it, though.)
符合 HTML 5 的浏览器提供了一种绑定方法，Function.prototype它可能是最简洁的语法并且不依赖于框架，尽管它直到 IE 9 才内置到 IE 中。（不过，没有它的浏览器有一个polyfill。）
Based on your example, you can use it like this:
根据您的示例，您可以像这样使用它：
jQuery('#available input',
this.controlDiv).bind('click', this.availableCategoryClick.bind(this));
(side note: the first bindin this statement is part of jQuery and has nothing to do with Function.prototype.bind)
（旁注：bind此语句中的第一个是 jQuery 的一部分，与 无关Function.prototype.bind）
Or to use slightly more concise and up-to-date jQuery (and eliminate confusion from two different kinds of binds):
或者使用更简洁和最新的 jQuery（并消除两种不同类型的混淆bind）：
$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));
回答by Orlando
回答by Vincent Robert
jQuery does not support binds and the preferred way is to use functions.
jQuery 不支持绑定，首选方式是使用函数。
Because in Javascript, this.availableCategoryClick does not mean calling the availableCategoryClick function on this object, jQuery advise to use this preferred syntax:
因为在 Javascript 中， this.availableCategoryClick 并不意味着在这个对象上调用 availableCategoryClick 函数，jQuery 建议使用这种首选语法：
var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
self.availableCategoryClick(event);
});
OO concepts in Javascript are hard to understand, functionnal programming is often easier and more readable.
Javascript 中的 OO 概念很难理解，函数式编程通常更容易和更易读。
回答by August Lilleaas
Seeing that functions changes scope, the most common way is to do it by hand, with something like var self = this.
看到函数改变作用域，最常见的方法是手工完成，比如var self = this.
var self = this
$('.some_selector').each(function(){
// refer to 'self' here
}
