在bind()绑定的函数中使用this和this的作用域 [英] Use bound this and this of function scope in a function bound with bind()

问题描述

我有以下函数调用:

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

在我的回调函数中，我想使用函数范围中的this和this.

Inside my callback function I would like to use the bound this as well as the this from the function scope.

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

Can this be done somehow?

推荐答案

在我的回调函数中，我想使用函数范围中的this和this.

Inside my callback function I would like to use the bound this as well as the this from the function scope.

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

In that specific example, you can use the currentTarget property of the event:

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

请注意，这里有p1和p2，它们是绑定到回调的参数，其后是e，这是单击发生时传递的事件参数.

Note that there we have p1 and p2, which are the arguments you bound to the callback, followed by e which is the event argument passed when the click occurs.

在 general 情况下，您并不想使用Function#bind，因为它会阻止您访问调用该函数的this.

In the general case, though, you wouldn't want Function#bind, because it prevents your accessing the this that the function was called with.

您可以为自己提供一个Function#curry (请参阅下文，了解该名称的原因)，让它单独保留this，然后咖喱当前的this，例如:

You can provide yourself a Function#curry (see below for why that name) that leaves this alone, and then curry the current this, e.g.:

$(".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?

Why curry?

在数学家Haskell Curry之后，通常将另一个具有(某些)函数自变量的函数创建为一个函数(通常被称为"currying").它也被称为部分应用程序"，尽管我认为(这不是我的专业领域)该术语具有更具体的含义，至少在函数式编程中(例如您用Haskell—语言也进行了命名) Haskell Curry).

Creating a function from another function with (some of) that function's arguments pre-supplied is frquently called "currying," after the mathmatician Haskell Curry. It's also called "partial application" although I think (this is not my area of expertise) that term has a slightly more specific meaning, at least in functional programming (such as the kind you do in the language Haskell—  also named after Haskell Curry).

这篇关于在bind()绑定的函数中使用this和this的作用域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！