一文带你了解 JavaScript 函数式编程

作者:前端工匠
公号 / 浪里行舟
前言
函数式编程在前端已经成为了一个非常热门的话题 。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想 。
本文将略去那些晦涩难懂的概念介绍,重点展示在 JAVAScript 中到底什么是函数式的代码、声明式与命令式代码的区别、以及常见的函数式模型都有哪些?
一、什么是函数式编程
函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果 。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码 。举个简单的例子,假设我们要把字符串 functional programmingisgreat 变成每个单词首字母大写,我们可以这样实现:
一文带你了解 JavaScript 函数式编程

文章插图
 
上面的例子先用 split 把字符串转换数组,然后再通过 map 把各元素的首字母转换成大写,最后通过 join 把数组转换成字符串 。整个过程就是 join(map(split(str))),体现了函数式编程的核心思想:通过函数对数据进行转换 。
由此我们可以得到,函数式编程有两个基本特点:
  • 通过函数来对数据进行转换
  • 通过串联多个函数来求结果
二、对比声明式与命令式
  • 命令式:我们通过编写一条又一条指令去让计算机执行一些动作,这其中一般都会涉及到很多繁杂的细节 。命令式代码中频繁使用语句,来完成某个行为 。比如 for、if、switch、throw 等这些语句 。
  • 声明式:我们通过写表达式的方式来声明我们想干什么,而不是通过一步一步的指示 。表达式通常是某些函数调用的复合、一些值和操作符,用来计算出结果值 。

一文带你了解 JavaScript 函数式编程

文章插图
 
从上面的例子中,我们可以看到声明式的写法是一个表达式,无需关心如何进行计数器迭代,返回的数组如何收集,它指明的是做什么,而不是怎么做 。函数式编程的一个明显的好处就是这种声明式的代码,对于无副作用的纯函数,我们完全可以不考虑函数内部是如何实现的,专注于编写业务代码 。
三、常见特性
无副作用
指调用函数时不会修改外部状态,即一个函数调用 n 次后依然返回同样的结果 。
一文带你了解 JavaScript 函数式编程

文章插图
 
透明引用
指一个函数只会用到传递给它的变量以及自己内部创建的变量,不会使用到其他变量 。
一文带你了解 JavaScript 函数式编程

文章插图
 
不可变变量
指的是一个变量一旦创建后,就不能再进行修改,任何修改都会生成一个新的变量 。使用不可变变量最大的好处是线程安全 。多个线程可以同时访问同一个不可变变量,让并行变得更容易实现 。由于 JavaScript 原生不支持不可变变量,需要通过第三方库来实现 。(如 Immutable.js,Mori 等等)
一文带你了解 JavaScript 函数式编程

文章插图
 
函数是一等公民
我们常说函数是JavaScript的"第一等公民",指的是函数与其他数据类型一样,处于平等地位,可以赋值给其他变量,也可以作为参数,传入另一个函数,或者作为别的函数的返回值 。下文将要介绍的闭包、高阶函数、函数柯里化和函数组合都是围绕这一特性的应用
四、常见的函数式编程模型
1.闭包(Closure)
如果一个函数引用了自由变量,那么该函数就是一个闭包 。何谓自由变量?自由变量是指不属于该函数作用域的变量(所有全局变量都是自由变量,严格来说引用了全局变量的函数都是闭包,但这种闭包并没有什么用,通常情况下我们说的闭包是指函数内部的函数) 。
闭包的形成条件:
  • 存在内、外两层函数
  • 内层函数对外层函数的局部变量进行了引用
闭包的用途:可以定义一些作用域局限的持久化变量,这些变量可以用来做缓存或者计算的中间量等 。
一文带你了解 JavaScript 函数式编程

文章插图
 
上面例子是一个简单的缓存工具的实现,匿名函数创造了一个闭包,使得 store 对象,一直可以被引用,不会被回收 。
闭包的弊端:持久化变量不会被正常释放,持续占用内存空间,很容易造成内存浪费,所以一般需要一些额外手动的清理机制 。


推荐阅读