zoukankan      html  css  js  c++  java
  • 匿名函数&闭包

      感觉这是js的核心中心又是基本点了,理解后又忘了。然后再来过一遍。

    匿名函数:

    匿名函数为没有函数名的函数。

    匿名函数的创建:

    1) var a=function(x){return x};  //即常见的创建函数的方式。

    2) (function(x,y){

           alert(x+y);        

    })(2,3);

    这里创建了一个匿名函数,在第一个括号内,第二个括号用于调用该匿名函数,并传入参数。

    闭包:

    在js中使用闭包能大大减少代码量,使代码看上去更加清晰,很重要。

    闭包即是函数的嵌套,内层的函数可以使用外层函数的所有变量,即使外层函数已经执行完毕(参考js作用域链)。

    function check(){

    var str="abc";

    setTimeout(function(){alert(str);},1000);

    }

    check();

    setTimeout()里面的函数为一个匿名函数。

    check函数是瞬间执行的,在check的函数体内创建了一个变量str,在check执行完毕后str并没有被释放(正常情况是用完就释放的),这是因为setTimeout内的匿名函数存在对str的引用。在1秒后函数体内的匿名函数被执行完毕,str才会被释放。

    function Time(x,y){

      alert(x+y);

    }

    function delay(x,y,time){

      setTimeout('Time('+x+','+y+')',time);

    }

    //上面的delay函数可以用闭包的方式来写,如下:

    function delay(x,y,time){

      setTimeout(

        function(){ Time(x,y)}

       ,time );

    }

    匿名函数最大的用途是创建闭包,并且可以构建命名空间,以减少全局变量的使用。

    var Test={};

    (function(){

      var addEvent=function(){/*省略了具体实现代码*/};

      function removeEvent(){}

     Test.addEvent=addEvent;

    Test.removeEvent=removeEvent;

    })();

    在这里,addEvent和removeEvent都是局部变量,通过Test使用它,大大减少了全局变量的使用,增强了网页的安全性。使用此段代码: Test.addEvent(document.getElementById('box'),'click',function(){});

    var Test=(function(x,y){

      return x+y;

    })(2,3);

    //也可以写成不要第一个括号的形式,但是第一个括号可以帮助我们阅读,建议保留。

    var outer=null;

    (function(){

      var one=1;

      funciton inner(){

        one +=1;

        alert(one);

    }

        outer=inner;

    })()

    outer();  //2

    outer();  //3

    outer();  //4

    变量one是一个局部变量,被定义在一个函数之内,因此外部是不可以访问的。然后创建了inner函数,inner函数可以访问one变量,又将全局变量outer引用了inner,所以三次调用outer会弹出递增的结果。

    闭包允许内层函数引用父函数中的变量,但是该变量是最终值。

    /**

    *<body>

    *<ul>

     * <li>one</li>

     * <li>two</li>

     * <li>three</li>

    *</ul>

    */

    var lists=document.getElementByTagName('li');

    for(var i=0,len=lists.length;i<len;i++){

      lists[i].onmouseover=function(){

        alert(i);

      };

    }

     当塑标移动过每一个li元素时,总是弹出4,而不是希望的下标。原因是当mouseover事件调用监听函数时,首先在匿名函数内部查找是否定义了i,结果是没有定义。因此它会向上查找,查找结果是已经定义了,并且i的值是4,为循环后的值。所以,最终每次弹出的都是4。

    解决办法:

    1)

    var lists=document.getElementsByTagName('li');

    for(var i=0,len=lists.length;i<len;i++){

    (function(index){

     lists[index].onmouseover=function(){alert(index);};

    })(i);

    }

    2)

    var lists=document.getElementsByTagName('li');

    for(var i=0,len=lists.length;i<len;i++){

      lists[i].$$index=i;

      lists[i].onmouseover=function(){

       alert(this.$$index);

      }

    }

    3)

    function eventListener(list,index){

    list.onmouseover=function(){

      alert(index);

     };

    }

     var lists=document.getElementsByTagName('li');

    for(var i=0,len=lists.length;i<len;i++){

      eventListener(lists[i];i);

    }

  • 相关阅读:
    .Net简单上传与下载
    C语言课程设计——电影院订票系统
    Git学习笔记
    浅析RPO漏洞攻击原理
    网络1911、1912 C语言第5次作业循环结构 批改总结
    MOCTF WriteUp
    Visual Studio 2019/2017 安装使用教程(快速上手版)
    南京邮电大学网络攻防平台——WriteUp(持续更新)
    java大作业博客购物车
    .Net Framework 2.0 的System.Data.SqlClient.AddWithValue()方法
  • 原文地址:https://www.cnblogs.com/lionisnotkitty/p/6283111.html
Copyright © 2011-2022 走看看