JS-闭包

最新推荐文章于 2024-06-24 19:42:59 发布

rfalcon

最新推荐文章于 2024-06-24 19:42:59 发布

阅读量115

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/rfalcon/article/details/106789370

版权

JS 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

JS自学

认识闭包

一、闭包需满足以下特点：

函数嵌套函数
内部函数使用外部函数的形参和变量
被引用的形参和变量不会被垃圾回收机制所回收

function a(num1) {
  var num2 = 10;
  function b() {
    alert(num1 + "," + num2);
  }
  return b;
}
var res = a(20);
res();//20,10

二、闭包的好处

一个变量常驻在内存中
避免全局污染
可以声明私有成员

//声明私有变量
var A = (function () {
  var age = 18;
  function a() {
    age += 2;
    alert(age);
  }
  function b() {
    age += 10;
    alert(age);
  }
  return {
    funcA: a,
    funcB: b,
  };
})();

var B = (function () {
  var age = 18;
  function a() {
    age += 5;
    alert(age);
  }
  function b() {
    age *= 20;
    alert(age);
  }
  return {
    funcA: a,
    funcB: b,
  };
})();
A.funcA();//20
A.funcB();//30
B.funcA();//23
B.funcB();//460

三、立即执行函数

function show() {
  alert("hello world");
}
show();
var show = function () {
  alert("hello world");
};
show();
//立即执行函数
(function () {
  alert("hello world");
})();//hello world

var res = (function () {
 var a = 2;
  return function () {
    a++;
    alert(a);
  };
})();
res();//3

闭包实战

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        var aBtns = document.getElementsByTagName("button");
        for (var i = 0; i < aBtns.length; i++) {
          aBtns[i].onclick = (function (index) {
            return function () {
              alert(index);
            };
          })(i);
        }
      };
    </script>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </body>
</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>
    <style>
      #div1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
    <script>
      window.onload = function () {
        var oDiv = document.getElementById("div1");
        /* 会有内存泄漏，下面提供了解决方法
          oDiv.onclick = function () {
          console.log(oDiv);
          alert(oDiv.id);
        }; */

        /* var id = oDiv.id;
        oDiv.onclick = function () {
          alert(id);
        };
        oDiv = null; */

        oDiv.onclick = function () {
          alert(oDiv.id);
        };
        //页面解构的时候支持
        window.onload = function () {
          oDiv.onclick = null;
          oDiv = null;
        };
      };
    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

rfalcon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-闭包

JS自学认识闭包一、闭包需满足以下特点：函数嵌套函数内部函数使用外部函数的形参和变量被引用的形参和变量不会被垃圾回收机制所回收function a(num1) { var num2 = 10; function b() { alert(num1 + "," + num2); } return b;}var res = a(20);res();//20,10二、闭包的好处一个变量常驻在内存中避免全局污染可以声明私有成员//声明私有变量var A
复制链接

扫一扫

专栏目录