后盾人JS--闭包明明白白

延伸函数环境生命周期

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function hd(){
            let n = 1
            return function sum(){
                let m =1
                return function show(){
                console.log(++m)
                }
            }
        }
        let a = hd()()
        a()
        a()
    </script>
</body>
</html>

构造函数中的作用域的使用形态

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Hd(){
            let n = 1
            this.sum = function(){
                console.log(++n)
            }
        }
        let a = new Hd()
        a.sum()
        a.sum()
        a.sum()
    </script>
</body>
</html>

模拟出var的伪块作用域

var没有块级作用域，但是有函数作用域

这样可以顺利打印出i：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i=1;i<=3;i++)
    {
        (function(i){
            setTimeout(function(){
                console.log(i)
            },1000)
        })(i)
    }
    </script>
</body>
</html>

闭包获取价格区间

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [1,23,4,5,6,7,8,9]
        function between(a,b){
            return function(v){
                return v>=a && v<=b
            }
        }
        console.log(arr.filter(between(3,9)))
 </script>
</body>
</html>

闭包动画

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    button {
        position: absolute
    }
</style>

<body>
    <button message="后盾人">houdunren</button>
    <script>
        let btns = document.querySelectorAll("button")
        btns.forEach(function (item) {
            item.addEventListener("click", function () {
                let left = 1
                setInterval(function () {
                    item.style.left = left++ + "px"
                }, 5)
            })
        })
    </script>
</body>

</html>

只要这样就可以防抖（直接是父级环境）：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    button {
        position: absolute
    }
</style>

<body>
    <button message="后盾人">houdunren</button>
    <script>
        let btns = document.querySelectorAll("button")
        btns.forEach(function (item) {
            let left = 1
            item.addEventListener("click", function () {
                setInterval(function () {
                    item.style.left = left++ + "px"
                }, 5)
            })
        })
    </script>
</body>

</html>

但是虽然不抖了，引来了加速的效果。。。

加一个判断条件，就只会执行一次了：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    button {
        position: absolute
    }
</style>

<body>
    <button message="后盾人">houdunren</button>
    <script>
        let btns = document.querySelectorAll("button")
        btns.forEach(function (item) {
            let left = 1
            let interval = false
            item.addEventListener("click", function () {
                if(!interval)
            {
                interval = true
                setInterval(function () {
                    item.style.left = left++ + "px"
                }, 5)
            }
            })
        })
    </script>
</body>

</html>

闭包排序

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let lessons = [
            {
                title:"媒体查询响应式布局",
                click:89,
                price:12
            },
            {
                title:"FLEX弹性盒模型",
                click:45,
                price:120
            },
            {
                title:"GRID栅格系统",
                click:19,
                price:67
            },
            {
                title:"盒子模型详解",
                click:29,
                price:52
            }
        ]
        function order(field){
            return function(a,b){
            return a[field] > b[field] ? 1 : -1
        }
        }
        let hd = lessons.sort(order("price"))
        console.table(hd)
    </script>
</body>
</html>

垃圾回收机制

当闭包不再使用时，手动解除对闭包函数和相关变量的引用，让垃圾回收机制能够回收这些内存。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div desc="houdunren">在线学习</div>
    <div desc="hdcms">开源产品</div>
    <script>
        let divs = document.querySelectorAll('div')
        divs.forEach(function(item){
            item.addEventListener("click",function(){
                console.log(item)
            })
            item = null
        })
    </script>
</body>
</html>

this遗留问题

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let hd = {
            user:"后盾人",
            get: function(){
                let This = this
                return function(){
                    return This.user
                }
            }
        }
        let a = hd.get()
        console.log(a())
    </script>
</body>
</html>

也可以使用箭头函数：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let hd = {
            user:"后盾人",
            get: function(){
                let This = this
                return ()=>{
                    return this.user
                }
            }
        }
        let a = hd.get()
        console.log(a())
    </script>
</body>
</html>