• 闭包JS


    一句话概括的话:闭包就是一个函数,捕获作用域内的外部绑定。

    官方的定义:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因为这些变量也称为该表达式的一部分。

    自由变量和闭包的关系:自由变量闭合于闭包的创建。

    内部逻辑就是

    自由变量:如果一个函数内部有其他函数,那么这些内部函数可以访问外部函数中声明的变量(这些变量就称为自由变量)。

    闭包的三个特性:

    1.函数嵌套函数

    2.函数内部可以引用外部的参数和变量

    3.参数和变量不会被垃圾回收机制回收

    闭包的缺点是常驻内存,会增大内存的使用量,使用不当很容易造成内存泄露.

    闭包的好处:

    1.希望一个变量可以长期驻扎在内存中

    2.避免全局变量的污染

    3.私有成员的存在

    function fn(){//闭包 fn()
      var a = 10;
      function f1(){
      a++;
      console.log(a);
      }
      return f1;
      }
      var f = fn();
      f();
      f();
      f(); 

    闭包解决索引值问题:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title></title>
      </head>
      <body>
      <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      </ul>
      </body>
      <script type="text/javascript">
      window.onload = function(){
      var aLi = document.getElementsByTagName("li");
      for(var i=0;i<aLi.length;i++){
      // (function(i){
      // aLi[i].onclick = function(){//当我们点击时for循环已经结束
      // alert(i)
      // }
      // })(i)
       
      aLi[i].onclick=function(index){
      return function(){
      alert(index);
      }
      }(i)
      }
      }
      </script>
      </html>
     

    内存泄漏问题:

    ie的js对象和dom对象使用不同的垃圾回收机制,因此闭包在ie中会导致内存泄露问题,也就是无法销毁驻留在内存中的元素。

    function closure(){
      var oDiv = document.getElementById("div1");//oDiv用完之后一直驻留在内存
       
      oDiv.onclic = function(){
      alert("oDiv.innerHTML");//这里用oDiv会导致内存泄露
      };
       
     

    closure();

    //将oDiv解除引用来避免内存泄露
      function closure(){
      var oDiv = document.getElementById("div1");//oDiv用完之后一直驻留在内存
      var test = oDiv.innerHTM
      oDiv.onclic = function(){
      alert(test);//这里用oDiv会导致内存泄露
      };
      oDiv = null;
     
  • 相关阅读:
    vscode远程开发
    iframe父子组件传值
    react项目地址栏添加包名
    记一次lombok踩坑记
    Android Adb修改系统时区 NTP 服务器
    ES文件浏览器4.1.9.7.4任意文件浏览漏洞
    SUID提权之python的os.setuid(0)提权
    PHP-8.1.0-dev 后门命令执行
    将博客搬至CSDN
    零基础快速上手HarmonyOS开发1---为什么要学习HarmonyOS?如何能快速上手?HarmonyOS架构解析、和Android深度对比
  • 原文地址:https://www.cnblogs.com/weiyz/p/7077712.html
Copyright © 2020-2023  润新知