javascript - 在 JavaScript 示例中使用绑定(bind)、应用或调用

Question

我在函数 populateParameterTr(parameters) 中使用 JavaScript 动态创建一个充满复选框的表格行。在此函数中，我设置了一个事件处理程序，以便当复选框处于事件状态时，会在 toggleHidden 函数中创建一个隐藏的输入字段。

我遇到的问题是在创建复选框后尝试调用toggleHidden来创建这些隐藏的输入元素，即不在事件处理程序中。原因是:第一次加载复选框时我想要这些隐藏的输入字段。根据我的理解，调用 toggleHidden() 会导致 this 指向全局范围。

我查看了 bind、call 和 apply，看看这是否有帮助，如下所示:

toggleHidden(display, parameterContainer).bind(checkbox); 

有人可以告诉我这是否可以做到吗？我将此示例视为练习，以了解如何使用这些方法。

代码:

var populateParameterTr = function(parameters) {
   var checkboxes = $('<td></td>');

   for (var i in parameters) {
     var display = parameters[i].display;
     var checkbox = $('<input>').attr({
       //...
     });

     var parameterContainer = $('<div></div>').addClass('parameter').append(checkbox);

     checkboxes.append(parameterContainer);

     toggleHidden(display, parameterContainer).bind(checkbox); 

     checkbox.on('change', toggleHidden(display, parameterContainer));

    }
}

var toggleHidden = function(display, tableDivide) {
   return function() {
     if (this.checked) {
       var hidden = $('<input>').attr({
         //......
       });
       hidden.appendTo(tableDivide);
     } else {
       $(this).siblings("input[type='hidden']").remove();
     }
   };
};

Answer 1

.call 和 .apply 直接执行第一个 param 为 thisArg 的函数，它们之间的区别.call 接受 parme 就像 .call(thisArg, param1, param2....) ，但是 .apply 接受类似 .apply(thisArg, [param1, param2....]).

.bind 返回一个新的 Function，当它执行时，它使用当您调用 .bind 时的第一个参数作为 thisArg ，如果您提供其他参数，它会直接将其放入原始函数中，例如:

var func = function(param1, param2) {
  console.log(param1, param2);
};
var bindFunc = func.bind(null, 1);

bindFunc(2);  // log 1, 2 now

利用以上知识来检查您发布的代码:

toggleHidden(display, parameterContainer).bind(checkbox);

看来你想调用它，而 this 是对 checkbox 的引用，所以你可以这样写:

toggleHidden.call(checkbox, display, parameterContainer);
// or 
toggleHidden.apply(checkbox, [display, parameterContainer]);

然后这部分:

checkbox.on('change', toggleHidden(display, parameterContainer));

这里你想在checkbox改变时调用toggleHidden，因为你正在监听checkbox的change事件，并且输入参数应该是预先定义的，你可以这样写

checkbox.on('change', toggleHidden.bind(checkbox, display, parameterContainer));

您可以通过 js call() & apply() vs bind()? 获取更多信息, mdn-function-bind , mdn-function-call .