闭包

闭包的概念及应用场景

闭包就是指那些能够访问自由变量的函数

自由变量指函数中使用的，既不是函数从参数也不是函数局部变量的变量

1. 从理论角度： 所有的函数都是闭包。
2. 从实际角度：
   • 即使创建他的上下午已经销毁，它仍然存在（比如：内部函数，从父函数返回）
   • 代码中引用了自由变量

引用场景

1. 柯里化函数 避免频繁调用具有相同参数的函数，同时又可以轻松服用

封装一个高阶函数

function getArea(width, height) {
    return width * height;
}
const area1 = getArea(10, 20);
const area2 = getArea(10, 30);
const area3 = getArea(10, 40);

function getArea(width) {
    return (height) => {
        return width * height;
    }
}

const getTenWidthArea = getArea(10);

const area2 = getTenWidthArea(30);
const area3 = getTenWidthArea(40);

2. 实现私有方法/变量 其实就是模块的方式，现代化的打包最终其实就是每个模块的代码项目独立

3. 匿名自执行函数

var fun = (function() {
    var num = 0;
    return function() {
        num++;
        return num;
    }
})();

console.log(fun())
console.log(fun())
console.log(fun())

4. 缓存一些结果 在外部函数创建一个数组，闭包函数可以更改/获取数组的值

function funParent() {
    let memo = []; // 生命周期被延长了
    function funTwo(i) {
        memo.push(i);
        console.log(memo)
    }
    return funTwo
}

const fn = funParent();
fn(1)
fn(2)

练习题

1. 第一个

// 实现一个compose 函数，用法如下
function fn1(x) {
    return x + 1
}
function fn2(x) {
    return x + 2
}
function fn3(x) {
    return x + 3
}
function fn4(x) {
    return x + 4
}
const a = compose(fn1, fn2, fn3, fn4);
console.log(a(5)) // 1+4+3+2+1

// 实现方式
// args数组列表 对应fn1, fn2, fn3, fn4
function compose(...args) {
    return (x) => {
        let arr = args.reduce((sum,cur) =>{
            return cur(sum)
        }, x)
        return arr
    }
}

2. 第二个

function currying(fn, ...args) {
    const originLenth = fn.length;
    let allArgs = [...args];

    const resFn = (...newArgs) => {
        // 把多次传入的参数整合起来
        allArgs = [...allArgs, ...newArgs];

        if (allArgs.length === originLenth) {
            // 长度相等的时候直接指向传入的fn函数拿到返回值
            return fn(...allArgs)
        } else {
            return resFn
        }
    }
    return resFn

}

const add = (a, b, c) => a+b+c;
const a1 = currying(add, 1)
const a2 = a1(2);
console.log(a2(3))

// const add = (a, b, c, f) => a+b+c+f;
// const a6 = currying(add, 1, 2, 9, 28)
// console.log(a6())

总结

1. 创建私有变量
2. 延长变量生命周期