我有以下函数调用:
$(".selector").on("click", callback.bind(this, param1, param2));
在我的回调函数中,我想使用绑定this以及函数作用域中的this。
这可以以某种方式完成吗?
答案 0 :(得分:3)
在我的回调函数中,我想使用绑定this以及函数范围中的this。
在特定示例中,您可以使用事件的currentTarget
属性:
function callback(p1, p2, e) {
// Use e.currentTarget
}
请注意,我们有p1
和p2
,它们是绑定到回调的参数,后跟e
,这是点击发生时传递的事件参数。
但是,在常规情况下,您不希望Function#bind
,因为它会阻止您访问调用该函数的this
。
您可以为自己提供一个Function#curry
(请参阅下面有关该名称的原因)单独留下this
,然后咖喱当前的this
,例如:
$(".selector").on("click", callback.curry(this, param1, param2));
curry
的未经优化的版本如下所示:
Function.prototype.curry = function() {
var f = this;
var boundArgs = Array.prototype.slice.call(arguments);
return function() {
return f.apply(this, boundArgs.concat(Array.prototype.slice.call(arguments)));
};
};
直播示例:
Function.prototype.curry = function() {
var f = this;
var boundArgs = Array.prototype.slice.call(arguments);
return function() {
return f.apply(this, boundArgs.concat(Array.prototype.slice.call(arguments)));
};
};
var obj = {
foo: 42,
method: function() {
$(".selector").on("click", callback.curry(this, "param1", "param2"));
}
};
obj.method();
function callback(t, p1, p2, e) {
snippet.log("t.foo = " + t.foo);
snippet.log("this.tagName = " + this.tagName);
snippet.log("e.currentTarget.tagName = " + e.currentTarget.tagName);
snippet.log("p1 = " + p1);
snippet.log("p2 = " + p2);
}
<div class="selector">Click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
为什么curry
?
在数学家Haskell Curry之后,从另一个函数创建一个函数,其中(某些)函数的参数预先提供,称为“currying”。它也被称为“部分应用”,虽然我认为(这不是我的专业领域)该术语具有更具体的含义,至少在函数式编程中(例如你在Haskell语言中所做的那种 - 也以Haskell Curry命名) )。
答案 1 :(得分:0)
当你的回调中的这个属于回调绑定的范围而不属于事件的范围时。
这可能有效,但我不确定我明白你要做什么
$(".selector").on("click", function(event){
callback.bind(event.type, param1, param2)
});
这指向您的事件发生的dom元素 虽然事件已经有你要传递给第二个绑定的类型(第二个因为理论上你的.on()也是一个绑定)