溫故而知新：柯里化 與 bind() 的認知

?

什么是柯里化?
科里化是把一個多參數函數轉化為一個嵌套的一元函數的過程。（簡單的說就是將函數的參數，變為多次入參）

const?curry?=?(fn,?...args)?=>?fn.length?<=?args.length???fn(...args)?:?curry.bind(null,?fn,?...args);
//?想要看懂上面這個函數，重點在于全面理解bind的用法。
//?思路倒是很簡單，就是在參數未搜集完善之前，通過bind來實現參數搜集，
//?當搜集完成時，就可以執行原函數了。
const?add?=?(x,?y)?=>?x?+?y;
const?curryadd?=?curry(add);
curryadd(4)(4);?//?8

?

關于bind的認知
bind 和 call / apply 很相似，都可以改變 this 的指向，也都可以傳遞參數。但還是有一些區別：

?1）bind不會立即執行函數，而是返回一個新函數。譬如在 React 中我們經常用 bind 將函數的 this 指向組件本身：

export default class ClickOutside extends Component {constructor(props) {super(props)this.getContainer = this.getContainer.bind(this)}getContainer(ref) {this.container = ref}
}

?

2）除了 this 以外的參數，會把原函數的參數位給占領（擾亂王？鳩占鵲巢？小三上位？），也就是預設值綁定（賦值）：

// demo1: 演示預設綁定 x 和 y 的參數
const add = (x, y, z) => x + y + z;
add.bind(null, 1, 2)(3) // => 6 , 等價于 add(1, 2, 3)// demo2:  演示多次bind
const add = (x, y) => x + y;
const myadd = add.bind(null, 1).bind(null, 2)
myadd() // => 3 , 等價于 add(1, 2)// demo3: 和...args這種數組解構結合使用時可別懵了 O(∩_∩)O哈哈~
const add = (...args) => console.log(args, args.length);
const myadd = add.bind(null, 1).bind(null, 2).bind(null, 3).bind(null, 4).bind(null, 5)
myadd() // =>  [1, 2, 3, 4, 5] 5

這種特性實際上和 偏應用 很相似，區別僅僅在于偏應用不需要關注 this 的綁定。

偏應用的目的只有一個，那就是通過預設值減少函數的參數位，達到簡化函數、惰性函數、可重用函數等目的。