【JS基础记录】闭包与高阶函数

闭包

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即时函数是在当前词法作用域之外执行。

function foo () {
    let a = 2;
    function bar(){
        console.log(a);
    }
    return bar;
}
let baz = foo();
baz();  // 2

由于 bar 声明在 foo 函数内部， bar 拥有涵盖 foo 内部作用域的闭包，使得 foo 的内部作用域一直存活不被回收。一般来说，函数在执行完后其整个内部作用域都会被销毁，因为JavaScript 的 GC（Garbage Collection）垃圾回收机制会自动回收不再使用的内存空间。但是闭包会阻止某些 GC，比如本例中 foo() 执行完，因为返回的 bar 函数依然持有其所在作用域的引用，所以其内部作用域不会被回收。

利用闭包实现结果缓存（备忘模式）

Array.prototype.slice(arguments): arguments是一个具有 length的对象，使用这个方法可以使这个对象使用数组的slice这个方法。

• Array是构造函数；
• arguments是类数组对象，缺少很多数组的方法；
• call让一个对象去调用另一个对象的方法；
• slice切割数组并返回新的数组。

里可以利用闭包的特点来实现一个简单的缓存，在函数内部用一个对象存储输入的参数，如果下次再输入相同的参数，那就比较一下对象的属性，如果有缓存，就直接把值从这个对象里面取出来

function memorize(fn) { 
    const cache = {}
    return function(...args) {
        // var args = Array.prototype.slice.call(arguments)
        const key = JSON.stringify(args);
        return cache[key] || (cache[key] = fn.apply(null, args))
 	}
}
/* 复杂计算函数 */
function add(a) {
 return a + 1 
}
var adder = memorize(add)
adder(1) // 输出: 2 当前: cache: { '[1]': 2 }
adder(1) // 输出: 2 当前: cache: { '[1]': 2 }
adder(2) // 输出: 3 当前: cache: { '[1]': 2, '[2]': 3 }

高阶函数

高阶函数就是输入参数里有函数，或者输出是函数的函数。

函数作为参数

如果你用过 setTimeout 、 setInterval 、ajax 请求，那么你已经用过高阶函数了，这是我们最常看到的场景：回调函数，因为它将函数作为参数传递给另一个函数。

函数作为返回值

经常看到的高阶函数的场景是在一个函数内部输出另一个函数, 主要是利用闭包来保持着作用域。

function add ()　{
    let num = 0;
     return function(a){
         return num = num + a;
     }
}
let adder = add();
adder(1);  // 1
adder(2);  // 3

柯里化

柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的原函数变换成接受一个单一参数（原函数的第一个参数）的函数，并且返回一个新函数，新函数能够接受余下的参数，最后返回同原函数一样的结果。

function multiply(a, b, c){
    return a * b * c;
}
multiply(1,2,3);

// 使用柯里化
function multiply(a){
    return b => {
        return c => {
            return a * b *c
        }
    }
}
multiply(1)(2)(3);

柯里化有 3 个常见作用： 参数复用、提前返回、延迟计算/运行

// ES5
function currying(fn){
    let reset1 = Array.prototype.slice.call(arguments);
    reset.shift();
    return function (){
        let reset2 = Array.prototype.slice.call(arguments);
        return fn.apply(null, reset1.concat(reset2));
    }
}

// ES6
function currying(fn, ...reset1){
    return function(...reset2){
        return fn.apply(null, reset1.concat(reset2));
    }
}

function sayHello(name, age, fruit) {
 console.log(console.log(`我叫 ${name},我 ${age} 岁了, 我喜欢吃 ${fruit}`))
}
var curryingShowMsg1 = currying(sayHello, '小明')
curryingShowMsg1(22, '苹果') // 输出: 我叫 小明,我 22 岁了, 我喜欢吃 苹果
var curryingShowMsg2 = currying(sayHello, '小衰', 20)
curryingShowMsg2('西瓜') // 输出: 我叫 小衰,我 20 岁了, 我喜欢吃 西瓜

编写可以复用和配置的小代码块：

function discount(price, discount){
    return price * discount;
}
let price1 = discount(500, 0,1);
let price2 = discount(200, 0.1);
let price3 = discount(10000, 0.1);

// 改编为柯里化
function discount(discount){
    return (price) => {
        return price * discount;
    }
}
// 计算1折之后的价格
const tenPercentDiscount = discount(0.1);
tenPercentDiscount(500);
tenPercentDiscount(200);

// 计算2折之后的价格
const twentyPercentDiscount = discount(0.2);
twentyPercentDiscount(500);
twentyPercentDiscount(1000);

即在只能确定一个参数而无法确定另一个参数时，代码设计变得更方便与高效，达到了提示性能的目的。

避免频繁调用具有相同参数的函数：

function volume(l, w, h){
    return l * w * h;
}
volume(200, 30, 100);
volume(32, 45, 100);
volume(25, 15, 100);

// 改编为柯里化, 100的值是固定的
function volume(h){
    return (l) => {
        return (w) => {
            return l * w * h;
        }
    }
}
const hCylinderHeight = volume(100);
hCylinderHeight(200)(30) // 600000
hCylinderHeight(2322)(232) // 53870400

通用的柯里函数

function curry(fn, ...reset1){
	return (...reset2) => {
        return fn.apply(null, reset1.concat(reset2));
    }
}

function volume(l, h, w){
    return l * h * w;
}
const hCy = curry(volume, 100);
hCy(200, 900);  // 18000000
hCy(70, 60);    // 420000

使用递归实现curry函数

只给curry函数传递一个fn就达到目的

function curry(fn){
    const c = (...reset1) => reset1.length === fn.length ?
              fn(...reset1) : (...reset2) => c(...reset1,  ...reset2);
	return c;
}

反柯里化

// ES5
function unCurrying(fn){
    return function (tar){
        let reset = Array.prototype.slice.call(arguments);
        reset.unshift();
        return fn.apply(tar, reset);
    }
}
// ES6
function unCurrying(fn){
    return function(tar, ...reset){
        return fn.apply(tar, reset);
    }
}

let push = unCurrying(Array.prototype.push);
function execuPush(){
    push(arguments, 4);
    console.log(arguments);
}

execuPush(1,2,3);

简单说，函数柯里化就是对高阶函数的降阶处理，缩小适用范围，创建一个针对性更强的函数。而反柯里化就是反过来，增加适用范围，让方法使用场景更大。使用反柯里化, 可以把原生方法借出来，让任何对象拥有原生对象的方法。

可以这样理解柯里化和反柯里化的区别：

1. 柯里化是在运算前提前传参，可以传递多个参数；
2. 反柯里化是延迟传参，在运算时把原来已经固定的参数或者 this 上下文等当作参数延迟到未来传递。