JavaScript 闭包
2021-07-09 02:18
标签:line 核心 neu NPU += fan 分享图片 sed 按键 通常你使用只有一个方法的对象的地方,都可以使用闭包。在 Web 中,你想要这样做的情况特别常见。大部分我们所写的 JavaScript 代码都是基于事件的 — 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键)。我们的代码通常作为回调:为响应事件而执行的函数。假如,我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size,然后通过相对的 em 单位设置页面中其它元素(例如header)的字号: 常用编程语言中,比如 Java、C#,是支持将方法声明为私有的,即它们只能被同一个类中的其它方法所调用; 而JavaScript没有这种原生支持,但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问:还提供了管理全局命名空间的强大能力,避免非核心的方法弄乱了代码的公共接口部分。 下面的示例展现了如何使用闭包来定义公共函数,并令其可以访问私有函数和变量。这个方式也称为模块模式 每个闭包都有它自己的词法环境;而这次我们只创建了一个词法环境,为三个函数所共享:Counter.increment,Counter.decrement 和 Counter.value。 注意我们定义了一个匿名函数,用于创建一个计数器。我们立即执行了这个匿名函数,并将他的值赋给了变量 请注意两个计数器 counter1 和 counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。 以这种方式使用闭包,提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。 JavaScript 闭包 标签:line 核心 neu NPU += fan 分享图片 sed 按键 原文地址:https://www.cnblogs.com/he-bo/p/9566678.html实用的闭包
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">
用闭包模拟私有方法
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
该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项:名为 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
每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。