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;
    }
    
  • 相关阅读:
    又发现新的QQ系统消息相关dll文件
    修改QQ版本号,解决QQ版本过低
    学DIV+CSS技术,如何入门?
    删除MSN广告及屏蔽MSN网页广告的方法
    制作网页需要掌握的几个基本技能
    陈晓薇的灿烂人生:比美丽更动人
    屏蔽QQ系统广播消息方法
    HTML结构化CSS网页布局入门指南
    Photoshop常用快捷键(逐步熟悉)
    如何去除视频上的水印?
  • 原文地址:https://www.cnblogs.com/ww-523-99/p/14028770.html
Copyright © 2011-2022 走看看