浅谈js中的闭包_javascript技巧

首先我们先来看一段代码:

复制代码 代码如下:

<a href="javascript:void(0);">111</a>
<a href="javascript:void(0);">222</a>
<a href="javacsript:void(0);">333</a>
var a=document.getElementsByTagName("a");
  function b(){
    for(var i=0;i<a.length;i++){
    a[i].onclick=function(){
      alert(i);
    }  
  }
}

  按照我们设计的初衷,应该是点击一个a标签就相应的弹出该标签的序列号,即点击第一个a就弹出0,点击第二个就弹出1...但是事实是弹出的始终是a标签的个数,这是什么原因呢?这个问题困扰了我很久,查阅了许多网上的资料还有参考书籍,大多说的似是而非,相信也有许多同学对其中原因也不甚了解,就这个问题我谈谈自己的理解,如有不当之处,还请批评指正。

  就我个人的理解,上述函数未能达到目的的原因是,事件处理函数绑定了变量i,而该事件处理函数又赋值给了onclick,即是说只有在点击a标签的时候才会调用该函数,因此从逻辑上来说,在单纯的for循环里面function(){alert(i);}这段函数实际上是没有执行的,而当我们点击a标签的时候for循环早就已经执行完毕,此时i的值就是for循环执行完毕的终态值。通俗一点理解,就是这个i的值是属于b函数的,而我们需要的i的值是实时传递进事件处理函数中的值。那么有什么方法可以实现我们的设计初衷呢?聪明的同学可能已经猜到了,那就是使用闭包。

下面我们再来看一段代码:

复制代码 代码如下:

var a=document.getElementsByTagName("a");
  function b(){
    for(var i=0;i<a.length;i++){
      a[i].onclick=function(j){
        return function(){
        alert(j);
      }
    }(i);
  }
}
b();

  执行以上代码可以发现,我们所要的功能已经实现,即点击任意a标签都会弹出该标签所在的序列号。对上述代码,相信许多同学都看过许多雷同的版本,但是为什么这样做就能实现我们需要的功能了呢,一下是个人的一点浅见,如有不当,还请不吝赐教。

  对上述代码的理解,其本质就是对变量i的理解。在这段代码中,函数执行到for循环处发现了一个立即调用函数,这个时候给这个立即调用函数传递实时的i变量值,函数立即调用完成,事件处理函数也就存储了实时的i变量值。

以上所述就是本文的全部内容了,希望对大家理解js闭包能够有所帮助。

时间: 2024-11-03 02:04:23

浅谈js中的闭包_javascript技巧的相关文章

浅谈javascript中的闭包_javascript技巧

很长一段时间不理解闭包,后来了解了作用域,以及this相关问题才理解了闭包相关知识. 闭包(closure),也是面试题常客.简单点来说就是函数嵌套函数. 函数作为返回值: function foo () { var a = 1; return function () { a++; console.log(a); } } var aaa = foo(); aaa(); //2 aaa(); //3 其实这个代码不难理解,aaa是指向foo()返回的一个新函数,但是在这个函数里面引用了a变量,所以

浅谈js中变量初始化_javascript技巧

我在js里面写了一个去除首尾空格及特定字符的函数.代码如下: 复制代码 代码如下: function trim(str, charlist) {     return str.replace(new RegExp('^[\\s'+charlist+']+|[\\s'+charlist+']+$', 'g'), ''); } 代码看上去没有什么问题,运行起来也没有错误. 直到今天,我在搜索栏里搜索"note3"的时候,才发现,地址栏里搜索的内容变成了"ote3",而其

浅谈javascript中自定义模版_javascript技巧

/** * Created by Administrator on 15-1-19. */ function functionUtil() { } functionUtil = { //某个DOM节点是否有某个属性 hasAttr: function (el, name) { var attr = el.getAttributeNode && el.getAttributeNode(name); return attr ? attr.specified : false }, //根据cla

浅谈js的异步执行_javascript技巧

1.Javascript语言的执行环境是"单线程"(single thread): 优点:实现起来比较简单,执行环境相对单纯: 缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行. 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 2.&

浅谈JavaScript for循环 闭包_javascript技巧

有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo

浅谈jQuery中setInterval()方法_javascript技巧

定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. var time=0: 用法1: function jump(){ ---- //函数内容 } time = setInterval("jump",5000); //每个五秒调用一

浅谈javascript中replace()方法_javascript技巧

定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串.语法stringObject.replace(regexp/substr,replacement) 返回值 一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的.说明 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作.它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 r

浅谈js中的闭包

 闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样.闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等.     首先我们先来看一段代码:   代码如下: <a href="javascript:void(0);">111</a> <a href="javascript:void(0);">222</a> &

浅谈javascript中的作用域_javascript技巧

JS中作用域的概念: 表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境.Javascript的作用域只有两种:全局作用域和本地作用域,本地作用域是按照函数来区分的. 首先来看几道题目: 1. 复制代码 代码如下: if(true){ var aa= "bb"; } console.log(aa); //bb for(var i = 0; i < 100; i++){ //do } console.log(i); //100 2. 复制代码 代码如下