第四章 闭包与高阶函数
4.1 理解闭包
简而言之，闭包就是一个内部函数，是在另一个函数内部的函数，比如
function outer() {
function inner() {
}
}
这就是闭包，函数inner称为闭包函数，闭包如此强大的原因在于它对作用域链(或作用域层级)的访问。
闭包有3个可访问的作用域：
- 1.在它自身声明之内声明的变量
function outer() {
function inner() {
let a = 5;
console.log(a)
}
inner() // 调用inner函数
}
// tips: inner函数在outer函数的外部是不可见的
当inner函数被调用时，控制台返回5，因为闭包函数可以访问所有在其声明内部声明的变量。
- 2.对全局变量的访问
现将上面的代码片段修改为：
let global = "global"
function outer() {
function inner() {
let a = 5
console.log(global)
}
inner() // 调用inner函数
}
现在当inner函数执行后，打印出变量global，如此，闭包就能访问全局变量了
- 3.对外部函数变量的访问
再修改一下函数
let global = "global"
function outer() {
let outer = "outer"
function inner() {
let a = 5
console.log(outer)
}
inner() // 调用inner函数
}
当inner函数执行后，打印出变量outer，看起来是合理的，但却是一个非常重要的闭包属性。
闭包能够访问外部函数的变量，此处外部函数的含义是包裹闭包函数的函数。
闭包可以访问外部函数的参数，比如将outer函数添加一个参数，在inner函数中尝试访问它，是可以拿到该参数的。
闭包还有一个重要概念: 闭包可以记住它的上下文。
var fn = (arg) => {
let outer = "Visible"
let innerFn = () => {
console.log(outer)
console.log(arg)
}
return innerFn
}
var closureFn = fn(5)
closureFn()
=>Visible
=>5
解析
1.var closureFn = fn(5)，这里fn被参数5调用，它返回了innerFn，
2.当innerFn被返回时，javascript执行引擎视innerFn为一个闭包，并且相应地设置了它的作用域
闭包有3个作用于层级，这3个层级(arg、outer值将被设置到inner的作用域层级中)在innerFn返回时都被设置了，如此closureFn通过作用域链被调用时就记住了arg、outer值。
3.最后调用closureFn时，因为它已经记住了它的上下文(作用域，也就是outer和arg)，因此对console.log的调用才能正确打印出结果。
回顾上章的sortBy函数
const sortBy = (property) => {
return (a, b) => {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0
return result
}
}
当我们以如下方式调用sortBy时，sortBy("firstname")
发生了以下事情：
sortBy函数返回了一个接受两个参数的新函数
(a, b) => { /* 实现 */ }
闭包的返回函数能够范围sortBy函数的参数property，该函数只有在sortBy被调用时才会返回。而这时property参数会被替换为一个值。因此返回函数将在其生命周期中持有该上下文：
// 通过闭包持有的作用域
property = "passedValue"
(a, b) => { /* 实现 */ }
由于返回函数在它的上下文中持有property的值，所以它将在合适并且需要的时候使用返回值。
4.2 真实的高阶函数
- tap函数
const tap = (value) =>
(fn) => (
typeof(fn) === 'function' && fn(value),
console.log(value)
)
// tap函数接受一个value，并返回一个包含value的闭包函数，该函数将被执行。
javascript中，(exp1, exp2)的含义是它将执行两个参数并返回第二个表达式的结果，即exp2。
运行tap函数
tap("fun")((it) => console.log("value is ", it))
=> value is fun
=> fun
那么这个函数有什么用处，假设遍历一个来自服务器的数组，并发现数据错了，想调试一下，看看数组内究竟包含了什么，会如何做？抛弃命令式的方法，用函数是的方法来看，这正是使用tap函数，对于此场景可以这样做
forEach([1, 2, 3], (a) =>
tap(a)(()=>{
console.log(a)
})
)
- unary函数
array原型有一个默认的方法称为map，map是一个与之前定义的forEach函数非常相似的函数(遍历)，唯一的区别是map返回了回调函数的结果。
假设要使一个数组加倍并得到结果，可以使用map函数以如下方式实现：
[1, 2, 3].map((a) => { return a * a })
=>[1, 4, 9]
这里map用3个参数调用了函数，分别是element、index和arr，假设要把字符串数组解析为整数数组，有一个内置的函数叫做parseInt，它接受两个参数parse和radix，如果可能，该函数会把传入的parse转换成数字。如果把parseInt传给map函数，map会把index的值传给parseInt的radix参数，这将产生意想不到的行为。
['1', '2', '3'].map(parseInt)
=> [1, NaN, NaN]
这个结果并不是我们期望的，我们需要把parseInt函数转换成为另一个只接受一个参数的函数。
用unary函数可以做到，它的任务是接受一个给定的多参数函数，并把它转换成一个只接受一个参数的函数，如下：
const unary = (fn) =>
fn.length === 1
? fn
: (arg) => fn(arg)
检查传入的fn是否有一个长度为1的参数列表(可通过length属性查看)，有就什么也不做；没有就返回一个新函数，只接收一个参数arg，并且该参数调用fn，重新运行上面的问题。
['1', '2', '3'].map(unary(parseInt))
=> [1, 2, 3]
此处unary函数返回了一个新函数(parseInt的克隆体)，它只接收一个参数，如此map函数传入的index、arr参数就不会对程序产生影响。
也有像binary一样的函数，它们转换函数，使其接受相应的参数。
- once函数
只运行一次给定的函数，比如只想设置一次第三方库，或者初始化一次支付设置。
const once = (fn) => {
let done = false
return function () {
return done ? undefined : (done =true), fn.apply(this, arguments)
}
}
接受一个参数fn,并且通过调用它的apply方法返回结果。声明了一个done变量，初始值为false, 返回的函数会形成一个覆盖它的闭包作用域，因此，返回的函数会访问并检查done是否为true，是则返回undefined，否则将done设置为true(阻止了下一次执行)，并用必要的参数调用fn
apply函数允许设置函数的上下文，并为给定的函数传递参数。
var doPayment = once(() => {
console.log("Payment is done")
})
doPayment()
=> Payment is done
doPayment()
=> undefined
- memoized函数
假设有一个纯函数名为factorial，计算给定数字的阶乘
var factorial = (n) => {
if (n === 0) {
return 1
}
// 递归
return n*facotrial(n-1)
}
该函数只依赖它的参数执行，其它不需要。有一个局限性，无法重用之前的计算结果，memoized函数能够记住其计算结果
const memoized = (fn) => {
const lookupTable = {}
return (arg) => lookupTable[arg] || (lookupTable[arg] = fn(arg))
}
声明lookupTable的局部变量，它在返回函数的闭包上下文中，返回函数将接受一个参数并检查它是否在lookupTable中，如果在则返回对应的值(lookupTable[arg])；否则，使用新的输入作为key，fn的结果作为value，更新lookupTable对象(lookupTable[arg] = fn(arg))
现在将上面的factorial用memoized函数改写
let fastFactorial = memoized((n) => {
if (n === 0) return 1
// 递归
return n *fastFactorial(n-1)
})
调用fastFactorial
fastFactorial(5)
=> 120
它以同样的方式运行，但是比之前快得多，运行fastFactorial时，会检查lookupTable对象。
附上
第三章地址：高阶函数
第二章地址：JavaScript函数基础
第一章地址：函数编程简介
