blocks|key|1418139|text|你可以将上下文与匿名函数一起使用，只是有一点尴尬，因为‘jQuery.proxy()’是第二个参数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1418140|+$("#button").click($.proxy(function+()+{
+++++//use+original+'this'
+},this));|code-block|syntax|javascript|1418141|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.proxy/^0|S|E|S|E|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

You can use <a href="http://api.jquery.com/jQuery.proxy/"><code>jQuery.proxy()</code></a> with anonymous function, just a little awkward that 'context' is the second parameter.

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

blocks|key|1632706|text|我喜欢你的方式，实际上使用了类似的结构：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1632707|$('#available_input').bind('click',+{self:this},+this.onClick);|code-block|syntax|javascript|1632708|This.onClick的第一行：|1632709|var+self+=+event.data.self;|1632710|我喜欢这种方式，因为这样就可以在不使用闭包的情况下将元素和"+this“对象都作为self进行单击(如下所示)。|1632711|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I like your way, in fact use a similar construction:

<pre><code>$('#available_input').bind('click', {self:this}, this.onClick);
</code></pre>

and the first line of this.onClick:

<pre><code>var self = event.data.self;
</code></pre>

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.

blocks|key|1418099|text|jQuery具有jQuery.proxy方法(从1.4开始可用)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1418100|示例：|1418101|var+Foo+=+{
++name:+"foo",

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

$("#test").click($.proxy(Foo.test,+Foo))
//+"foo"+alerted|code-block|syntax|javascript|1418102|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.proxy/^0|8|C|8|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

jQuery has the <a href="http://api.jquery.com/jQuery.proxy/" rel="noreferrer"><code>jQuery.proxy</code></a> method (available since 1.4).

Example:

<pre><code>var Foo = {
 name: "foo",

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

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
</code></pre>

blocks|key|1632620|text|我不认为jQuery有这样的内置功能。但您可以使用如下所示的辅助构造：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1632621|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));|code-block|syntax|javascript|1632622|这样，您就可以使用createDelegate()创建动态的“包装函数”，该函数以给定的对象作为其“This”作用域来调用该方法。|1632623|示例：|1632624|function+foo()+{
++++alert(this);
}

var+myfoo+=+foo.createDelegate("foobar");
myfoo();+//+calls+foo()+with+this+=+"foobar"|1632625|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I don't think jQuery has a built-in feature for that. But you could use a helper construct like the following:

<pre><code>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));
</code></pre>

This way, you can create dynamic 'wrapper functions' with createDelegate() that call the method with a given object as its 'this' scope.

Example:

<pre><code>function foo() {
 alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"
</code></pre>

blocks|key|1418261|text|与HTML5兼容的浏览器在Function.prototype上提供了一个bind+method，这可能是最干净的语法，并且不依赖于框架，尽管它直到IE9才内置于IE中。(不过，有一个用于没有它的浏览器的polyfill。)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1418262|根据您的示例，您可以这样使用它：|1418263|jQuery('#available+input',+
++++++++this.controlDiv).bind('click',+this.availableCategoryClick.bind(this));|code-block|syntax|javascript|1418264|(附注:此语句中的第一个bind是jQuery的一部分，与Function.prototype.bind无关)|1418265|或者使用更简洁和最新的jQuery+(并消除两种不同类型的bind的混淆)：|1418266|$('#available+input',+this.controlDiv).click(this.availableCategoryClick.bind(this));|1418267|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill^0|D|I|11|B|0|2U|8|1|0|0|0|C|4|T|N|0|T|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]|$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|S|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

HTML 5-compliant browsers provide a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="nofollow">bind method</a> on <code>Function.prototype</code> which is, probably the cleanest syntax and is not framework-dependent, though it is not built into IE until IE 9. (There is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill" rel="nofollow">polyfill</a> for browsers without it, though.)

Based on your example, you can use it like this:

<pre><code>jQuery('#available input', 
 this.controlDiv).bind('click', this.availableCategoryClick.bind(this));
</code></pre>

(side note: the first <code>bind</code> in this statement is part of jQuery and has nothing to do with <code>Function.prototype.bind</code>)

Or to use slightly more concise and up-to-date jQuery (and eliminate confusion from two different kinds of <code>bind</code>s):

<pre><code>$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));
</code></pre>

blocks|key|1632802|text|您可以像这样使用javascript+bind方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1632803|var+coolFunction+=+function(){
++//+here+whatever+involving+this
+++++alert(this.coolValue);
}

var+object+=+{coolValue:+"bla"};


$("#bla").bind('click',+coolFunction.bind(object));|code-block|syntax|javascript|1632804|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind^0|J|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

you can use the javascript <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" rel="nofollow">bind</a> method like this:

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

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));
</code></pre>

blocks|key|1418005|text|jQuery不支持绑定，首选方法是使用函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1418006|因为在Javascript中，this.availableCategoryClick并不意味着对此对象调用availableCategoryClick函数，所以jQuery建议使用以下首选语法：|1418007|var+self+=+this;
jQuery('#available+input',+self.controlDiv).bind('click',+function(event)
{
+++self.availableCategoryClick(event);
});|code-block|syntax|javascript|1418008|Javascript中的OO概念很难理解，函数式编程通常更容易和更易读。|1418009|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

jQuery does not support binds and the preferred way is to use functions.

Because in Javascript, this.availableCategoryClick does not mean calling the availableCategoryClick function on this object, jQuery advise to use this preferred syntax:

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

OO concepts in Javascript are hard to understand, functionnal programming is often easier and more readable.

blocks|key|1418056|text|鉴于函数改变了作用域，最常见的方法是手动完成，比如var+self+=+this。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1418057|var+self+=+this

$('.some_selector').each(function(){
++//+refer+to+'self'+here
}|code-block|syntax|javascript|1418058|entityMap^0|P|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Seeing that functions changes scope, the most common way is to do it by hand, with something like <code>var self = this</code>.

<pre><code>var self = this

$('.some_selector').each(function(){
 // refer to 'self' here
}
</code></pre>

I have created a 'control' using jQuery and used jQuery.extend to assist in making it as OO as possible.

During the initialisation of my control I wire up various click events like so

<pre><code>jQuery('#available input', 
 this.controlDiv).bind('click', this, this.availableCategoryClick);
</code></pre>

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 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.

What is the jQuery way?

Controlling the value of 'this' in a jQuery event

我已经使用jQuery创建了一个“控件”，并使用jQuery.extend来帮助它尽可能地成为面向对象的。在我的控件初始化期间，我连接了各种单击事件，如下所示jQuery('#available input',             this.controlDiv).bind('click', this, this.availableCategoryClick);请注意，我将'this‘作为绑定

问控制jQuery事件中的“this”的值
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问控制jQuery事件中的“this”的值EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问控制jQuery事件中的“this”的值
EN