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

闭包实现按钮状态切换

看下面的代码：

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的垃圾回收机制不会收回立即函数所占用的资源，因为立即执行函数的内部函数依赖立即执行函数中的变量。

额，上面写的太啰嗦了，下面把代码稍微改下，加些注释就会更加清晰：

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闭包的使用之按钮切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • javascript闭包的高级使用方法实例

    扩展Code: 复制代码 代码如下: var blogModule = (function (my) { my.AddPhoto = function () {//添加内部代码 }; return my;}(blogModule)); Say:将自身传进方法,然后实现了方法的扩展,有点象零件组装啊Code: 复制代码 代码如下: var blogModule = (function (my) {var oldAddPhotoMethod = my.AddPhoto; my.AddPhoto =

  • js bind 函数 使用闭包保存执行上下文

    复制代码 代码如下: window.name = "the window object" function scopeTest() { return this.name; } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: fu

  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟, 思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内 1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com) 2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX } 代码示例: 复制代码 代码

  • 深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解

    函数表达式 1.JavaScript中定义函数有2钟方法: 1-1.函数声明: 复制代码 代码如下: function funcName(arg1,arg2,arg3){  //函数体} ①name属性:可读取函数名.非标准,浏览器支持:FF.Chrome.safari.Opera. ②函数声明提升:指执行代码之前会先读取函数声明.即函数调用可置于函数声明之前. 1-2.函数表达式: 复制代码 代码如下: var funcName = function(arg1,arg2,arg3){  //函

  • Javascript的setTimeout()使用闭包特性时需要注意的问题

    setTimeout经常被用于延迟执行某个函数,用法为: 复制代码 代码如下: setTimeout(function(){ - }, timeout); 有时为了进行异步处理,而使用setTimeout(function-,0):比如: 复制代码 代码如下: function f(){ - // get ready setTimeout(function(){ -. // do something }, 0);   return -; } 在setTimeout设定的函数处理器之前,函数f返回

  • javascript点击按钮实现隐藏显示切换效果

    javascript点击按钮实现隐藏显示切换效果

    本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下 效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • Javascript中return的使用与闭包详解

    前言 Javascript中闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.而return语句在js中起到举足轻重的作用,该关键字不仅具有返回函数值得功能,还具有一些特殊的用法,下面就来看看关于Javascript中return的使用与闭包的详细介绍吧. 一.return的使用 案例一: var a=1; for(var b=0; b<10; b++){ return b; }; sonsole.log(b)//返回为空 个人认为此处左右

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

    闭包实现按钮状态切换 看下面的代码: var toggleBtn = document.getElementById('toggle'); var toggleFun = (function() { var checked = true; return function() { var color = checked ? 'red' : 'white'; toggleBtn.style.backgroundColor = color; checked = !checked; }; })(); /

  • javascript实现点击按钮切换轮播图功能

    本文实例为大家分享了js实现点击按钮切换轮播图的具体代码,供大家参考,具体内容如下 菜单区域实现 划过主菜单显示子菜单 轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2.点击右下角小圆也可以进行图片的跳转 (1)通过索引让变量进行随意的修改 3.每间隔3s进行轮播图的自动切换,鼠标放在图片上清除自动切换 (1)定时器 4.鼠标放在主菜单上显示子菜单,离开子菜单消失. 放在子菜单上显示

  • javascript闭包功能与用法实例分析

    javascript闭包功能与用法实例分析

    本文实例讲述了javascript闭包功能与用法.分享给大家供大家参考,具体如下: 理解闭包 闭包这个东西,确实是很麻烦.之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化. 闭包说得通熟易懂一点,就是指有权访问另一个函数作用域的变量的函数.创建闭包的常见方式,就是在一个函数内部创建另外一个函数,并返回. 我们这里举一个例子来说明,首先我们在函数f1内部定义一个函数f2. function f1(){ var n=999; function f2(){ aler

  • JS实现的按钮点击颜色切换功能示例

    JS实现的按钮点击颜色切换功能示例

    本文实例讲述了JS实现的按钮点击颜色切换功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击切换按钮颜色</title> </head> <body> <button id=

  • 教你如何使用firebug调试功能了解javascript闭包和this

    教你如何使用firebug调试功能了解javascript闭包和this

    对于跟我一样,自学javascript且没有其他语言学习经验的人来说,一开始的时候,javascript的调试也是一个比较大的难点,很多基础的东西都需要自己去摸索,这个过程是非常苦闷的. 想着趁机会将上面那篇闭包博文的配图用firebug再来演示一遍,也算是一点调试经验分享. 示例代码如下: 复制代码 代码如下: function fn(){ var max = 10; return function bar(x){     if (x > max) {     console.log(x);

  • 深入浅出理解JavaScript闭包的功能与用法

    本文实例讲述了JavaScript闭包的功能与用法.分享给大家供大家参考,具体如下: 理解闭包关键是理解JS的对象的本质以及垃圾收集机制.函数也是对象,也有属性,通常执行一个函数时,局部变量在函数执行完后,内存会被回收,这是JS的垃圾收集机制决定的,如果想保存局部变量所占用的内存,就必须把保存在另一个不被回收的变量中,通常是全局变量.函数在创建时,内部属性[[Scope]]保存了作用域链,作用域链中包含外部函数以及全局对象的变量,被称为变量对象.所以把内部函数返回时,由于把函数保存了,所以内部属

  • JavaScript自定义插件实现tabs切换功能

    JavaScript自定义插件实现tabs切换功能

    本文实例为大家分享了JavaScript实现tabs切换功能的具体代码,供大家参考,具体内容如下 自定义插件实现tabs切换功能 这是HTML代码: <script src="jquery-3.1.0.js"></script> <script src="plugs/demo01.js"></script> <style> #tabs>div{ height: 200px; width: 200px;

  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

  • iOS实现按钮点击选中与被选中切换功能

    其实这个没什么记的,初始化按钮给按钮分别设置选中时对图片和被选中时的图片,给按钮添加方法,在方法中实现三句话就OK了,下面直接看代码: 首先在.m中声明一个按钮 @property (nonatomic, strong) UIButton *selecBtn; //初始化按钮 UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom]; //给按钮设置图片 [button setBackgroundImage:[UIImage

  • 分步解析JavaScript实现tab选项卡自动切换功能

    本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

随机推荐