javascript - 理解 Jon Resig 的偏应用实现

Question

以下代码摘自 Jon Resig 的书 Secrets of JavaScript Ninja解释如何使用闭包来实现函数的部分应用。但是，我在理解变量 arg 的意图时遇到了问题。为什么需要它以及它如何简化手头的问题，即为函数预填充一些参数？此partial 函数的可能应用是什么？

    Function.prototype.partial = function() {
          var fn = this, args = Array.prototype.slice.call(arguments);
          return function() {
            var arg = 0;   // How does this do the currying
            for (var i = 0; i < args.length && arg < arguments.length; i++) {
              if (args[i] === undefined) {
                args[i] = arguments[arg++]; //This line is where the confusion is
              }
            }
            return fn.apply(this, args);
          };
        };

编辑:我很困惑，因为 args 和 arguments 在调用 args = Array.prototype.slice.call(arguments) 之后必须相同; args 是一个真正的数组对象，它保存了 arguments 中包含的所有信息。因此，如果 args 中的某些内容是 undefined，我们怎么可能在 arguments 中包含某些内容？

Answer 1

好吧，我试着一段一段地解释:

Function.prototype.partial = function() {
      var fn = this, args = Array.prototype.slice.call(arguments);
      return function() {
        var arg = 0;
        for (var i = 0; i < args.length && arg < arguments.length; i++) {
          if (args[i] === undefined) {
            args[i] = arguments[arg++]; //This line is where the confusion is
          }
        }
        return fn.apply(this, args);
      };
 };

第一行:

var fn = this, args = Array.prototype.slice.call(arguments);

这会将 this 的值和 arguments 的值存储在两个变量中，因为这两个值将在以下功能 block 中被覆盖:

return function() {
    //inside here arguments will be whatever is passed to this returned function later.
};

for 循环:

var arg = 0;
for (var i = 0; i < args.length && arg < arguments.length; i++) {
}

它基本上会遍历传递给 partial 函数的所有参数，如果 arg >= arguments.length 则提前退出。

if (args[i] === undefined) {
    args[i] = arguments[arg++]; //This line is where the confusion is
}

因此，如果 args 数组的参数未定义，我们将其替换为 arguments 数组中的下一个参数。当替换每个参数时，将使用合并的参数数组调用原始函数:

 return fn.apply(this, args);

这是它在实践中的工作方式:

 function xy(arg1, arg2) {
     console.log(arg1 + " / " + arg2);
 }

 var p1 = xy.partial("foo", undefined);

 p1("bar") //"foo / bar"

 var p2 = xy.partial(undefined, "bar");

 p2("foo") //"foo / bar"

 var p3 = xy.partial("foo");

 p3("bar") //"foo / undefined" --> because you have to activly pass "undefined" otherwise the arguments array is too short

最后但同样重要的是，这段代码如何与示例一起工作 p1 = xy.partial("foo", undefined); :

//lets call xy.partial("foo", undefined);
Function.prototype.partial = function() {
      //fn = xy
      //args = ["foo", undefined]
      var fn = this, args = Array.prototype.slice.call(arguments);

      //return function that is assigned to p1
      //lets call p1("bar")
      return function() {
        //arguments = ["bar"]
        var arg = 0;
        //for (var i = 0; i < 2 && arg < 1; i++)
        for (var i = 0; i < args.length && arg < arguments.length; i++) {
          //first iteration:
          //args[0] === "foo" -> nothing happend
          //second iteration:
          //args[1] === undefined -> args[1] = arguments[0] (= "bar"); arg++;
          if (args[i] === undefined) {
            args[i] = arguments[arg++]; //This line is where the confusion is
          }
        }
        //at this point: args = ["foo", "bar"];
        //now just call the function with the merged array
        return fn.apply(this, args);
      };
 };