js闭包的实用性----应用场景

谁借莪１个温暖的怀抱￠ 2023-06-16 13:55 10阅读 0赞

上篇文章说了闭包的形成以及原理。  
这篇说一说闭包的实用性。

> 应用场景一：事件节流与事件防抖

这里讲一个事件防抖的例子，在监听input值发生变化的时候，定时发送请求，预防请求过多，服务器性能过载。

> 应用场景二 : 调整字号

样式部分

js部分（dom部分不难，脑补下就ok）

function makeSizer(size) { 
         return function() { 
                  document.body.style.fontSize = size + 'px';
              };
          }
    
          var size12 = makeSizer(12);
          var size14 = makeSizer(14);
          var size16 = makeSizer(16);
          //size12，size14 和 size16 三个函数将分别把 body 文本调整为 12，14，16 像素。
          //我们可以将它们分别添加到按钮的点击事件上。如下所示：
          document.getElementById('size-12').onclick = size12;
          document.getElementById('size-14').onclick = size14;
          document.getElementById('size-16').onclick = size16;

> 应用场景三 : 闭包模拟私有方法

编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。  
而 JavaScript 没有这种原生支持，但我们可以使用**闭包来模拟私有方法**。  
**私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。**  
下面的示例展现了如何使用**闭包来定义公共函数**，并令其可以访问私有函数和变量。这个方式也称为 **模块模式（module pattern）**：

在之前的示例中，每个闭包都有它自己的词法环境；而以上的示例我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。

该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。

这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。

这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

> 应用场景四 : 使用闭包创建多个计数器

定义了一个匿名函数，用于创建一个计数器。立即执行了这个匿名函数，并将他的值赋给了变量Counter。  
可以把这个函数储存在另外一个变量makeCounter中，并用他来创建多个计数器。

请注意两个计数器 Counter1 和 Counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。  
每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。  
然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

以这种方式使用闭包，**提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装**。

那么，闭包这么好用，是不是可以随心所欲的用呢，下一篇说说**闭包的性能考量**