箭頭函數的嵌套

概述

以前聽輪子哥說過，柯里化只不過是箭頭函數的語法糖。覺得是有那么點意思，自己好像懂了。直到我看redux官方文檔middleware，我才真正理解了為什么說柯里化是箭頭函數的語法糖。於是記錄下來，供以后開發時參考，相信對其他人也有用。

箭頭函數的嵌套

redux官方文檔middleware里面有這么一段代碼：

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

當時看到這里我有點懵了，箭頭函數還能這么寫？有這么簡潔優美的寫法嗎？？？然后繼續看上下文，發現上面的代碼是下面這段代碼的簡寫形式：

function logger(store) {
  return function wrapDispatchToAddLogging(next) {
    return function dispatchAndLog(action) {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result
    }
  }
}

原來是這樣啊！！！這就是箭頭函數的嵌套，實際上就是柯里化！！！所以柯里化只不過是箭頭函數的語法糖！！！

例子

舉個例子，對於加法，我們可以這么寫：

function add(a, b) {
    return a + b;
}

但是我們用柯里化怎么寫呢？

function add(a) {
    return function(b) {
        return a + b;
    }
}

於是我們想怎么用就怎么用：

console.log(add(4)(5)); //輸出9

const add4 = add(4);
console.log(add4(5)); //輸出9
console.log(add4(6)); //輸出10

但是呢，上面那段柯里化的代碼很難懂啊，而且有嵌套，寫起來不優雅不簡潔，如果嵌套很多的話也會發生“嵌套地獄”。但是，如果用箭頭函數的話，用1行代碼就搞定了。

const add = (a) => (b) => a + b;

其它

另外，我們在看類似react-redux的connect代碼的時候有時會有點懵：

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

這什么寫法？實際上就是柯里化而已，只不過對connect做了箭頭函數的兩重嵌套而已！！！