第二十章 闭包和cookie

一,闭包

• 概念:在函数外部访问其内部的局部变量的函数叫做闭包。
• 原理:通过匿名函数 将局部变量驻留在内存当中,达到全局变量的效果
• 类型:函数(其实闭包也就数一个函数)
• 作用:访问另一个函数作用域中的变量

讲闭包之前首先先说一下自执行函数

那么什么是自执行函数呢
自执行函数也就拉姆达函数
写法:

          (function(){

                函数体
         })()

作用:他会自己主动触发里面的事件
如:

(function(x){  //他也可以传参
        alert(x)
        })(258)

自执行函数
如图他可以主动去执行里面的函数体
说说他的优缺点
由于外部无法引入内部变量,所以执行完以后内存很快被释放掉 不会污染全局对象

• 优点

1.不会污染全局对象
2.定义和调用合为一体

---

创建闭包的方式

创建闭包的常见方式就是在一个函数内部创建另一个函数,通过另一个函数来访问这个函数的局部变量

function Person(){
        var name1 = "哈哈哈"
        //闭包就是一个函数
        return function(){
            return name1
        }
    }
    //可以通过闭包可以访问私有变量
    console.log(Person()());

闭包

全局变量

举例:如我们想要一个自增的变量,我们需要创建一个全局变量来进行自增 如这样

  <script>
     //全局生命周期在页面关闭之后
    var num  = 0;
    function a(){
        num++;
        console.log(num);
    } 
    setInterval(a,1000)
    </script>

全局变量

但用局部变量如何去实现呢?

局部变量

 function add(){
        var x = 0;
        return function(){
            x++;
            return x;
        }
    }
    console.log(add()());
    console.log(add()());

我们猜一下这样用闭包的实现 控制台输出的会是1和2吗

例
并不会,因为每次调用add()的时候都会从0开始
解决方法

function add(){
        var x = 0;
        return function(){
            x++;
            return x;
        }
    }

    var addFn = add();
    console.log(addFn());
    console.log(addFn());

解决方案
闭包的优缺点

• 优点
  减少了全局变量的使用频率,防止污染
• 缺点
  闭包作用域返回的局部变量不会及时呗释放,所以可能占用更多内存,过多会导致内存遗漏

那么如何来解决这个缺点呢?就是释放内存
设置null释放内存

 <script>
    function add(){
        var x = 0;
        return function(){
            x++;
            return x;
        }
    }
    var addFn = add();
    console.log(addFn());
    console.log(addFn());
      //设置null释放内存 
      addFn = null;
    console.log(addFn());
    </script>

这样就被释放掉了

---

二,cookie

cookie 本地客户端存储相关数据 是由网景公司设计的

• cookie的组成

名/值 组成 name = value[expires=date]
[]里面代码的是日期 数据存储周期
下面我们来设置一个cookie

document.cookie = "user=侯旭"
        alert(document.cookie)

cookie

那么它存在哪里呢?怎么去看到他呢?

位置

然后说两种方法

• 1.encodeURIcomponent() 编码
• 2.decodeURIcomponent() 解码
  用法

 document.cookie = "user="+encodeURIComponent("侯旭");
        alert(document.cookie)

他会像把密码加密一样,变成一段编码

编码

如果我们需要解析成我们可以看懂的数据,再用上面的解码decodeURIComponent(需要鞋码的数据)。

如何设置过期时间

如 我们要设置一个七天之后自动过期的cookie
今天的日期是2021年6月2日

 //设置过期时间 
        // setDate() 设置月份中的某一天 
        var date = new Date();
        date.setDate(date.getDate()+7) //时间是一周以后
        document.cookie = "user="+encodeURIComponent("侯旭")+";expires="+date;
        alert(decodeURIComponent(document.cookie))

过期时间

---

删除cookie

将日期时间设置为0 或更提前就可以删除cookie了