闭包和回调函数

2019-01-18  本文已影响0人  luckee

闭包

函数A内定义了一些变量和内部函数B,而且在B中使用了A的变量,然后返回函数B,那么B就称为A的闭包(闭包也是函数),即使A函数调用结束了,但它的变量的生命周期延续了(还在内存中,没被垃圾回收器收走),因为B引用了这些变量

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);      //16

此时,在foo函数中已经形成了一个闭包,这就意味着,只要bar函数不死,垃圾回收机制就不敢去动foo函数,而此时,我们的bar函数所指向的那个匿名函数就可以一直去访问那个tmp和x,且,注意了!每次调用,都会得到上一次被自增了以后的tmp
bar(10); //16 第一次调用
bar(10); //17 第二次调用

回调函数

将函数B作为函数A的参数传给A,然后在A中使用B(不一定是在A中直接执行B,可能A又把B传给别人,B最终在哪执行不好说,比如A把B作为某个事件的处理函数),那么B就叫做A的回调函数。常见的回调函数的使用有ajax,为某个元素添加事件处理函数等

A=(x)=>{alert(x)};
B=(callback)=>{
  let y=1;
  callback(y)
};
B(A);
<script>
   
    // 函数闭包
    /*
    *闭包函数是指有权访问另一个函数作用域中的变量的函数,
    *  创建闭包函数最常见的方式是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量
    * 闭包的特点:1函数嵌套函数,
    *            2 函数内部可以引用外部的参数和变量
    *            3 参数和变量不会被垃圾回收机制回收
    * 闭包的优点:1 希望一个变量长期驻扎在内存中
    *            2 避免全局变量的污染
    *            3 私有变量存在
    * 闭包的实现 1:函数嵌套函数
    *           2 外层函数返回内层函数
    *           3 外面有一全局变量接受外层函数
    * */
    function fun1() {
        var sum=0;
        function fun2() {
            sum++;
            return sum
        }
        return fun2
    }
    var s=fun1();
    console.log(s());
    console.log(s());
    console.log(s());
    s=null;
    console.log(s);


    //  自执行函数  的闭包
    //
    var fun3=function () {
       var a=3;
       return{
           b:7,
           sum:function () {
               return this.b+a;
           }
       }
    }();
    console.log(fun3.sum());
    console.log(fun3.sum());


    /*
        *  把函数名当参数调用
        *  回调函数
        *
        * */
    function b() {
        console.log("b");
    }
    function c() {
        console.log("c");
    }
    function d(fun) {
        fun();
    }
    d(b);
    d(c);


    // 循环
    var num=0;
    function a1(fun) {
        fun(a1);
    }
    function a2(fun) {
        num++;
        console.log(num);
        if(num>10) return;
        fun(a2);
    }
    a1(a2);

    // 事件函数  也是 回调函数
    this.addEventListener("click",clickHandler);
    function clickHandler(e) {

    }
    setInterval(animation,16);
    function animation() {

    }
</script>
上一篇 下一篇

猜你喜欢

热点阅读