Javascript--闭包

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><button class="btn1"> 踩坑1 </button><button class="btn1"> 踩坑2 </button><button class="btn1"> 踩坑3 </button><button class="btn1"> 踩坑4 </button><script>var buttons1 = document.getElementsByClassName('btn1');/*(function(){for(var i=0; i<buttons1.length; i++){var btn = buttons1[i];btn.onclick = function(){alert(i);}}})(); *///上面这段代码看上去是没问题的，为什么会每次点击都是4呢//换个写法，上面的自执行函数等价于下面这种写法//讨论下闭包是什么function bindBtn1(){for(var i=0; i<buttons1.length; i++){var btn = buttons1[i];/*Javascript中，没有块级作用域，只有函数作用域。所以在函数中定义的变量，                       是只可以在函数内部被访问到的，包括在函数内部定义的子函数。所以内部函数clickFunc能访问到父函数的变量 i */var clickFunc = function(){alert(i);}/*如果内部函数存在被外部调用的可能，                       那么内部函数能访问到的外部函数的成员变量是不应该被Javacript引擎回收掉内存空间的。在这里clickFunc有被外部btn1点击访问的可能，                       所以他的父函数bindBtn1的内存空间在执行完成后是不会被回收内存的，因此clickFunc继续享有了父函数bindBtn1作用域的变量访问权限，*并且这个函数作用域在外部是不能被外界访问到的，                        是封闭的，被内部函数clickFunc所独享的，因此bindBtn1形成了一个闭包。*从本质上来说，闭包的形成是利用了Javacript内存回收机制，                        得到的一个封闭的内存块，这与Java中的一个对象是不是十分相似呢 */btn.onclick = clickFunc;  //这是内部函数的一个伟大的逃脱
                 }}bindBtn1();var viewbtn1 = buttons1;//那么来分析一下为什么，点击踩坑按钮每次都会输出同一个数字，而不是递增的数字呢//调试看看button1[0] 的onclick函数/* onclick : functionarguments : nullcaller : nulllength : 0name : 'clickFunc'......###########看看作用域###########[[scope]] : scopes[2] 0 : Closure (bindBtn1)   * 闭包作用域 i = 4i : 41 : Globle               * 全局作用域...################################*//************************************************************************重点来了：注意Closure (bindBtn1)   * 闭包作用域 i = 4i : 4内部函数的作用域除了全局作用域外，还有bindBtn这个闭包作用域。原来是这样，这几个内部函数 clickFunc 共用了一个闭包作用域啊！！！ 所以能访问到的 i 其实是一个。 所以每次点击按钮显示的 i 永远是一样的。那么如何解决这个问题呢，看看下面吧*************************************************************************/</script><br/><button class="btn2"> 填坑1 </button><button class="btn2"> 填坑2 </button><button class="btn2"> 填坑3 </button><button class="btn2"> 填坑4 </button><script>var buttons2 = document.getElementsByClassName('btn2');function bindBtn2(){for(var i=0; i<buttons2.length; i++){//要解决这个问题，我们需要让内部函数不能共享同一作用域//所以为每个内部函数创建不同的闭包作用域/*(function(j){var btn = buttons2[j];btn.onclick = function(){alert(j);}})(i);*///上面代码等价于下面的 ：function selfClosure(j){var btn = buttons2[i];var clickFunc = function(){alert(j);}btn.onclick = clickFunc;}selfClosure(i);}}bindBtn2();var viewbtn2 = buttons2;/************************************************************************调试 buttons2[0] 的onclick函数onclick : functionarguments : nullcaller : nulllength : 0name : 'clickFunc'......###########看看作用域###########[[scope]] : scopes[3] 0 : Closure (selfClosure)   * 闭包作用域 selfClosurej : 01 : Closure (bindBtn1)      * 闭包作用域 bindBtn1i : 42 : Globle                  * 全局作用域...################################现在每个内部函数都有了私有的selfClosure闭包作用域，                独享作用域中的j变量，所以就解决了上述问题。*************************************************************************/</script></body><html>

转载于:https://www.cnblogs.com/Jeb-Sun/p/6807481.html

Javascript--闭包相关推荐

Javascript闭包和闭包的几种写法及用途
好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途. 一.什么 ...
JavaScript学习总结(十六)——Javascript闭包（Closure）
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什 ...
全面理解Javascript闭包和闭包的几种写法及用途【转】
一.什么是闭包和闭包的几种写法和用法 1.什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...
全面理解Javascript闭包和闭包的几种写法及用途
一.什么是闭包和闭包的几种写法和用法 1.什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...
JavaScript闭包如何工作？
您将如何向了解其闭包概念(例如函数,变量等)的人解释JavaScript闭包,但却不了解闭包本身? 我已经在Wikipedia上看到了Scheme示例 ,但是不幸的是它没有帮助. #1楼我知道已经有 ...
让你分分钟理解 JavaScript 闭包
原文:https://www.cnblogs.com/onepixel/p/5062456.html 让你分分钟理解 JavaScript 闭包闭包,是 Javascript 比较重要的一个概念,对 ...
全面理解Javascript闭包和闭包的几种写法及用途--转载自https://www.cnblogs.com/yunfeifei/p/4019504.html...
全面理解Javascript闭包和闭包的几种写法及用途好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一 ...
[转载]深入理解JavaScript闭包(closure)
最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...
[转]Javascript 闭包
[转]Javascript 闭包简介 Closure 所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 闭 ...
JavaScript 闭包的详细分享（三种创建方式）（附小实例）
JavaScript闭包的详细理解一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...

Javascript--闭包

Javascript--闭包相关推荐

最新文章

热门文章