关于JavaScript链式sum函数的原始值转换原理的技术问询

示例代码 #

console.log(sum(1)(2)(3));  // -> 6
console.log(sum(3)(15));   // -> 18 

function sum(a) {
  let currentSum = a;

  function f(b) {
    currentSum += b;
    return f;
  }
  f.toString = function() {
    return currentSum;
  };
  return f;
}

问题解答 #

1. 原始值转换（ToPrimitive）的发生过程 #

每次调用sum(a)都会返回内部定义的函数f。以sum(1)(2)(3)为例：

• 第一步sum(1)返回函数f，此时currentSum初始化为1；
• 第二步调用f(2)，currentSum累加为3，返回的还是f；
• 第三步调用f(3)，currentSum累加为6，返回的依旧是f；
• 当console.log接收这个f函数对象时，需要将其转换为可打印的原始值，触发JavaScript的ToPrimitive转换机制。在这种输出场景下，JavaScript会优先调用对象的toString()方法；
• 我们重写了f的toString方法，让它直接返回当前的currentSum（数字类型，属于原始值），这个值就会被console.log用作输出内容，最终打印出累加结果。

2. 采用这种写法的原因 #

• 链式调用的简洁性：可以通过sum(a)(b)(c)...的连续调用语法实现累加，相比传统的sum(a,b,c)或者多次调用普通累加函数，写法更紧凑，契合函数式编程的风格；
• 闭包保存状态：利用闭包特性，内部函数f可以持续访问并修改外部函数sum中的currentSum变量，实现多次调用间的状态留存，无需额外全局变量或类实例存储累加值；
• 支持延迟计算：可以随时终止链式调用，只要触发原始值转换（比如console.log输出、直接在控制台打印、用+运算符转换等），就能获取当前的累加总和，灵活性更高。

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