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，如{ {1}}，但.call(thisArg, param1, param2....)接受.apply。

.apply(thisArg, [param1, param2....])会返回一个新的.bind，当它执行时，当您将Function称为.bind时，它会使用第一个参数，如果您提供其他参数，则为＆＃ 39; ll将它直接放到原始函数中，例如：

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));更改时致电toggleHidden，因为您正在收听复选框的更改事件，并且输入参数应该是预先定义的，您可以写

checkbox

您可以从js call() & apply() vs bind()?，mdn-function-bind，mdn-function-call获取更多信息。

在JavaScript示例中使用bind，apply或call

1 个答案: