柯里化 _ 高阶函数_React高级组件

柯里化 Currying

让所有函数只接受一个参数【单一参数】

单一参数有什么意义

那么怎么支持两个参数

用对象接收? 并不是，使用闭包

单参数函数接收两个参数

// 用对象形式
const add = ({a,b} => a+b )
add({a:1，b:2}）

//
const add => a => b => c => a+b+c
add(1)(2)(3)

题目

addTwo 接受两个参数，
addThree 接受三个参数，
addFore 接受四个参数，
请写出一个 currify 函数，使得它们分别接受 2、3、4 次参数，比如

currify(addTwo)(1)(2) // 3
currify(addThree)(1)(2)(3) // 6
currify(addFore)(1)(2)(3)(4) // 10

也就是说，currify 能将任意接受固定个参数的函数，变成单一参数的函数

currify = (fn, params = [])=>
      (...args) =>
      params.length+args.length === fn.length 
      ?  fn(...params, ...args)
      : currify(fn, [...params, ...args])


addTwo = (a,b)=>a+b
addThree = (a,b,c)=>a+b+c
newAddTwo = currify(addTwo)
newAddThree = currify(addThree)
newAddTwo(1)(2)
newAddThree(1)(2)(3)

高阶函数

把函数作为参数或者返回值的函数

image.png

JS内置的高阶函数

Function.prototype.bind

bind.call 接收一个函数 fn. this, 其他参数
返回一个一个新函数，会调用fn，并传入this和其他参数

image.png

以下为接收函数作为参数

Function.prototype.apply

image.png

Function.prototype.call

image.png

以下为接收函数作为参数

Function.prototype.sort

var arr = [1,5,2,4,3]
array.sort( (a,b) => a-b )  //  [1,2,3,4,5]  
// 进行排序，a-b>0 放后面

arr.sort( (a,b) => b-a )
sort.call(array, (a,b) => b-a ) 

Function.prototype.map

Function.prototype.filter

Function.prototype.reduce

image.png

函数的组合

除了第一个参数的函数之外，其他的函数只能接收一个参数

image.png

pipe操作

image.png

React高级组件

接收组件的组件，或者返回组件的组件称之为高级组件

image.png