写给前端工程师看的函数式编程对话 - 5

前篇：juejin.cn/post/694128…

第五天：我，穷人，打钱！

学生：早，我们的第一步是不是复习上节课的内容哇

方：嗯对

学生：上节课讲了可以用函数来表示二元组，可以用二元组来表示数组（list/array）

方：看来你有记笔记，今天居然没忘

学生：今天要学习更复杂的数据结构吗？

方：嗯，讲一讲「对象」吧。我们常说的对象，其实是「哈希表」，大概长这样：

const me = {
  name: '方应杭',
  age: 18,
  title: '前端工程师'
}

me.age // 18
me['age'] // 18

学生：嗯

方：我说 me 可以用函数表示，你应该不反对吧？

学生：能给代码我看看吗

方：来了：

createPerson = (name, age, title) => key =>
  key === 'name'  ? name :
  key === 'age'   ? age :
  key === 'title' ? title :
                    null
me = createPerson('方应杭', 18, '前端工程师')
me('age') // 18

学生：好吧，me 确实可以用函数表示……但是用对象来表示 me，会让 me.age 查找起来更快，你的代码会将 key 与不同字符串进行逐个对比，字符串越多，查找越慢

方：没错，但是这很好优化，可以通过提供内置的对象构造器来优化，也可以通过编译器优化，这些优化都不是我们需要讨论的内容。

学生：了解。

方：目前我们是在复习上节课的内容， 好让你相信，不管多么复杂的数据结构，都是可以用函数表示的：真实的数据被存在该函数内部，该函数会再暴露出了一个函数用来访问真实的数据。这句话你听着有没有觉得耳熟？

学生：有！JS 的闭包就是这样的。

方：没错，这就是闭包（Closure)。createPersion() 返回的函数（记为 temp），再加上这个函数能访问到的自由变量（name、age、title），组合起来就叫做闭包。

学生：那闭包有什么用？

方：闭包一方面存储 name、age 和 title，一方面让 temp 函数去操作这些变量，这就是闭包的全部作用。

学生：这有什么用？

方：这作用还不够大嘛？

学生：这作用算什么大？我用对象轻松就能达成这些功能啊：

const obj = {
  name: '方应杭', age: 18, title: '前端工程师', 
  get(key){ if(key)...return... }
}

对不对？

方：你说到点子上了，闭包和对象是可以相互代替的：你即可以用对象来容纳数据，然后暴露接口来操作数据；也可以用闭包来容纳数据，然后暴露接口来操作数据。

学生：原来是这样

方：由于 JS 程序员更喜欢对象，所以对闭包总是本能地拒绝。实际上网上流传过这么一句话：「闭包是穷人的对象，对象是穷人的闭包」Closures are poor man's objects. Objects are poor man's closures.

学生：这话怎么理解

方：有些语言，比如 Java 的前几个版本，函数不能访问自由变量，也就不可能组成闭包了，那么你要「容纳数据，然后暴露接口来操作数据」只能使用类和对象了，所以说「对象是穷人的闭包」，意思是想用闭包的 Java 程序员是穷人（很窘迫），不得不选择对象作为代替品。

学生：原来如此

方：另一方面，有些语言，并没有提供真正的对象，只能使用闭包来「容纳数据，然后暴露接口来操作数据」，所以说「闭包是穷人的对象」。

学生：那 JS 呢？

方：JS 两个都支持，但两个都支持地一般般。你说 JS 支持面向对象吧，它的 class 又残缺不全；你说 JS 支持函数式吧，它的尾递归优化又迟迟不能落地。就挺尴尬的，这导致 JS 程序员学面向对象学得不够好，学函数式也学得不够好……

学生：那我怎么办？

方：多学点编程语言就行了。

学生：哦……对了，网上还说闭包会造成内存泄露，是真的吗？

方：别理这种说法，说这话的人既没有理解闭包，也没有理解内存泄露。

学生：哦好。那你刚刚说的自由变量又是什么呢？

方：还是得用代码举例：

const v1 = '全局变量'
const f1 = (p1, p2)=>{
  // p1 和 p2 是 f1 的参数 
  const v2 = 'f1 的本地变量' 

  const f2 = (r1, r2) => {
     // r1、r2 是 f2 的参数
     const v3 = 'f2 的本地变量'
     console.log(p1, p2, v2) 
     // p1、p2、v3 不是 f2 的本地变量，也不是全局变量，
     // 那么我们认为它们是 f2 的自由变量
  }
  f2()
}
f1()

你可以认为，对于一个函数来说，

1. 定义在顶级作用域的是全局变量
2. 定义在该函数的 参数列表 里的变量，是这个函数的参数变量
3. 定义在该函数的 函数体 里的变量，是这个函数的本地变量
4. 除了上面三种之外的变量，就是这个函数的自由变量
5. 有的地方认为参数变量也属于本地变量

但这个概念其实没有明确地定义，你大概理解就行了。

学生：我可不可以理解为当前函数词法作用域外部的局部变量，就是自由变量。

方：对。哟，你还知道词法作用域呢

学生：（笑）从书上学的

方：尽量不要去用自己没有完全理解的概念，用直白的语言描述就行了。

学生：好的，以后我尽量不说还没学的术语。

方：另外，要记住函数其实也是变量，所以 f1 也是 f2 的自由变量。以后我不专门说你也要知道。

学生：那是当然，这我还是知道的。

方：那么我们今天的内容就讲完了：闭包是穷人的对象，对象是穷人的闭包。

学生：感觉没听过瘾啊

方：下次，下次吧

学生：好吧