JavaScript 闭包

2021-07-09 02:18

阅读:650

标签:line   核心   neu   NPU   +=   fan   分享图片   sed   按键   

实用的闭包

  通常你使用只有一个方法的对象的地方,都可以使用闭包。在 Web 中,你想要这样做的情况特别常见。大部分我们所写的 JavaScript 代码都是基于事件的 — 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键)。我们的代码通常作为回调:为响应事件而执行的函数。假如,我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size,然后通过相对的 em 单位设置页面中其它元素(例如header)的字号:

1 function makeSizer(size) {
2     return function () {
3         document.body.style.fontSize = size + ‘px‘;
4         console.log(size);
5     };
6 }
1     input type="button" onclick="makeSizer(12)();" name="button" id="btn12" value="12">
2     input type="button" onclick="makeSizer(14)();" name="button" id="btn14" value="14">
3     input type="button" onclick="makeSizer(16)();" name="button" id="btn16" value="16">

用闭包模拟私有方法

  常用编程语言中,比如 Java、C#,是支持将方法声明为私有的,即它们只能被同一个类中的其它方法所调用; 而JavaScript没有这种原生支持,但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问:还提供了管理全局命名空间的强大能力,避免非核心的方法弄乱了代码的公共接口部分。

  下面的示例展现了如何使用闭包来定义公共函数,并令其可以访问私有函数和变量。这个方式也称为模块模式

 1 var Counter = (function () {
 2     var privateCounter = 0,count;
 3 
 4     function changeBy(val) {
 5         privateCounter += val;
 6         count += val;
 7     }
 8     return {
 9         increment: function () {
10             console.log(‘value +1‘);
11             changeBy(1);
12         },
13         decrement: function () {
14             console.log(‘value -1‘);
15             changeBy(-1);
16         },
17         value: function () {
18             console.log(‘value is :%s‘,privateCounter);
19             return privateCounter;
20         },
21         num:count
22     }
23 })();
24 
25 var Counter1 = Counter;
26 var Counter2 = Counter;
27 console.log(Counter1.value()); // 0 
28 Counter1.increment();
29 Counter1.increment();
30 console.log(Counter1.value()); // 2 
31 console.log(Counter2.value()); // 2 
32 Counter1.decrement();
33 console.log(Counter1.value()); // 1 
34 console.log(Counter2.value()); // 1 

  每个闭包都有它自己的词法环境;而这次我们只创建了一个词法环境,为三个函数所共享:Counter.increment,Counter.decrement 和 Counter.value。
该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项:名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。
这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域,它们都可以访问 privateCounter 变量和 changeBy 函数。

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

技术分享图片技术分享图片
 1 var Counter = function () {
 2     var privateCounter = 0, count;
 3 
 4     function changeBy(val) {
 5         privateCounter += val;
 6         count += val;
 7     }
 8     return {
 9         increment: function () {
10             console.log(‘value +1‘);
11             changeBy(1);
12         },
13         decrement: function () {
14             console.log(‘value -1‘);
15             changeBy(-1);
16         },
17         value: function () {
18             console.log(‘value is :%s‘, privateCounter);
19             return privateCounter;
20         },
21         num: count
22     }
23 };
24 
25 var Counter1 = Counter();
26 var Counter2 = Counter();
27 console.log(Counter1.value()); // 0 
28 Counter1.increment();
29 Counter1.increment();
30 console.log(Counter1.value()); // 2 
31 console.log(Counter2.value()); // 0 
32 Counter1.decrement();
33 console.log(Counter1.value()); // 1 
34 console.log(Counter2.value()); // 0 
View Code

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

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

 

JavaScript 闭包

标签:line   核心   neu   NPU   +=   fan   分享图片   sed   按键   

原文地址:https://www.cnblogs.com/he-bo/p/9566678.html


评论


亲,登录后才可以留言!