JavaScript函数名后接双括号的语法解析——以connect相关代码为例

这个问题问得好！你看到的这种函数名后接连两个括号的写法，在JavaScript里叫做函数柯里化（Currying）——简单来说，就是一个函数接收部分参数后，返回另一个函数，再接收剩下的参数并最终执行逻辑。咱们结合你给出的connect(mapStateToProps, mapDispatchToProps)(Home)例子详细拆解：

第一步：connect(mapStateToProps, mapDispatchToProps) #

connect是Redux提供的高阶函数（就是能接收/返回函数的函数）。当你传入mapStateToProps（把Redux store的状态映射到组件props）和mapDispatchToProps（把dispatch动作绑定成组件可调用的props方法）这两个参数后，connect并不会直接返回组件，而是返回一个新的组件包装函数。

这个包装函数的作用是“记住”你刚才传入的映射规则，等待接收需要被增强的React组件。

第二步：调用返回的包装函数并传入Home #

当你在后面再加一个(Home)时，其实是把Home组件作为参数传给了第一步返回的那个包装函数。这个包装函数会把Home组件包裹起来，生成一个被Redux增强过的新组件——这个新组件会自动从Redux store中获取你指定的状态，也能通过props调用你绑定好的dispatch动作，最后咱们在项目中实际使用的就是这个增强后的组件。

等价写法更清晰 #

如果你觉得连写两个括号有点绕，其实可以拆成两步，逻辑完全一样：

// 第一步：创建一个带有指定映射规则的组件增强器
const withRedux = connect(mapStateToProps, mapDispatchToProps);
// 第二步：用这个增强器包裹Home组件，得到连接后的组件
const ConnectedHome = withRedux(Home);

一个极简的柯里化例子（非Redux场景） #

为了让你更好理解柯里化的本质，这里举个简单的数学运算例子：

function add(a) {
  // 接收第一个参数a后，返回一个新函数
  return function(b) {
    // 这个新函数接收第二个参数b，最终返回结果
    return a + b;
  }
}

// 连写两个括号调用
add(2)(3); // 输出5

这种写法的好处是可以分步骤配置逻辑：先把通用的规则（比如Redux的映射）配置好，再把这个规则应用到不同的组件上，复用性非常强。

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