JS高级（8）—— 闭包

电玩女神 2022-11-20 01:59 167阅读 0赞

#### 一、变量作用域 ####

变量根据作用域的不同分为两类：全局变量和局部变量

*  函数内部可以使用全局变量
 *  函数外部不可以使用局部变量
 *  当函数执行完毕，本作用域内的函数变量会销毁

#### 二、闭包到底是什么 ####

闭包指有权访问另一个函数作用域中变量的函数。—>闭包是函数  
简单理解就是：一个作用域可以访问另外一个函数内部的局部变量。

#### 三、产生闭包的条件 ####

当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包。被访问的局部变量所在的函数被称为“闭包函数”。

*  函数嵌套
 *  内部函数引用了外部函数的数据（变量/函数）

function fn1 () { 
      var a = 2;
      var b = 'abc';
      function fn2 () {  //执行函数定义就会产生闭包(不用调用内部函数)
        console.log(a)
      }
      fn2()
    }
    fn1();

上述代码可以使用chrome调试查看。图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
在fn2()的作用域中访问到了另一个函数fn1()中局部变量，产生闭包。

**运行结果：**  
![在这里插入图片描述][20201121170113575.png_pic_center]

#### 四、闭包的作用 ####

1.  使函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
2.  让函数外部可以操作（读写）到函数内部的数据（变量/函数）

问题:

*  函数执行完后，函数内部声明的局部变量是否还存在?  
    一般是不存在，存在于闭包中的变量才可能存在
 *  在函数外部能直接访问函数内部的局部变量吗?  
    不能，但我们可以通过闭包让外部操作它

#### 五、常见的闭包 ####

1.  将函数作为另一个函数的返回值：

function fn() { 
     var a = 2;
     function fun() { 
        console.log(a)
      }
      return fun
    }
    var f = fn();
    f();

![在这里插入图片描述][20201121173520202.png_pic_center]  
上述代码实现了：f全局作用域下可以访问fn内部的局部变量。

1.  将函数作为实参传递给另一个函数调用：

function showDelay(msg, time) { 
       setTimeout(function () { 
         alert(msg)
       }, time)
     }
     showDelay('atguigu', 2000)

#### 六、闭包应用 ####

##### 1、点击每一个li，打印出其对应的索引号 #####

（1）利用原先动态添加属性的方式：

var lis = document.querySelector('.nav').querySelectorAll('li');
    for (var i=0;i<lis.length;i++){ 
         lis[i].index = i;   //动态添加
         lis[i].onclick = function() { 
    		//无法直接打印console.log(i);由于此时的function()为异步任务，for循环为同步任务，则先会执行，输出结果只能为4
             // console.log(i);
             console.log(this.index)
         }
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

（2）利用闭包的方式得到当前li的索引号：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]

##### 2、8秒钟之后打印所有li元素的内容 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]

##### 3、打车价格 #####

打车起步价13（3公里内），之后每公里增加五元，用户输入公里数计算打车价格  
如果有拥堵情况，总价格多收取10元拥堵费

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]

#### 七、闭包的生命周期 ####

1.  产生：在嵌套内部函数定义执行完时就产生了（不是在调用）
2.  死亡：在嵌套的内部函数成为垃圾对象时

function fn1() { 
    	//此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
    	var a = 2;
    	function fn2 () { 
    		a++;
    		console.log(a)
    	}
    	return fn2
    }
    var f = fn1();
    f(); // 3
    f(); // 4
    f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

#### 八、自定义JS模块 ####

*  具有特定功能的js文件
 *  将所有的数据和功能都封装在一个函数内部（私有的）
 *  只向外暴露一个包含n个方法的对象或函数
 *  模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能  
      
      
    新建 myModule.js 文件，并在HTML中引入：

**写法一：**  
myModule.js 文件中：

function myModule() { 
    	//私有数据
    	var msg = 'My atguigu';
    	//操作数据的函数
    	function doSomething() { 
    		console.log('doSomething() '+msg.toUpperCase())
    	}
    	function doOtherthing () { 
    		console.log('doOtherthing() '+msg.toLowerCase())
    	}
    
    	//向外暴露对象(给外部使用的方法)
    	return { 
    		doSomething: doSomething,
    		doOtherthing: doOtherthing
    	}
    }

HTML中：

![在这里插入图片描述][20201122085000406.png_pic_center]

**写法二：**  
myModule.js 文件中：

(function () { 
      //私有数据
      var msg = 'My atguigu';
      //操作数据的函数
      function doSomething() { 
        console.log('doSomething() '+msg.toUpperCase())
      }
      function doOtherthing () { 
        console.log('doOtherthing() '+msg.toLowerCase())
      }
    
      //向外暴露对象(给外部使用的方法)
      window.myModule2 = { 
        doSomething: doSomething,
        doOtherthing: doOtherthing
      }
    })();

HTML中：

![在这里插入图片描述][20201122084935538.png_pic_center]

#### 九、闭包的缺点及解决 ####

1.  缺点

*  函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
 *  容易造成内存泄露

1.  解决

*  能不用闭包就不用
 *  及时释放

#### 十、内存溢出与内存泄漏 ####

1.  内存溢出

*  一种程序运行出现的错误
 *  当程序运行需要的内存超过了剩余的内存时，就抛出了内存溢出的错误

1.  内存泄漏

*  占用的内存没有及时释放
 *  内存泄漏积累多了就容易导致内存溢出
 *  常见的内存泄漏有：
    
     *  意外的全局变量
     *  没有及时清理的计时器或回调函数
     *  闭包

#### 十一、面试题 ####

##### 题1： #####

//代码片段一
    var name = "The Window";
    var object = { 
      name : "My Object",
      getNameFunc : function(){ 
        return function(){ 
          return this.name;
        };
      }
    };
    console.log(object.getNameFunc()());  //The Window 没有产生闭包
    
    
    //代码片段二
    var name2 = "The Window";
    var object2 = { 
      name2 : "My Object",
      getNameFunc : function(){ 
        var that = this;
        return function(){ 
          return that.name2;
        };
      }
    };
    console.log(object2.getNameFunc()()); //My Object 产生了闭包

![在这里插入图片描述][20201122092006936.png_pic_center]

##### 题2： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d779a13cc0b249679c13f0ca83d80d8e.png
[20201121170113575.png_pic_center]: /images/20221120/b232fddcd4e0476999a8177aa4f56c19.png
[20201121173520202.png_pic_center]: /images/20221120/f7ff13c6aa514937b947ea2180cdef06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/1ff68a6e0dce4bd4bba8266e64ce1300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/603bc9cc755c4a2ca172eda1398ffad5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/6614a7edfbde4019a63793d5d69e2e35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/1fa5776ed00b439bb35595de2ceef681.png
[20201122085000406.png_pic_center]: /images/20221120/25bc1b1cb30a40e8a5e9547c0067c465.png
[20201122084935538.png_pic_center]: /images/20221120/60ee2ea13b814bf183ffdbc1d37b13ee.png
[20201122092006936.png_pic_center]: /images/20221120/0f4abd5dbd104908b63569905cd9f0c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/65a6750bfa4240c68d3dfd031f517b45.png