js系列-闭包

最新推荐文章于 2022-12-13 21:29:37 发布

前端蜗牛君

最新推荐文章于 2022-12-13 21:29:37 发布

阅读量306

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js javascript 闭包内存泄漏

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.csdn.net/zqd_java/article/details/109926418

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

提出问题：

1.什么是闭包（闭包的定义）

2.闭包有什么特点

3.闭包的应用场景

闭包

定义：可以访问其他函数内部变量的函数，就是一个闭包

个人感觉，闭包其实是一个独立的函数作用域，类似于全局作用域，里面变量和状态都会被保留下来，方便以后的访问。

闭包特点

1.可以访问函数内部的变量

2.变量的状态会保存在内存中，不会丢失

闭包应用场景

事件回调函数

这是最常见的闭包使用场景，

<body>
    <button>按钮1</button>
    <button>按钮2</button>
</body>
<script>
  var btns = document.querySelectorAll("button");
  for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = (function (i) {
      return function () {
        alert(`点击了第${i + 1}个按钮`);
      };
    })(i);
  }
</script>

闭包问题-内存泄漏

造成内存泄漏的原因也正是闭包的特点-保留上级函数作用域属性。

<body>
  <a id="id" href="">按钮1</a>
</body>
<script>
  //这段代码会导致内存泄露
  function aa() {
    var a = document.getElementById("id");
    a.onclick = function () {
      alert(a.id);
    }
  }
  // 解决方法为
  function bb() {
    var a = document.getElementById("id");
    var id = a.id;//解除循环引用
    a.onclick = function () {
      alert(id);
    }
    a = null;  // 将闭包引用的外部函数中活动对象清除
  }
</script>

总结来看：解决闭包内存泄漏就是将不再使用的外部引用函数指向null。