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 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
Javascript 面向对象 继承
May 13 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
Node.js事件驱动
Jun 18 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
JS数组方法slice()用法实例分析
Jan 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
php的一些小问题
2010/07/03 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
自我评价的正确写法
2013/09/19 职场文书
顶碗少年教学反思
2014/02/21 职场文书
婚礼主持词
2014/03/13 职场文书
大学生英语演讲稿
2014/04/24 职场文书
导师评语大全
2014/04/26 职场文书
自主招生教师推荐信
2014/05/10 职场文书
cf战队收人口号
2014/06/21 职场文书
安全环保演讲稿
2014/08/28 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
投资入股合作协议书
2014/10/28 职场文书
保险公司增员口号
2015/12/25 职场文书
外出听课学习心得体会
2016/01/15 职场文书