JavaScript 高阶函数理解与应用

[Hancoson]

认识

高阶函数（Higher Order Function）作为函数式编程众多风格中的一项显著特征，经常被使用着。

那什么是高阶函数呢？高阶函数是对其他函数进行操作的函数，操作可以是将它们作为参数，或者是返回它们，即满指至少满足下列条件之一的函数：

• 函数作为参数被传递
• 函数作为返回值输出

应用

实际上我们日常开发中也会经常用到高阶函数。接下来看一下几个典型的应用实例：

做为参数传递

Array.prototype.map()

map() 接受一个函数作参数，这个函数封装了创建新数组的规则，从 map() 的使用可以看到，我们的目的是根据原数组获取一个新数组，这是不变的部分；而使用什么规则去创建，则是可变的部分。把可变的部分封装在函数参数里，动态传入 map()，使 map() 方法成为了一个非常灵活的方法。

const arr1 = [1,3,5]
const arr2 = arr1.map(item => tem*2)

console.log(arr2) //2,6,10

回调函数

const getInfo = (url, callback) => {
  fetch(url).then( res => {
    callback(res)
  })
  .catch( err => {
    alert(err.msg)
  })
}

const _url = '/api/get'
getInfo(_url, data => {
    console.log(data.name);
});

作为返回值

判断数据的类型

const TYPE = type => obj => Object.prototype.toString.call( obj ) === `[object ${type}]`

const isArray = TYPE('Array');
const isNumber = TYPE('Number');
const isString = TYPE('String');

console.log(isArray([1,2,3])) // 输出：true
console.log(isString('str')) // 输出：true

// ES5
/*
var TYPE = function(type){
  return function (obj){
    return Object.prototype.toString.call( obj ) === '[object '+type+']'
  }
}
*/

在这里，TYPE() 做为高阶函数，返回一个匿名函数。

结束语

高阶函数并不是 javaScript 的专利,但绝对是 javaScript 编程的利器。高阶函数实际上就是对基本算法的再度抽象，我们可以利用这一点，提高代码的抽象度，实现最大限度的代码重用，编写出更简洁、更利于重构的代码。

拓展

高阶组件

高阶组件(HOC)是 React 生态系统的常用词汇，React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶组件，只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。

修饰器 Decorator

修饰器是一个对类进行处理的函数。

感兴趣的同学可以自己去研究高阶组件(HOC)和 Decorator，这里不展开说明了。