闭包，实现区间取值

利用闭包的特性，实现一个区间取值

利用闭包的特性，实现一个区间取值

也是从别的地方学习到的，发来让大家看到，希望对大家也会有帮助，我也就是为了方便，做个笔记。

// 定义一个函数，函数里面返回一个函数，产生闭包，使内部函数可以访问到外部函数，让外部函数作用域不会销毁，
// v是filter里的第一个参数，也就是说数组的每一项的值

   let arr = [1, 2, 3, 4, 5, 6, 7, 8]
    function between(a, b) {
        return function (v) {
            return v >= a && v <= b
        }
    }
    console.log(arr.filter(between(2, 9)))

// 利用闭包实现了一个 点击按钮 按钮就向指定方向滚动

```html
 <button message="点我试试">点我试试</button>

 let but = document.querySelectorAll("button")
        but.forEach(function (item) {
            // 让left变量放到父级作用域，不会每次点击都要从左边重新从1开始
            // 但是每次点击都速度都会变快
            // 解决办法 ，道理是一样的 把定时器也放到全局去控制，先把控制定时器的变量interval置为false，当条件为真的时候开启定时器
            // 同时把interval置为true，这样下次点击的时候 if条件就变成了假 就不会再次执行setInterval，就做到了只执行一次setInter
            // let left = 1;
            let interval = false;
            item.addEventListener("click", function () {
                // let left = 1;
                // setInterval(function () {
                //     item.style.left = left++ + "px"
                // }, 100);
                if (!interval) {
                    let left = 1;
                    // interval = true
                    // 也可以把setInterval的值赋值给interval 让其变为真
                    interval = setInterval(function () {
                        item.style.left = left++ + "px"
                    }, 100);
                }
            })
        });

区间选值，并带有排序的功能

let list = [{
        title: "one",
        product: "js",
        price: 10
    },
    {
        title: "two",
        product: "jq",
        price: 20
    },
    {
        title: "three",
        product: "vue",
        price: 50
    },
    {
        title: "four",
        product: "react",
        price: 70
    }
]
// 按价格升序排列，如果type=“asc” 则降序排列
function order(field, type = "asc") {
    return function (a, b) {
        if (type == "asc") {
            return a[field] > b[field] ? 1 : -1;
        } else {
            return a[field] > b[field] ? -1 : 1;
        }
    }
}
let sort = list.sort(order("price", "desc"));
console.table(sort)

// 用闭包会产生缓存泄露，举个栗子，我只想要div里的desc这个值，所以最后要把div这个缓存清理掉

 <div desc="one">one</div>
<div desc="two">two</div>

 let divs = document.querySelectorAll("div")
        divs.forEach(function (item) {
            let desc = item.getAttribute("desc")
            item.addEventListener("click", function () {
                // console.log(item.getAttribute("desc"))
                console.log(desc)
                console.log(item)
            })
            item = null // 把itme赋值为空，就能清楚了div那块缓存，
        })

// this的指向问题，普通函数 this指向它的调用者， 而箭头函数则指向它的上下文对象

 let hd = {
        user: "输出打印",
        get: function () {
            // 我返回一个函数，函数体内返回this.user
            //  let That=this//解决办法就是把this在函数体重新赋值给一个变量，或者使用箭头函数
            return () => {
                return this
                    .user //当用let a=hd.get() console.log(a()) 调用的时候会返回undefind 因为this指向的是window，没有user
                // 解决办法就是把this在函数体重新赋值给一个变量，或者使用箭头函数
            }
        }
    }
    // console.log(hd.get())
    // console.log(hd.get()())//它会输出undefined 因为此时this指向的是window,window里面没有user
    let a = hd.get()
    console.log(a()) //它会输出undefined 因为此时this指向的是window，window里面没有user
    // 这样执行hd对象里的get函数，函数体内的this指向是指向hd对象的，所以this.user可以获取到hd对象里的user值