闭包

/*
    闭包：
    概念：暂未释放的一个函数执行空间
    作用：被用于存储私有数据，不污染外界，避免命名冲突
    典型用法：闭包内存数据，对外返回该数据的操作API; 函数式编程中作为高阶函数去加工一个入参的函数
    注意事项：闭包持续不释放会形成一定的内存压力，用完了以后对其返回值置空以释放闭包，避免内存泄露
*/


/*
函数式编程
概念：基于纯函数+闭包，实现函数的自由组合与变换
作用：函数的可复用性高，复杂的业务逻辑拆解为不同环节的流水线作业，便于阅读与维护
典型用法：组合、管道、柯里化、Promise化、函数缓存、只执行一次的函数...
注意事项：闭包+函数嵌套+递归 频繁切换上下文/作用域 时间空间开销均比较大 性能不如命令式编程
*/
 
 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" ,content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询成绩</title>
</head>
<body>
<input type="text" name="" id="ip" placeholder="请输入要查询的学生姓名">
<button id="btnSet">设置成绩</button>
<button id="btnGet">查询成绩</button>
<p id="pInfo">成绩显示区</p>
<script>
    function scrore(name) {
        const scores = {
            chinese: 0,
            math: 0,
            coding:0,
        };
        return {
            set(key,value) {
                scores[key] = value;
            },
            getAll() {
                return `${name}:${JSON.stringify(scores)}`;
            },
            get(key) {
                return scores[key];
            }
        };
    }
</script>
<script>
    const arr = ["张三疯","尼古拉斯赵四","隔壁老王"]

    const obj = {}
    arr.forEach(
        name => obj[name] = scrore(name)
    )
    console.log(obj);
    btnSet.onclick = function(){
        let [name,key,value] = ip.value.split(":")
        // arr.push(name)
        obj[name].set(key,value)
    }
    btnGet.onclick = function() {
        const name = ip.value
        pInfo.innerText = obj[name].getAll()
    }

</script>
</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" ,content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行账户</title>
</head>
<body>
<script>
    function account(name,money) {
        return function(n) {
            money += n
            console.log(name,"的最新余额是",money);
        }
    }
    const saveFn1 = account("张三",1)
    saveFn1(5000,99)
</script>


<script>
    function account(name,money) {
        return{
            // 存钱
            save:function(n) {
                money += n
            },
            // 取钱
            withdraw:function(n){
                money -= n
                return n
            },
            // 查询余额
            query:function() {
                return money
            }

        }
    }
   let zs = account("张三",0)
    zs.save(100)
    zs.withdraw(99)
    let zsquery =  zs.query()
    console.log(zsquery);
    // zs = null //释放闭包函数
    // console.log(account());
</script>
<script>


</script>
</body>
</html>
posted @ 2022-08-08 22:43  禅心佛子  阅读(45)  评论(0)    收藏  举报