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

我已经使用 jQuery 创建了一个“控件”，并使用 jQuery.tended 来帮助它尽可能地面向对象。

在控件的初始化过程中，我将各种类似的点击事件连接起来

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

请注意，我将“ this”作为 bind 方法中的数据参数传递。我这样做是为了能够从触发 click 事件的元素获取附加到控件实例的数据。

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

在过去使用过 Prototype 之后，我记得一个绑定语法，它允许您控制‘ this’在事件中的值。

JQuery 的方式是什么？

70127 次浏览
小开

我不认为 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));

通过这种方式，您可以创建动态的“包装函数”(wrapper function) ，它使用一个给定的对象作为“ This”作用域来调用方法。

例如:

function foo() {
alert(this);
}


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

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

因为在 Javascript 中，this.ailableCategory oryClick 并不意味着调用这个对象上的可用类别点击函数，所以 jQuery 建议使用这种首选语法:

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

Javascript 中的面向对象概念很难理解，函数式编程通常更容易读懂。

小开

看到函数改变了作用域，最常见的方法是手工完成，比如使用 var self = this。

var self = this


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

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

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

以及这个的第一行. onClick:

var self = event.data.self;

我喜欢这种方式，因为这样就可以同时点击元素(像这样)和“ this”对象，而不必使用闭包。

小开

JQuery 具有 jQuery.proxy方法(从1.4开始可用)。

例如:

var Foo = {
name: "foo",


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


$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
小开
最佳答案

您可以将 jQuery.proxy()与匿名函数一起使用，只是有点尴尬，因为‘ context’是第二个参数。

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

你可以这样使用 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上提供了一个 绑定法绑定法，这可能是最干净的语法，并且不依赖于框架，尽管它直到 IE 9才内置。(不过，没有 填料的浏览器也有 填料。)

基于你的例子，你可以这样使用它:

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

提交答案