JavaScript 进阶第八章（闭包）

最新推荐文章于 2024-09-11 15:33:18 发布

海海呐

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量434

点赞数 6

分类专栏： JavaScript进阶文章标签： javascript

本文链接：https://blog.csdn.net/m0_56344602/article/details/120049242

版权

JavaScript进阶专栏收录该内容

13 篇文章 3 订阅

订阅专栏

概念

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），只要出现引用了外部变量的函数,那么这个现象就叫做闭包

作用

让数据变得更加的安全
优化代码
函数内返回了另外一个函数

代码演示

不使用闭包

<body>
  <button>自增</button>
  <h1></h1>
 <script>
    const btn = document.querySelector("button");
    const h1 = document.querySelector("h1");
    let num = 0;
    let arr = [{ name: "上路" }, { name: "中路" }, { name: "射手" }, { name: "打野" }, { name: "辅助" }];

    h1.innerText = arr[num].name;
    btn.onclick = function () {
      num++;
      if (num >= arr.length) {
        num = 0;
      }
      h1.innerText = arr[num].name;
    }
  </script>
</body>

使用闭包

<body>
  <button>自增</button>
  <h1></h1>
  <script>

    const btn = document.querySelector("button");
    const h1 = document.querySelector("h1");

    function setElements() {
      let num = -1;
      let arr = [{ name: "上路" }, { name: "中路" }, { name: "射手" }, { name: "打野" }, { name: "辅助" }];
      return function () {
        num++;
        if (num >= arr.length) {
          num = 0;
        }
        return arr[num].name;
      }
    }

    const getElement=setElements();

    h1.innerText = getElement();
    btn.onclick = function () {
      h1.innerText = getElement();
    }
  </script>
</body>