javascript中闭包函数的作用

本文介绍如何利用JavaScript中的闭包实现一个安全的计数器功能,避免全局变量被意外修改,确保数据的安全性和私有性。

js中的变量有两种作用域 , 即全局变量和局部变量 .

现在 , 假如我们想用一个变量来进行计数 , 通常的写法如下 :

var count = 0 ;
function addCount(){
    count = count + 1 ;
    return count ;
}

这样 ,我们每次调用 addCount() 方法就可以进行计数 .
但是! 此时count是个全局变量 , 任何其他函数都可以对其进行修改 , 这样就不能保证数据的安全性 . 于是 , 我们想到了使用局部变量 , 例如:

function addCount(){
    var count = 0 ;
    count = count + 1 ;
    return count ;
}

如果这样写 , 那么每次调用addCount() 方法都会将count置0后重新加1,也就是每次只能得到同一个结果 ,就是 1 .

那么 , 有没有办法既可以做到变量的私有性 , 又可以完成这个计数的需求呢 ? 有! 那就是闭包函数. 例如:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>

var add = (function () {
    var counter = 0; // 仅仅首次加载网页文档时执行
    return function () {return counter += 1;} // 以后每次调用add()方法执行
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}

</script>
</body>
</html>

此处定义变量add是关键 , js中一种自调用的函数定义:

(function(a,b){
  return a+b;
})()

这样定义的函数 , 在文档加载时即自行调用 , 称作自调用函数 .
定义方法就是将函数用小括号包裹后 , 在后面跟随另一个小括号即可 .

回到示例中 , var counter = 0; 这条语句仅仅在首次加载网页时执行 , 初始化count = 0

当之后点击button调用add() 方法时 , 通过debug可以发现 , 仅仅执行了return 语句, 即执行了 function(){return counter += 1;}

这样就可以保证 , 只有add() 方法可以改变count的值 , 实现了变量私有化 .


关于闭包函数理解上的重大更新

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:newraina
链接:https://www.zhihu.com/question/38280516/answer/75853078
来源:知乎

还是先来看之前那个例子:

var add = (function () {
    var count = 0;
    return function () {
        return count += 1;
    }
})();

add(); // count = 1
add(); // count = 2
add(); // count = 3

等号右边的不是普通的函数,它被一个括号包裹了,这是立即执行函数,在赋值的时候就被执行了,并且再也不会执行第二次。而它执行的结果,就是返回了下面这个函数:

function () {
    return count += 1;
}

这个函数被赋给了add,那么现在,add相当于下面这个东西:

function add () {
    return count += 1;
}

count在哪里呢?count还在原来那个立即执行函数中,本来这个立即执行的东西执行过了里面东西就会被引擎回收再也找不到了,可是add引用了里面的一个函数,函数里还有还有一个count,为了add不会出错,引擎就没有回收第一行右边的东西,于是你可以把例子看成下面这个:

var count = 0;

function add () {
    return count += 1;
}

这样就可以理解了。
这个add引用的函数,就叫做闭包。


写在最后

知乎 真的是个很神奇的网站 . 上面有各种神奇的问题 , 也有很多神奇的答案 .

### JavaScript 闭包函数的定义与使用 #### 定义 闭包是指一个函数与其词法环境(Lexical Environment)绑定在一起形成的组合。它允许内嵌函数访问并操作其外部函数作用域,即使这个外部函数已经执行完毕[^3]。 #### 使用场景 闭包常用于以下几种情况: 1. **模块化编程**:通过闭包隐藏私有变量和方法,仅对外暴露必要的接口。 2. **延迟计算**:保存某些状态直到稍后需要时再处理。 3. **事件驱动程序设计**:为动态生成的内容附加回调函数。 --- #### 示例代码展示 以下是几个典型的闭包应用案例: ##### 示例 1: 创建简单的闭包 下面的例子展示了如何利用闭包返回一个可以记住父级作用域中变量值的新函数。 ```javascript function createMultiplier(factor) { return function(number) { return factor * number; }; } const double = createMultiplier(2); console.log(double(5)); // 输出 10 ``` 此例中 `createMultiplier` 返回了一个匿名函数,该匿名函数记住了参数 `factor` 的值[^3]。 --- ##### 示例 2: 私有成员模拟 借助闭包可实现类中的私有属性及方法。 ```javascript function Counter() { let count = 0; // 私有变量 this.increment = function() { count++; console.log(`Count is now ${count}`); }; this.getCount = function() { return count; }; } const counterInstance = new Counter(); counterInstance.increment(); // Count is now 1 console.log(counterInstance.getCount()); // 1 // 尝试直接访问会失败 -> console.log(count); 报错 undefined ``` 这里 `count` 是无法从外界直接修改或读取的私有变量,只有通过公开的方法才能对其进行操作[^1]。 --- ##### 示例 3: IIFE 结合闭包防止污染全局命名空间 立即执行函数表达式(IIFE)配合闭包能有效隔离局部逻辑不干扰全局上下文。 ```javascript (function(global){ const privateMessage = "This message stays within the closure"; global.showMessage = function(){ console.log(privateMessage); } })(window); showMessage(); // This message stays within the closure // 如果尝试访问privateMessage则报错 ``` 这段脚本将字符串存储于封闭环境中,并仅仅提供单一入口点供外部调用显示消息[^4]。 --- ##### 示例 4: 动态生成按钮及其关联动作 当页面中有多个相似控件需各自携带不同数据时,闭包尤为适用。 ```html <ul id="list"> <li>Item One</li> <li>Item Two</li> </ul> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', ()=>{ const items = document.querySelectorAll('#list li'); items.forEach((item,index)=>{ item.onclick=function(){ alert(`You clicked on Item ${index+1}`); } }); }); </script> ``` 这里的每一个列表项点击事件处理器都形成了各自的闭包,捕获到了对应的索引号。 --- ### 总结 以上介绍了多种构建以及运用JavaScript闭包的方式,它们不仅有助于解决实际开发过程里的诸多难题,而且还能提升代码质量与安全性。值得注意的是合理控制闭包生命周期以免造成不必要的性能损耗[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值