Question

我发现，通过将代码扁平化为更易理解的独立函数，不使用匿名函数使我的代码更具可读性和自我记录功能。所以我想打破以下构造：

function Save() {
   myVal = 3.14 // some arbitrary value
   $('#myID').each(function(index,element) {
      if ($(this).val() === myVal) {}
   });
}

分为：

function Save() {
   myVal = 3.14 // some arbitrary value
   $('#myID').each(myFunction);
}

function myFunction(index,element) {
   if ($(this).val() === myVal) {}
}

在这里使用.bind的问题是你在每个方法中丢失了$（this）的值，所以（我不认为）我可以将myVal绑定到myFunction。

也许我可以使用element代替this？

编辑1：我应该使用.myClass而不是#myID作为示例选择器。

编辑2：我没有在建议的解决方案中使用bind，因为我认为bind不起作用。

编辑3：我感谢大家说第一个例子更具可读性。我只是在探索语言并尝试不同的想法。

Answer 1

那怎么样：

function Save() {
    myVal = 3.14 // some arbitrary value
    $('#myID').each(myFunction(myVal));
}

function myFunction(myVal) {
    return function(index, element) {
        if ($(this).val() === myVal) {}
    }
}

Answer 2

您没有失去对this的访问权限;您失去了对myVal的访问权限，因为myVal内部myFunction未知，这主要是因为该函数是在没有myVal定义的范围内定义的。

你可以做的是这样的事情：

function myFunction(index, element, myVal) {
   if ($(this).val() === myVal) {}
}

然后：

function Save() {
   myVal = 3.14 // some arbitrary value
   $('#myID').each(function(index, element) {
       myFunction.call(this, index, element, myVal);
   });
}

这样，如果myFunction中有很多逻辑，你仍然可以将其分开，只需从myFunction的回调中调用.each)即可。并非myFunction使用.call进行调用，因为这样您就可以传入this（第一个参数）的显式值。因此，this与this的回调中的.each相同。

老实说，第一个选项更具可读性，你可以通过这样分割你的代码来获得更多。

Answer 3

在这种情况下，

this将是相同的。您失去访问权限的一件事是myVal。你是对的，你不能使用Function.bind，因为这不允许你指定保留原文（通话时间）this

以下是使用myVal的修改版本传递this并保持相同Function.bind的方法，我们正在调用myBind

/**
 * Binds the given function to the given context and arguments. 
 *
 * @param {function} fun The function to be bound
 * @param {object} context What to use as `this`, defaults 
 *        to the call time `this`
 * @param {object[]} customArgs Custom args to be inserted into the call
 * @param {number} index Where to insert the arguments in relationship
 *        to the call time arguments, negative numbers count from the end.
          That is, -1 to insert at the end. Defaults to a 0 (beginning of list).
 *        
 */
function myBind(fun, context, customArgs, index) {
      return function() {
          // Default the index
          index = index || 0;
          // Create the arguments to be passed, using an old trick
          // to make arguments be a real array
          var newArgs = Array.prototype.slice.call(arguments, 0);
          // Tack the customArgs to the call time args where the user requested
          var spliceArgs = [index, 0].concat(customArgs); 
          newArgs.splice.apply(newArgs, spliceArgs);
          // Finally, make that call
          return fun.apply(context || this, newArgs);  
      }
}


function Save() {
   myVal = 3.14 // some arbitrary value
   $('#myID').each(
      // myFunction wil be called with myVal as its last parameter
      myBind(myFunction, null, [myVal], -1)
   );
}

function myFunction(index, element, myVal) {
   if ($(this).val() === myVal) {
       // do it here
   }
}

为了演示这个函数的灵活性，让我们绑定多个参数，它应该在调用时参数的开头插入

function Save() {
   var myVal = 3.14, val2 = 6.28; // some arbitrary values
   $('#myID').each(
      // myFunction wil be called with myVal and val2 as its first parameter
      myBind(myFunction, null, [myVal, val2], 0);
   );
}

// Since I don't need element, it's already available as this, we don't 
// declare the element parameter here
function myFunction(myVal, val2, index) {
   if ($(this).val() === myVal || $(this.val() === val2)) {
       // do it here
   }
}

这与Samuel Caillerie的答案差不多。唯一的区别是我们创建了不绑定Function.bind的{{1}}的不同版本，只是参数。此版本的另一个好处是您可以选择插入绑定参数的位置;

如何为每个和这个使用命名函数

3 个答案: