Js基础知识6-JavaScript匿名函数和闭包

Posted 笠航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js基础知识6-JavaScript匿名函数和闭包相关的知识,希望对你有一定的参考价值。

1,把匿名函数赋值给变量

var test = function() {
    return ‘guoyu‘;
};
alert(test);//test是个函数
alert(test());

2,把匿名函数自我执行的返回值赋值给变量

var test = (function() {
    return ‘GY‘;
})();
alert(test);//弹出  GY

3,自我执行,第一个圆括号放匿名函数,第二个括号执行并传参

(function(a, b) {
    alert(a+b);
})(2,5);//直接弹出7

4,自我执匿名函数的传参

alert((function() {
    return ‘guoyu‘;
})());

5,函数里面放一个匿名函数

functiontest() {
    return function() {
        return ‘guoyu‘;
    };
}
alert(test());//执行test(),结果是一个函数体
alert(test()());//弹出guoyu

var t = test();
alert(t());//弹出guoyu

闭包

闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见方式,就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量

1,通过闭包可以返回局部变量

functiontest() {
    var age = 28;
    return function() {
        return age;
    };
}
alert(test()());//直接弹出 28

2,使用闭包有个优点,同时也是缺点:局部变量驻留内存中,可以避免使用全局变量(全局变量污染导致应用程序的不可预知性,每个模块都可以调用必将引来灾难,推荐使用私有的,封装的局部变量)

使用全局变量进行累加
var age = 20;
functiontest() {
    age++;
    return age;
}
alert(test());//21
alert(test());//22
如果你把var age = 20;放进test()函数内,那么每次执行都会重新初始化为20,每次弹出的都是21,无论执行多少次!

3,使用匿名函数实现局部变量驻留内存中从而累加

functiontest() {
    var age = 20;
    return function() {
        age++;
        return age;
    }
}
var t = test();
alert(t());//21
alert(t());//22
alert(t());//23
alert(t());//24
/*如果每次都初始化age = 20;那么每次返回都是21,不能实现累加,因此要避免初始化那一句,只要调用第一个return 语句即可,每次只调用t()即可*/
t = null;//解除引用,等待垃圾回收

循环里的匿名函数的取值问题

function test() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = function() {
            return i;
        };
    }

    //循环执行完毕,i最终是4++,就是5
    return arr;
}

/*
    alert(test());
    打印出5个并列的“function() {return i;}”,
    因为arr数组的每个元素都是一个匿名函数,每个匿名函数都是返回"i",
    并不是返回123....,因为这个匿名函数是死的,没有执行(自执行)
*/
alert(test()[0]);//弹出“function() {return i;}”

var t = test();

for (var i = 0; i < 5; i++) {
    //alert(t[i]);//数组里面都是一个没有自执行的匿名函数


    //现在让数组里的每个死函数执行起来,但是全都是弹出‘5’
    //因为执行test()里的循环后,i已经为5了,但每个数组里面都存的是个死函数,返回一个死i
    alert(t[i]());
}

如何解决上述的问题呢?

修改1

functiontest() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = i;//这里不用匿名函数,直接给个i,
    }
    return arr;
}

var t = test();

for (var i = 0; i < 5; i++) {
    alert(t[i]);//依次弹出0,1,2,3,4
}

修改2,通过自我即时执行匿名函数:

//将匿名函数里面的变量驻留到内存感觉像全局变量
functiontest() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) {
            return num;
        })(i);
    }
    return arr;
}

var t = test();

for (var i = 0; i < 5; i++) {
    alert(t[i]);//依次弹出0,1,2,3,4
}

修改3:

functiontest() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) {
            //return num;
            return function() {//这么写就是闭包了,闭包将变量驻留在内存,和前例中累加一个道理
                return num;
            };
        })(i);
    }
    return arr;
}

var t = test();

for (var i = 0; i < 5; i++) {
    //alert(t[i]);这里返回的是5个依次“function() {return num;}”
    alert(t[i]());//依次打印出0,1,2,3,4
}

闭包中的this

var test = {
    getThis: function() {
        return this;
    }
};

alert(test.getThis());//[object Object]

再看看闭包中:

var test = {
    getThis: function() {
        return function() {//这么写就是闭包了
            return this;
        };
    }
};

alert(test.getThis()());//[object Window]

结论:this 对象在运行时基于函数的执行环境绑定的,如果this在全局范围就是widow,如果在对象内部就指向这个对象。而闭包在运行时指向window的,因为闭包不属于这个对象的属性或方法,再看下面

var user = ‘The Window‘;
var box = {
    user:‘The Box‘,
    getUser: function() {
        //return this.user;
        return function() {//这么写就是闭包了
            return this.user;
        };
    }
};

alert(box.getUser()());//The Window

那么有的同学想问了,怎么才能让它弹出 The box呢?
方法有两个:对象冒充,变量保存_this

var user = ‘The Window‘;
var box = {
    user:‘The Box‘,
    getUser: function() {//这个地方要冒充一下
        return function() {
            return this.user;
        };
    }
};

alert(box.getUser().call(box));//The Box
var user = ‘The Window‘;
var box = {
    user:‘The Box‘,
    getUser: function() {
        var _this = this;//保存到临时变量
        return function() {
            return _this.user;
        };
    }
};

alert(box.getUser()());//The Box

 


模仿块级作用域,for ,if 等块级里的东西封装起来,变量私有化,可以保护数据,防止泄露,js没有私有作用域这个概念

functiontest() {
    for(var i = 0; i < 5; i++) {//块级作用域,可惜JS没这个东西

    }
    var i;//重新声明也不影响
    alert(i);//即使超出for块级,依旧打印出5,说明js没有块级作用域这个概念
}
test();

开始使用块级作用域,也就是出了if , for等块,里面的i就不再起效,方法就是包含自我执行的匿名函数,就可以实现私有作用域

functiontest() {
    (function() {
        for (var i = 0; i < 5; i++) {//包含自我执行的匿名函数,就可以实现私有作用域
            alert(i);
        }
    })();

    alert(i);
    //这里i就不认识了,相当于没定义i,i被销毁了,后面继续定义i和上面的i没任何关系,防止污染
}
test();
(function() {
    var age = 20;
    alert(age);
})();
alert(age);//报错,undefined
//这样可以全局变量私有化,防止污染

 

私有变量(外部不可访问)

functiontest() {
    var age = 20; //私有变量
}

 


functionTest() {
    this.age = 20;//属性:公有的,外部可访问
    this.run = function() {//方法:公有的
        return ‘is running...‘;
    };
}


var t = new Test();
alert(t.age);
alert(t.run());

 

functionTest() {
    var age = 20;  //私有变量
    functionrun() {//私有函数
        return ‘ is running...‘;
    }

    this.publicGo = function() { //对外可见的公共接口,特权方法
        return age + run();
    };
}

var t = new Test();
alert(t.publicGo());
//20 is running...私有变量,私有函数,通过公共接口被访问
//把一些细节封装起来,通过一些接口去访问
    

以上是关于Js基础知识6-JavaScript匿名函数和闭包的主要内容,如果未能解决你的问题,请参考以下文章

js中的匿名函数和闭包总结篇

js中的匿名函数和闭包总结篇

Node.js匿名函数-闭包-Promise

js 闭包(面试题)

14.匿名函数和闭包

浅析PHP中的闭包和匿名函数