如何在JavaScript中实现multiple(5)(6)返回30？该写法用途是什么？

嘿，这个需求挺巧妙的——要让一个函数既能直接返回传入的单个参数，又能支持链式调用实现相乘。我们可以利用JavaScript里函数是特殊对象的特性，结合valueOf方法来实现，下面一步步拆解：

实现代码 #

function multiple(num) {
  // 定义内部函数，用于接收后续的相乘参数
  const chainedMultiply = function(nextNum) {
    // 递归调用multiple，把当前累积的乘积作为新的初始值
    return multiple(num * nextNum);
  };

  // 重写valueOf方法：当函数需要被转换为原始值时，返回当前的数值
  chainedMultiply.valueOf = function() {
    return num;
  };

  return chainedMultiply;
}

测试验证 #

// 单个参数调用，在数值场景下返回5
console.log(+multiple(5)); // 输出: 5
alert(multiple(5)); // 弹出: 5

// 链式调用返回乘积
console.log(multiple(5)(6)); // 输出: 30

// 支持多步链式调用
console.log(multiple(2)(3)(4)); // 输出: 24

实现原理 #

JavaScript中，当对象（包括函数，因为函数是特殊的对象）被用于需要原始值的操作（比如数值运算、字符串转换、alert展示）时，会自动触发它的valueOf方法。我们给返回的chainedMultiply函数自定义了valueOf逻辑，让它返回当前累积的数值：

• 当直接使用multiple(5)时，若场景需要原始值，就会调用valueOf返回5；
• 当把它当作函数调用（比如multiple(5)(6)）时，就会执行内部逻辑，递归调用multiple并传入新的乘积值，实现链式相乘。

这种写法的主要用途 #

• 函数柯里化（Currying）：这是柯里化的典型应用，将多参数函数拆解为单参数链式函数：
  • 参数复用：比如预先固定初始值const times3 = multiple(3)，之后可以多次调用times3(4)、times3(5)来复用3这个乘数；
  • 延迟执行：可以分步收集参数，直到所有参数传入后再计算结果，适合动态参数的场景；
  • 函数组合：柯里化后的函数更容易和其他函数组合，构建复杂的函数逻辑。
• 链式API设计：让代码更简洁流畅，类似jQuery的链式调用风格，提升代码的可读性和书写效率。

内容的提问来源于stack exchange，提问作者joseph oun