Question

我是javascript / jquery的新手，以及我需要帮助的示例代码：

＆＃13;

function add(text) {
  $(this).replaceWith('<label>'+text+'</label>');
}

var label = 'Added';
$('#myDiv').append($('<button type="button">Add</button>').click(function() {
  add.call(this, label);
}));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

＆＃13;

是否有更好的＆＃34;在这里设置click回调的方法？

如果add函数没有text参数，我可以轻松使用.click(add)，该按钮将自动绑定为this。

但是有了这个论点，我无法绑定text而不必设置this的值，因为.click(add.bind(this, label))设置为this时会出错在全球范围内。

思想？

Answer 1

正如Andreas中a comment指出的那样，这是jQuery事件处理程序特有的解决方案：on function的data参数}。

更一般地说，你正在寻找的东西有时被称为＆＃34; currying＆＃34; （或＆＃34;部分申请;＆＃34;纯粹主义者告诉我其中一个在技术上是不正确的，但我永远不记得是哪个）。

我有一个我用来添加Function.prototype的功能;它看起来像（见评论）：

(function() {
    var slice = Array.prototype.slice;

    Object.defineProperty(Function.prototype, "curry", {
        value: function() {
            // Remember the original function and the arguments we wre called with
            var f = this,
                curried = slice.call(arguments);
            // Return a new function
            return function() {
                // Our function was called, add in any arguments it was called with...
                var args = curried.concat(slice.call(arguments));
                // ...and call the original, passing along `this`
                return f.apply(this, args);
            };
        }
    });
})();

在您的情况下，您可以像这样使用它：

var label = 'Added';
$('#myDiv').append($('<button type="button">Add</button>').click(add.curry(label)));

请注意，您的add函数将使用label的值调用（就像我们进行curry调用时一样，而不是之后的调用），后跟任何参数调用curried函数（例如，事件对象）。

示例：

＆＃13;

(function() {
  var slice = Array.prototype.slice;

  Object.defineProperty(Function.prototype, "curry", {
    value: function() {
      // Remember the original function and the arguments we wre called with
      var f = this,
        curried = slice.call(arguments);
      // Return a new function
      return function() {
        // Our function was called, add in any arguments it was called with...
        var args = curried.concat(slice.call(arguments));
        // ...and call the original, passing along `this`
        return f.apply(this, args);
      };
    }
  });
})();

function add(text) {
  console.log("add called with text = '" + text + "'");
}
var label = 'Added';
$('#myDiv').append($('<button type="button">Add</button>').click(add.curry(label)));

＆＃13;

<div id="myDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

如何将参数绑定到jquery回调而不影响此

1 个答案: