javascript闭包的使用之按钮切换功能


Posted in Javascript onAugust 30, 2018

闭包实现按钮状态切换

看下面的代码:

var toggleBtn = document.getElementById('toggle');
var toggleFun = (function() {
 var checked = true;
 return function() {
  var color = checked ? 'red' : 'white';
  toggleBtn.style.backgroundColor = color;
  checked = !checked;
 };
})();
// 切换按钮
toggleBtn.addEventListener('click', toggleFun);

解释

上面的代码实现了点击按钮切换样式的功能,它用到了js的闭包特性。简单解释下:

toggleFun为一个立即执行函数,执行后toggleFun被赋值为内部函数:

toggleFun = function() {
   color = checked ? 'red' : 'white';
   toggleBtn.style.backgroundColor = color;
   checked = !checked;
 }

这个函数用到了外部函数的checked变量,这也是checked变量在立即执行函数执行完成后未被销毁的原因,因为还有其他地方用到了它。那么这个内部函数被用作事件监听器的回调函数,每点击一次就会被调用一次,从而可以通过更改checked的值来实现按钮切换效果。立即执行函数内的函数被全局下的toggleFun变量引用了,这就创建了一个闭包。

简而言之,闭包的作用就是在立即执行函数执行完并返回后,使得javascript的垃圾回收机制不会收回立即函数所占用的资源,因为立即执行函数的内部函数依赖立即执行函数中的变量。

额,上面写的太??铝耍?旅姘汛?肷晕⒏南拢?有┳⑹途突岣?忧逦??/p>

var toggleBtn = document.getElementById('toggle');
var outerFun = function() {
 var checked = true;
 // innerFun声明时用到了outerFun的局部变量
 var innerFun = function() {
  var color = checked ? 'red' : 'white';
  toggleBtn.style.backgroundColor = color;
  checked = !checked;
 };
 return innerFun;
};
var toggleFun = outerFun(); // toggleFun指向innerFun
// 切换按钮,每次点击都会调用innerFun
toggleBtn.addEventListener('click', toggleFun);

不用闭包,用全局变量

其实不用闭包也能实现按钮切换,不过就得用到全局变量来存储按钮状态:

var toggleBtn = document.getElementById('toggle');
var checked = true; // 全局变量存储按钮状态
var toggleFun = function() {
 var color = checked ? 'red' : 'white';
 toggleBtn.style.backgroundColor = color;
 checked = !checked;
};
toggleBtn.addEventListener('click', toggleFun);

但全局变量用多了会不好维护,代码不好控制。

补充:JavaScript闭包的概念及用法

1.闭包的概念: 

 闭包就是能够读取其他函数内部变量的函数.

 例如:  

function f1(){

var n=999;


function f2(){



alert(n); 


}


return f2;

}

var result=f1();

result(); // 999

 其中f2函数就是闭包。

 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,

 因此可以把闭包简单理解成"定义在一个函数内部的函数"。

 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

2.闭包的用途:

 闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,

 另一个就是让这些变量的值始终保持在内存中。

 怎么来理解这句话呢?请看下面的代码。

function f1(){


var n=999;


nAdd=function(){n+=1}


function f2(){



alert(n);


}


return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000

 在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,

 第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

 为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,

 而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

 这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,

 首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。

 其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,

 所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

总结

以上所述是小编给大家介绍的javascript闭包的使用之按钮切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 #Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 #Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 #Javascript
vue-router动态设置页面title的实例讲解
Aug 30 #Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 #Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 #Javascript
vue中rem的配置的方法示例
Aug 30 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
javascript常用对话框小集
2013/09/13 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python3.3实现乘法表示例
2014/02/07 Python
centos系统升级python 2.7.3
2014/07/03 Python
OpenCV实现人脸识别
2017/04/07 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python小白切忌乱用表达式
2020/05/29 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
中学生操行评语
2014/04/24 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
退税申请报告怎么写
2015/05/18 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python