如何使用闭包在 JavaScript 中创建私有计数器？

闭包是捆绑在一起（封闭）的函数与对其周围状态（词法环境）的引用的组合。换句话说，闭包使您可以从内部函数访问外部函数的范围。

示例：这里内部与外部形成闭包。 str变量可以称为私有成员，我们可以访问其值，但不能直接修改。

Javascript

    function outer() {
        let str = "GeeksforGeeks";
        function inner() {
            console.log(str);
        }
        return inner;
    }
    const fun = outer();
    fun();

输出：

GeeksforGeeks

私有计数器的概念意味着我们不能公开/全局地直接修改计数器变量。下面的分步指南将教你如何实现一个带闭包的私有计数器并理解它。

第 1 步：创建counter.js和index.html文件。您可以为文件提供任何允许的名称。

第二步：首先从index.html文件开始，创建一个前端来查看计数器。我们将创建一个

来显示计数器的值和两个按钮，一个用于递增计数器，另一个用于递减计数器。

索引.html

  

    
    

  

    
        Private Counter using Closure
    
  
    
    
  
        
        0
    
  
    
    
        Increment
    
      
    
        Decrement
    

  

这里我们使用 JavaScript 文件中的counterHandler函数来处理按钮的点击。按钮的值有助于我们区分单击了哪个按钮。并且有身份证 div 以便我们可以使用它从 JavaScript 代码更新它。

第 3 步：让我们 现在与 counter.js 归档并实施 幕后功能。

计数器.js

// Global function which would form
// closure with modify function
function counter() {
  
  // Private counter variable
  let count = 0;
  
  // To increment the value of counter
  function increment() {
    count++;
  }
  
  // To decrement the value of counter
  function decrement() {
    count--;
  }
  
  // Modify function forms closure
  // here which is used outside
  function modify(val) {
  
    // To check increment or decrement
    // button has been clicked
    if (val === "1") increment();
    else if (val === "0") decrement();
  
    // Return the counter
    return count;
  }
  
  // Returning to make it available
  // outside counter function
  return modify;
}
  
// Storing the closure modify
const closure = counter();
  
// This function handles the button
// click, objButton to get value
function counterHandler(objButton) {
  
  // Storing the value return by modify
  let count = closure(objButton.value);
  
  // Getting div by it's id
  // and modifying its inner html
  document.getElementById("counter_div")
    .innerHTML = "
" + count + "
";
}

当按钮被点击时 counterHandler被调用，我们从objButton对象中获取按钮的值。如果该值为一 (1)，则递增，否则递减计数变量的计数器的值。

在counter函数中，我们有一个计数器变量count ，用于递增的increment函数和用于将值减一的decrement函数。当调用计数器函数时，修改函数作为闭包返回给全局，我们将其实例存储在闭包常量中。

最后，我们使用其innerHTML属性将 div 内容修改为闭包返回的计数器的值。

第 3 步：复制 HTML index.html文件的完整路径并将其粘贴到任何浏览器中。在浏览器中加载 HTML 文件后，您会看到类似的内容。现在玩 递增和递减按钮，观察计数器值的变化。

现在让我们看看在单击按钮时使用开发者工具在后端会发生什么。在下图中，我们使计数器值等于 -1。查看范围是如何定义的以及如何与之相关的。

开发者工具中的范围

前端的计数器值

这就是在 JavaScript 中使用闭包实现私有计数器变量的方法。闭包提供了一种在 JavaScript 中实现数据封装功能的方法。

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures