您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-匿名函数和闭包

发布时间：2018-04-05 17:56:01编辑：雪饮阅读（）

 匿名函数的自我执行

(function(){alert('杜敏捷');})();

匿名函数的自我执行的传参

(function(name,age){

         var str=name+age+'岁';

         alert(str);

})('杜敏捷',28);

闭包

function box(){

         return function(name,age){

                   //闭包

                   var str=name+age+'岁';

                   alert(str);

         };

}

box()('杜敏捷',28);

闭包函数应用-变量的累加

闭包可以把局部变量驻留在内存中

一般情况下变量累加最简单的就是用全局变量，但是这样会造成变量污染，特别是在团队合作开发时候，你的变量名可能和别人的变量名一样，这样就对你们都影响了。所以最好使用局部变量。

function box(){

         var age=100;

         return function(){

         age++;

         return age;      

         }

}

var anonymous=box();

alert(anonymous());

alert(anonymous());

//错误的调用方法，这样会造成外层函数的重复初始化

alert(box()());

//闭包使用完毕后最好解除变量驻留，否则会导致性能问题

anonymous=null;

遍历匿名函数数组取值问题

会发现遍历这个匿名函数数组取值的时候每次都是取的匿名函数中变量的最后一次累加值

这是因为在每个索引处只是声明了匿名函数，而每次声明的函数体中的变量在循环结束后就是最后一次变量的值了。所以当遍历匿名函数数组取值的时候变量还是之前的变量，但值早已改变成最后一次的值了。

function box(){
    //使用闭包创建一个匿名函数数组
    var arr=[];
    for(var i=0;i<5;i++){
        arr[i]=function(){
            return i;
        }
    }
    return arr;
}
var b=box();
//遍历匿名函数数组并执行每个匿名函数
for(var i=0;i<5;i++){
    alert(b[i]());
}

遍历匿名函数数组取值问题的解决

使用匿名函数立即执行的方式，在其内部再返回一个函数，匿名函数内部的函数由于匿名函数立即执行所以每次得到的都是变量的即实值，而传参相当于在内部又建立了一个变量，在javascript中一个函数相当于一个对象，内部变量则是这个内部函数的一个属性，不同的内部函数的属性并没有共享，所以该问题得到解决。

function box(){
     //使用闭包创建一个匿名函数数组
     var arr=[];
     for(var i=0;i<5;i++){
         arr[i]=(function(num){
             return function(){
                 return num;
             }
         })(i);
     }
     return arr;
 }
 var b=box();
 //遍历匿名函数数组并执行每个匿名函数
 for(var i=0;i<5;i++){
     alert(b[i]());
 }

遍历匿名函数数组取值问题的解决的优化

当一个匿名函数自我执行结果赋值于一个变量的时候包在该匿名函数外的括号可以取消的

function box(){

    //使用闭包创建一个匿名函数数组

    var arr=[];

    for(var i=0;i<5;i++){

        arr[i]=function(num){

            return function(){

                return num;

            }

        }(i);

    }

    return arr;

}

var b=box();

//遍历匿名函数数组并执行每个匿名函数

for(var i=0;i<5;i++){

    alert(b[i]());

}

闭包中的this指向windows object

var box={
         getThis:function(){
             return function(){
                 return this;
             }
         }
     }
 
 alert(box.getThis()());

修改闭包中的this指向

var user='the windows';

    var box={

        user:'the box',

        getThis:function(){

            //这里的作用域是对象本身

            var that=this;

          return function(){

              //这里的作用域是windows

              return that.user;

          }

        }

    }

 

alert(box.getThis()());

 

修改闭包中的this指向(通过对象冒充)

   var user='the windows';
     var box={
         user:'the box',
         getThis:function(){
           return function(){
               return this.user;
           }
         }
     }
 
 alert(box.getThis().call(box));

匿名函数内部创建对象原型构造并实现外部访问(属性共享)

(function(){
   var user='';
   Box=function(val){
       user=val;
       this.getUser=function(){
           return user;
       }
   }
})();

var box=new Box(24);
alert(box.getUser());
var box2=new Box(28);
alert(box.getUser());

匿名函数内部创建对象原型构造并实现外部访问(属性和方法共享)

(function(){
    var user='';
    Box=function(val){
        user=val;
    };
    Box.prototype.getUser=function(){
        return user;
    }
 })();
 
 var box=new Box(24);
 alert(box.getUser());
 var box2=new Box(28);
 alert(box.getUser());