JavaScript中的匿名函数以及闭包

JavaScript中的匿名函数以及闭包

匿名函数:匿名函数,也叫自执行的函数。从字面上就可以直接看出匿名函数是不需要通过调用来执行函数,在页面运行时,匿名函数也会自己运行起来。

作用:各自的代码都写在匿名函数中,并通过()立即执行,根据变量的作用域,可以达到保护变量的作用。

<script>
	(function (a) {
        alert(a);
      })(2);//2
    (function(){
        //A工程师的代码
        var a = 123;
          var b = 'abc';

           alert(a);
       })();
</script>

匿名函数的使用:

1定义一个变量用来接收匿名函数的返回值。

<script>
	var abc=function(x,y){  
  		return x+y;  
	}  
	alert(abc(2,3)); // "5"  
</Script>

上面的操作其实就等于换个方式去定义函数,这种用法是我们比较频繁遇到的。例如我们在设定一个DOM元素事件处理函数的时候,我们通常都不会为他们定名字,而是赋予它的对应事件引用一个匿名函数。

2 使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)

<script>
	alert((function(x,y){return x+y;})(2,3));// "5"  
    alert((new Function("x","y","return x*y;"))(2,3));// "6"  
    //拆分效果
    (function(x,y){
     	return x*y;   
    })(2,3);
</script>

小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function对象。因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。

闭包

闭包就是能够读取其他函数内部变量的函数。

<script>
	function a(){
           var i = 0;
            function b(){
                console.log(++i);
            }
            return b; 
         }
</script>

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

<script>
	function f1(){

    var n=1;

    nAdd=function(){n+=1}

    function f2(){
      alert(n);
    }
    return f2;

  }

  var result=f1();

  result(); // 1

  nAdd();

  result(); // 2
</script>

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

<script>
	<script>
        //A - B
        // function a(){
        //     var i = 0;
        //     console.log(++i);
        // }
        // a();//
        // a();//
        // a();//
        // A - B - C 
        // function a(){
        //     var i = 0;
        //     function b(){
        //         console.log(++i);
        //     }
        //     return b; //  z这里是关键,返回的是函数内部的函数
        // }

        // var c = a();
        // // var c = function b(){

        // //     console.log(++i); // i 持久写入内存 我可以在这个函数内 一直 + 1
        // // }
        // c();
        // c();
        // c();
        // 111  123 
        // 作用:维持一个变量持久在内存 
        // 特点:满足 ABC调用  
        function a(){
            var i = 0;
            var btObj = document.getElementById("bt");
            function b(){
                console.log(++i);
            }
            btObj.onclick= b; //  
        }
        a();
    </script>
</script>

猜你喜欢

转载自blog.csdn.net/weixin_44691513/article/details/107283404