在绑定了bind()的函数中使用绑定this和this函数作用域

时间:2015-08-28 08:38:02

标签: javascript jquery

我有以下函数调用:

$(".selector").on("click", callback.bind(this, param1, param2));

在我的回调函数中,我想使用绑定this以及函数作用域中的this。

这可以以某种方式完成吗?

2 个答案:

答案 0 :(得分:3)

  

在我的回调函数中,我想使用绑定this以及函数范围中的this。

特定示例中,您可以使用事件的currentTarget属性:

function callback(p1, p2, e) {
    // Use e.currentTarget
}

请注意,我们有p1p2,它们是绑定到回调的参数,后跟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()也是一个绑定)