zoukankan      html  css  js  c++  java
  • 对于闭包的自我理解

    闭包是什么?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div>
        <button id="father" onclick="add()">计数加一</button>
        <button id="children" onclick="reduceFn()">计数加一</button>
        // <button id="children" onclick="reduce()()">计数加一</button>
        // <button id="children" onclick="(reduce())()">计数加一</button>
    	// 看似与第二行是相同的,但是实际上并没有闭包
    </div>
    </body>
    <script>
        const add = (() => {
            let count = 0
            return () => {
                document.getElementById('father').innerHTML = count
                return count++
            }
        })()
        const reduce = function () {
            let count = 0
            return () => {
                document.getElementById('children').innerHTML = count + '' + 'reduce'
                return count++
            }
        }
        const reduceFn = reduce()
    </script>
    </html>
    

    当我们在网上搜索闭包是什么的时候往往最先记住的是它的表现形式“会生成一个储存在内存中的属性,不会在方法结束时销毁这个属性,在之后再次调用这个方法还能重复修改本属性”。

    如果学过vue的话,就会反应过来,这不就相当于在data中添加了一个属性吗?不同于data中的属性在当前组件中谁都能使用一样,闭包生成的值只能由闭包函数来修改,是一个闭包函数的独有属性。

    内存泄漏

    由于js的垃圾回收机制(垃圾回收机制暂未形成自己的看法),对于存在内存中的DOM节点不能销毁,所以要手动销毁

    //最后应将oDiv解除引用来避免内存泄露
    function closure(){
        var oDiv = document.getElementById('oDiv');
        var test = oDiv.innerHTML;
        oDiv.onclick = function () {
            alert(test);
        };
        oDiv = null;
    }
    
  • 相关阅读:
    web 后台返回json格式数据的方式(status 406)
    消息队列比较
    CAP
    Redis分布式锁的正确实现方式
    idea 快捷键
    给web请求加遮罩动画
    java动态代理实现与原理详细分析(代码层面解释了AOP的实现)
    Spring框架IOC和AOP的实现原理(概念)
    springboot后台控制重定向
    消息队列如何保证幂等性?
  • 原文地址:https://www.cnblogs.com/ww-523-99/p/14028770.html
Copyright © 2011-2022 走看看