匿名函数和闭包的相关应用详解
本章节详细介绍一下匿名函数和闭包的相关应用,需要的朋友可以做一下参考。
一.匿名函数:
所谓匿名函数就是没有名称的函数,非具名函数。
(1).具名函数的创建:
创建方式一:
function func(webName) { console.log(webName); }
上面是最为常见的创建函数的方式。
创建方式二:
var func = new Function('webName', 'console.log(webName);');
关于构造函数Function可以参阅javascript Function()构造函数简单介绍一章节。
创建方式三:
var func = function (webName) { console.log(webName); }
上面的代码其实右侧是创建的一个匿名函数,然后将匿名函数的地址赋值给变量func。
(2).匿名函数的创建:
上面第三种就是一个匿名函数的创建。
下面再来看一种方式:
(function (webName) { console.log(webName); })("前端教程网");
二.闭包:
所谓的闭包简单的说就是函数的嵌套,内层的函数可以使用外层函数的变量,即使外层函数已经执行完毕,变量依然驻留内存的一种现象。更多相关内容可以参阅javascript闭包概念简单解析一章节。
代码实例一:
function func() { var url = "pipipi.net"; return function () { console.log(url); } } var antzone = func(); antzone();
下面就对上面的代码做一下简单介绍:
通常情况下,如果一个函数执行完毕,那么它内部的变量都会销毁,但是func函数内部嵌套有一个匿名函数,func()函数执行的时候,会返回此匿名函数,又因为匿名函数会使用变量url,所以此变量不会被销毁。只有当antzone()执行完毕,变量url才会被释放。
代码实例二:
使用闭包优化代码,原来的代码如下:
function forTimeout(x, y) { console.log(x + y); } function delay(x, y, time) { setTimeout('forTimeout(' + x + ',' + y + ')', time); }
代码优化如下:
function delay(x , y , time){ setTimeout( function(){ forTimeout(x , y) } , time); }
上面的代码是不是更加清晰,编写起来也更加容易了。
使用匿名函数可以创建闭包,并且还可以构建命名空间,以减少全局变量的使用。
代码实例三:
var oEvent = {}; (function () { var addEvent = function () { //code }; function removeEvent() { //code } oEvent.addEvent = addEvent; oEvent.removeEvent = removeEvent; })();
函数addEvent和removeEvent都是局部变量。
但可以通过全局变量oEvent使用它,这就减少全局变量的使用,增强了网页的安全性。
代码实例四:
先看一段代码实例,这是关于匿名函数的:
var rainman = (function (x, y) { return x + y; })(2, 3); console.log(rainman);
再来看如下代码:
var rainman = function(x , y){ return x + y; }(2, 3); console.log(rainman);
这个代码和上面的代码其实是一回事,上面的代码使用小括号将匿名函数包裹可以让代码更加清晰。
代码示例五:
var outer = null; (function () { var one = 1; function inner() { one += 1; console.log(one); } outer = inner; })(); outer(); outer(); outer();
这段代码中的变量one是一个局部变量(因为它被定义在一个函数之内),因此外部是不可以访问的。
这里创建inner函数,此函数是可以访问变量one;又将全局变量outer引用inner,所以三次调用outer会弹出递增的结果。