匿名函数和闭包的相关应用详解

快乐打工仔 分类:实例代码

本章节详细介绍一下匿名函数和闭包的相关应用,需要的朋友可以做一下参考。

一.匿名函数:

所谓匿名函数就是没有名称的函数,非具名函数。

(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会弹出递增的结果。

回复

我来回复
  • 暂无回复内容