JS函数式编程

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天 JS函数式编程

一.实现apply、call、bind

接下来我们来实现一下apply、call、bind函数：

apply

// 给所有的函数添加一个stoneapply的方法
// 自己实现hyapply
Function.prototype.stoneapply= function(thisArg, argArray) {
  // 1.获取到要执行的函数
  var fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.执行函数
  thisArg.fn = fn
  var result
  // if (!argArray) { // argArray是没有值(没有传参数)
  //   result = thisArg.fn()
  // } else { // 有传参数
  //   result = thisArg.fn(...argArray)
  // }

  // argArray = argArray ? argArray: []
  argArray = argArray || []
  result = thisArg.fn(...argArray)

  delete thisArg.fn

  // 4.返回结果
  return result
}

function sum(num1, num2) {
  console.log("sum被调用", this, num1, num2)
  return num1 + num2
}

function foo(num) {
  return num
}

function bar() {
  console.log("bar函数被执行", this)
}

// 系统调用
// var result = sum.apply("abc", 20)
// console.log(result)

// 自己实现的调用
// var result = sum.stoneapply("abc", [20, 30])
// console.log(result)

// var result2 = foo.stoneapply("abc", [20])
// console.log(result2)

// edge case
bar.stoneapply(0)

call

// js模拟它们的实现? 难度

// 给所有的函数添加一个stonecall的方法
Function.prototype.stonecall= function(thisArg, ...args) {
  // 在这里可以去执行调用的那个函数(foo)
  // 问题: 得可以获取到是哪一个函数执行了hycall
  // 1.获取需要被执行的函数
  var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.调用需要被执行的函数
  thisArg.fn = fn
  var result = thisArg.fn(...args)
  delete thisArg.fn

  // 4.将最终的结果返回出去
  return result
}


function foo() {
  console.log("foo函数被执行", this)
}

function sum(num1, num2) {
  console.log("sum函数被执行", this, num1, num2)
  return num1 + num2
}


// 系统的函数的call方法
foo.call(undefined)
var result = sum.call({}, 20, 30)
// console.log("系统调用的结果:", result)

// 自己实现的函数的stonecall方法
// 默认进行隐式绑定
// foo.stonecall({name: "why"})
foo.stonecall(undefined)
var result = sum.stonecall("abc", 20, 30)
console.log("stonecall的调用:", result)

// var num = {name: "stone"}
// console.log(Object(num))

bind

Function.prototype.stonebind = function(thisArg, ...argArray) {
  // 1.获取到真实需要调用的函数
  var fn = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  function proxyFn(...args) {
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn
    // 特殊: 对两个传入的参数进行合并
    var finalArgs = [...argArray, ...args]
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn

    // 4.返回结果
    return result
  }

  return proxyFn
}

function foo() {
  console.log("foo被执行", this)
  return 20
}

function sum(num1, num2, num3, num4) {
  console.log(num1, num2, num3, num4)
}

// 系统的bind使用
var bar = foo.bind("abc")
bar()

// var newSum = sum.bind("aaa", 10, 20, 30, 40)
// newSum()

// var newSum = sum.bind("aaa")
// newSum(10, 20, 30, 40)

// var newSum = sum.bind("aaa", 10)
// newSum(20, 30, 40)


// 使用自己定义的bind
// var bar = foo.stonebind ("abc")
// var result = bar()
// console.log(result)

var newSum = sum.stonebind ("abc", 10, 20)
var result = newSum(30, 40)

二.认识arguments

==arguments 是一个 对应于 传递给函数的参数 的 类数组(array-like)对象;== array-like意味着它不是一个数组类型，而是一个对象类型：

• 但是它却拥有数组的一些特性，比如说length，比如可以通过index索引来访问；
• 但是它却没有数组的一些方法，比如forEach、map等；

function foo(num1, num2, num3) {
  // 类数组对象中(长的像是一个数组, 本质上是一个对象): arguments
  // console.log(arguments)

  // 常见的对arguments的操作是三个
  // 1.获取参数的长度
  console.log(arguments.length)

  // 2.根据索引值获取某一个参数
  console.log(arguments[2])
  console.log(arguments[3])
  console.log(arguments[4])

  // 3.callee获取当前arguments所在的函数
  console.log(arguments.callee)
  // arguments.callee()
}

foo(10, 20, 30, 40, 50)

arguments转成array:

function foo(num1, num2) {
  // 1.自己遍历
  // var newArr = []
  // for (var i = 0; i < arguments.length; i++) {
  //   newArr.push(arguments[i] * 10)
  // }
  // console.log(newArr)

  // 2.arguments转成array类型
  // 2.1.自己遍历arguments中所有的元素

  // 2.2.Array.prototype.slice将arguments转成array
  var newArr2 = Array.prototype.slice.call(arguments)
  console.log(newArr2)

  var newArr3 = [].slice.call(arguments)
  console.log(newArr3)

  // 2.3.ES6的语法
  var newArr4 = Array.from(arguments)
  console.log(newArr4)
  var newArr5 = [...arguments]
  console.log(newArr5)
}

foo(10, 20, 30, 40, 50)

// 额外补充的知识点: Array中的slice实现
// Array.prototype.hyslice = function(start, end) {
//   var arr = this
//   start = start || 0
//   end = end || arr.length
//   var newArray = []
//   for (var i = start; i < end; i++) {
//     newArray.push(arr[i])
//   }
//   return newArray
// }

// var newArray = Array.prototype.hyslice.call(["aaaa", "bbb", "cccc"], 1, 3)
// console.log(newArray)

// var names = ["aaa", "bbb", "ccc", "ddd"]
// names.slice(1, 3)

箭头函数不绑定arguments 箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作用域查找

// 1.案例一:
// var foo = () => {
//   console.log(arguments)
// }

// foo()

// 2.案例二:
// function foo() {
//   var bar = () => {
//     console.log(arguments)
//   }
//   return bar
// }

// var fn = foo(123)
// fn()

// 3.案例三:
var foo = (num1, num2, ...args) => {
  console.log(args)
}

foo(10, 20, 30, 40, 50)

三.理解JavaScript纯函数

1. 函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；

• 在react开发中纯函数是被多次提及的；
• 比如react中组件就被要求像是一个纯函数（为什么是像，因为还有class组件），redux中有一个reducer的概念，也 是要求必须是一个纯函数；
• 所以掌握纯函数对于理解很多框架的设计是非常有帮助的；

2. 纯函数的维基百科定义：

• 在程序设计中，若一个函数==符合以下条件==，那么这个函数被称为纯函数：
• 此函数在==相同的输入值时==，需==产生相同的输出==。
• 函数的==输出和输入值以外的其他隐藏信息或状态无关==，也和==由I/O设备产生的外部输出==无关。
• 该函数==不能有语义上可观察的函数副作用==，诸如==触发事件==，==使输出设备输出，或更改输出值以外物件的内容==等。

3. 当然上面的定义会过于的晦涩，所以我简单总结一下：

• ==确定的输入，一定会产生确定的输出==；
• ==函数在执行过程中，不能产生副作用==；

4. 副作用的理解 那么这里又有一个概念，叫做副作用，什么又是副作用呢？

• 副作用（side effect）其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用；
• 在计算机科学中，也引用了副作用的概念，表示在==执行一个函数==时，除了返回函数值之外，还对==调用函数产生了附加的影响==，比如==修改了全局变量，修改参数或者改变外部的存储==； 纯函数在执行的过程中就是不能产生这样的副作用：副作用往往是产生==bug的 “温床”。==

纯函数的案例 我们来看一个对数组操作的两个函数：

slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组； splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改； slice就是一个纯函数，不会修改传入的参数；

var name = ['abc', 'def', 'qwe', 'asd']

//slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组
var newNames = name.silce(0, 2)
console.log(newNames)

//splice截取数组, 会返回一个新的数组, 也会对原数组进行修改；
var newNames2 = names.splice(0 ,2)
console.log(newNames2)
console.log(names)

纯函数的优势 为什么纯函数在函数式编程中非常重要呢？

• 因为你可以安心的编写和安心的使用；
• 你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改；
• 你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；

React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改

四.JavaScript柯里化

柯里化也是属于函数式编程里面一个非常重要的概念。 我们先来看一下维基百科的解释：

• 在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化；
• 是把接收==多个参数的函数==，变成==接受一个单一参数==（最初函数的第一个参数）的函数，并且==返回接受余下的参数==，而且返回==结果的新函数==的技术；
• 柯里化声称 “如果你固定某些参数，你将得到接受余下参数的一个函数”；

维基百科的结束非常的抽象，我们这里做一个总结：

• 只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数；
• 这个过程就称之为柯里化；

1. 柯里化的结构 那么柯里化到底是怎么样的表现呢？

function add(x, y, z) {
  return x + y + z
}

var result = add(10, 20, 30)
console.log(result)

function sum1(x) {
  return function(y) {
    return function(z) {
      return x + y + z
    }
  }
}

var result1 = sum1(10)(20)(30)
console.log(result1)

// 简化柯里化的代码
var sum2 = x => y => z => {
  return x + y + z
}

console.log(sum2(10)(20)(30))

var sum3 = x => y => z => x + y + z
console.log(sum3(10)(20)(30))

2. 让函数的职责单一 那么为什么需要有柯里化呢？

• 在函数式编程中，我们其实往往希望==一个函数处理的问题尽可能的单一==，而==不是将一大堆的处理过程交给一个函数来处理==；
• 那么==我们是否就可以将每次传入的参数在单一的函数中进行处理==，处理完后在==下一个函数中再使用处理后的结果==；

3. 柯里化的复用 另外一个使用柯里化的场景是可以帮助我们可以复用参数逻辑

• makeAdder函数要求我们传入一个num（并且如果我们需要的话，可以在这里对num进行一些修改）；
• 在之后使用返回的函数时，我们不需要再继续传入num了；

// function sum(m, n) {
//   return m + n
// }

// // 假如在程序中,我们经常需要把5和另外一个数字进行相加
// console.log(sum(5, 10))
// console.log(sum(5, 14))
// console.log(sum(5, 1100))
// console.log(sum(5, 555))

function makeAdder(count) {
  count = count * count

  return function(num) {
    return count + num
  }
}

// var result = makeAdder(5)(10)
// console.log(result)
var adder5 = makeAdder(5)
adder5(10)
adder5(14)
adder5(1100)
adder5(555)

4. 打印日志的柯里化 这里我们在演示一个案例，需求是打印一些日志:日志包括时间、类型、信息 普通函数的实现方案如下：

function log(date, type, message) {
  console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`)
}

// log(new Date(), "DEBUG", "查找到轮播图的bug")
// log(new Date(), "DEBUG", "查询菜单的bug")
// log(new Date(), "DEBUG", "查询数据的bug")

// 柯里化的优化
var log = date => type => message => {
  console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`)
}

// 如果我现在打印的都是当前时间
var nowLog = log(new Date())
nowLog("DEBUG")("查找到轮播图的bug")
nowLog("FETURE")("新增了添加用户的功能")

var nowAndDebugLog = log(new Date())("DEBUG")
nowAndDebugLog("查找到轮播图的bug")
nowAndDebugLog("查找到轮播图的bug")
nowAndDebugLog("查找到轮播图的bug")
nowAndDebugLog("查找到轮播图的bug")


var nowAndFetureLog = log(new Date())("FETURE")
nowAndFetureLog("添加新功能~")

5. 自动柯里化函数 目前我们有将多个普通的函数，转成柯里化函数：

function add1(x, y, z) {
  return x + y + z
}

function add2(x, y, z) {
  x = x + 2
  y = y * 2
  z = z * z
  return x + y + z
}

function makeAdder(count) {
  count = count * count

  return function(num) {
    return count + num
  }
}

function log(date, type, message) {
  console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`)
}

// 柯里化函数的实现hyCurrying
function hyCurrying(fn) {
  function curried(...args) {
    // 判断当前已经接收的参数的个数, 可以参数本身需要接受的参数是否已经一致了
    // 1.当已经传入的参数 大于等于 需要的参数时, 就执行函数
    if (args.length >= fn.length) {
      // fn(...args)
      // fn.call(this, ...args)
      return fn.apply(this, args)
    } else {
      // 没有达到个数时, 需要返回一个新的函数, 继续来接收的参数
      function curried2(...args2) {
        // 接收到参数后, 需要递归调用curried来检查函数的个数是否达到
        return curried.apply(this, args.concat(args2))
      }
      return curried2
    }
  }
  return curried
}

var curryAdd = hyCurrying(add1)


console.log(curryAdd(10, 20, 30))
console.log(curryAdd(10, 20)(30))
console.log(curryAdd(10)(20)(30))

// function foo(x, y, z, m, n, a, b) {

// }
// console.log(foo.length)


function foo(x, y, z) {
  return x + y + z
}

foo.call({}, 1, 2, 3)

var curryFoo = hyCurrying(foo)
curryFoo.call({}, 1)

6. 理解组合函数 组合（Compose）函数是在JavaScript开发过程中一种对函数的使用技巧、模式：

• 比如我们现在需要对某一个数据进行函数的调用，执行两个函数fn1和fn2，这两个函数是依次执行的；
• 那么如果每次我们都需要进行两个函数的调用，操作上就会显得重复；
• 那么是否可以将这两个函数组合起来，自动依次调用呢？
• 这个过程就是对函数的组合，我们称之为 组合函数（Compose Function）；

function double(num) {
  return num * 2
}

function square(num) {
  return num ** 2
}

var count = 10
var result = square(double(count))
console.log(result)

// 实现最简单的组合函数
function composeFn(m, n) {
  return function(count) {
    return n(m(count))
  }
}

var newFn = composeFn(double, square)
console.log(newFn(10))

7. 实现组合函数 刚才我们实现的compose函数比较简单，我们需要考虑更加复杂的情况：比如传入了更多的函数，在调用compose函数时，传入了更多的参数

function hyCompose(...fns) {
  var length = fns.length
  for (var i = 0; i < length; i++) {
    if (typeof fns[i] !== 'function') {
      throw new TypeError("Expected arguments are functions")
    }
  }

  function compose(...args) {
    var index = 0
    var result = length ? fns[index].apply(this, args): args
    while(++index < length) {
      result = fns[index].call(this, result)
    }
    return result
  }
  return compose
}

function double(m) {
  return m * 2
}

function square(n) {
  return n ** 2
}

var newFn = hyCompose(double, square)
console.log(newFn(10))