第四章 闭包与高阶函数
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函数基础
第一章地址:函数编程简介
网友评论