前端闭包的高级用法

什么是闭包？

闭包的意思其实就是在一个函数内部定义另一个函数(函数嵌套函数)，并返回这个内部函数。这样，内部函数就形成了一个闭包，可以访问外部函数的变量和参数。

function outFunction(){
    let outValue = "这是一个闭包";
    function innerFunction(){
        console.log(outValue);
    }
    return innerFunction;
}

const closure = outFunction();
closure();     // 输出 "这是一个闭包"

在前端开发中，主要有五大作用

保护变量

闭包可以用于保护变量，让他在外部无法直接访问或者修改。通过闭包，我们可以创建私有变量，只能通过内部函数来访问和修改。

function creatCounter(){
    let count = 0;
    return {
        increment: function(){
            count++;
        },
        decrement: function(){
            count--;
        },
        getCount: function(){
            return count;
        }
    }
}

const counter = creatCounter();
console.log(counter.getCount());    // 0

counter.increment();
counter.increment();
console.log(counter.getCount());    // 2

counter.decrement();
console.log(counter.getCount());    // 1

数据封装

闭包可以用于数据封装，通过创建私有变量和公共方法，实现对数据的封装和访问。

function createPerson(name,age){
    let _name = name;
    let _age = age;
    return {
        getName: function(){
            return _name;
        },
        getAge: function(){
            return _age;
        },
        setName: function(newValue){
            _name = newValue;
        },
        setAge: function(newValue){
            _age = newValue;
        }
    }
}

const person = createPerson("张三",18);

console.log(person.getName());  // 张三
console.log(person.getAge());   // 18

person.setName("李四");
person.setAge(20);

console.log(person.getName());  // 李四
console.log(person.getAge());   // 20

记忆效果

闭包可以用于实现记忆化功能，可以在函数执行过程中缓存并重新使用先前的计算结果，以提高函数的执行效率。

function memoize(func){
    let cache = {};
    return function(){
        if(n in cache){
            return cache[n];
        }
        const result = func(n);
        cache[n] = result;
        return result
    }
}

// 计算平方
function square(n){
    return n*n
}
// 使用记忆优化平方函数
const memoizeSquare = memoize(square);

console.log(memoizeSquare(2));  // 4
console.log(memoizeSquare(2));  // 4  直接从缓存中获取结果 结果为16

函数工厂

闭包可以实现函数工厂，函数工厂是一个函数，用来创建并返回其他函数。我们可以通过函数工厂根据不同的配置参数生成具有类似功能的函数，使代码更加灵活和可复用性。

function createMultiply(multiplier){
    return function(number){
        return number * multiplier;
    }
}

// 创建函数工厂
const double = createMultiply(2);
const triple = createMultiply(3);

console.log(double(3)); // 6
console.log(triple(3)); // 9

异步操作

闭包可以用于实现异步操作，通过使用闭包，我们可以在异步操作中捕获、保留状态。

function asyncFunction(callback){
    setTimeout(function(){
        const result = "Hello world";
        callback(result);
    },2000)
}

asyncFunction(function(result){
    console.log(result);
});